## Giriş Yeni bir proje söz konusu olduğunda genellikle birkaç şeyi atlayamazsınız: API'ler, kimlik doğrulama + yetkilendirme, kimlik ve son kullanıcı giriş akışı. Eskiden bu şeylere başlamak zordu çünkü pek çok kavram ve teknoloji geniş bir şekilde yayıldı: RESTful/GraphQL, web frontend, yerel istemci, istemcileri API'lerle bağlama, güvenlik ve kullanıcı deneyimini dengelemek için en iyi kimlik doğrulama uygulamaları, vb. Ayrıca, işleri çoğu "tekrar ediyor". Yani, her projede bazı ayarlamalarla ihtiyaç duyulan ve benzerler. Korkunç ve sıkıcı mı geliyor? Panik yapmayın. Bugün elimizde açık kaynak var. Aşağıdaki iki açık kaynak projeyle işler karmaşıklaşmıyor: - [Logto](https://github.com/logto-io/logto): Giriş yapma, kimlik doğrulama ve kullanıcı kimliğini dakikalar içinde oluşturmanıza yardımcı olur. - [Hasura](https://github.com/hasura/graphql-engine): Veritabanınızda ince ayarlı erişim kontrolü ile gerçek zamanlı, anında GraphQL API'ları. Bu makalede, Logto ve Hasura'yı bağlamaya odaklanacağız, bu sayede kimlik doğrulama, yetkilendirme ve GraphQL API'lerini sorunsuz bir şekilde uygulayabilirsiniz. Böylece roket bilimini öğrenmeden hızla işinize geçiş yapabilirsiniz. ## Başlangıç ### Ön koşullar Hem [Logto](https://docs.logto.io/docs/tutorials/get-started/) hem de [Hasura](https://hasura.io/docs/latest/getting-started/index/) başlangıç rehberine sahip olduklarından, onları okuduğunuzu ve temel bir hisse sahip olduğunuzu varsayıyoruz. Her ikisinin de çalışan bir örneğine erişim gereklidir. Erişilebilir uç noktaların olduğunu varsayıyoruz: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Docker/Docker Compose kullanıyorsanız, makinenizin (host) `localhost`una erişmek için Docker büyüsü `host.docker.internal` kullanabilirsiniz. Bu durumda, Logto uç noktası `http://host.docker.internal:3001` olacaktır. Ayrıca, istemci uygulamasını oluşturmak için tercih ettiğiniz bir platform ve çerçeveye sahip olduğunuzu varsayıyoruz, örneğin React veya Next.js. ### Logto'da API'yi kur Logto Yönetici Konsolunuzun sol navigasyon yan panelinde, "API Kaynakları"na tıklayın ve API Kaynağı yönetim sayfasını göreceksiniz. Ardından sağ üst köşedeki büyük “+ API Kaynağı Oluştur” düğmesine tıklayın. Açılan modalde API adı için `Hasura` ve API tanımlayıcı için `https://hasura.api` girin. API oluşturma modali

Makalemizin geri kalanında bu API tanımlayıcısını kullanacağız. Ancak tercihinize göre değerleri değiştirmekten çekinmeyin. “API Kaynağı Oluştur”a tıklayın, ve kaynağın başarıyla oluşturulduğunu gösteren bir mesaj gözükecek. Şimdilik Logto'da ihtiyacımız olan tek şey bu. ### Hasura için rol oluştur Hasura'nın izin yönetiminden yararlanmak için Logto'da roller oluşturacağız, bu roller Hasura'nın rollerine eşlenecek.

Rol adı, Hasura'nın "İzinler" sayfasındaki rol adına eşit olmalıdır. Rolü kullanıcılara atamayı unutmayın. ### Hasura'da webhook kimlik doğrulamasını etkinleştirme [Hasura, rol tabanlı erişim yönetimi kullanır](https://hasura.io/docs/latest/auth/index/) ve bu yetkilendirmeyi ele alır. Dolayısıyla, yalnızca kimlik doğrulamayı çözmemiz gerekiyor. İki yöntemi destekler: Webhook ve JWT. Daha esnek olduğu için [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/) seçiyoruz. Webhook kimlik doğrulamasını etkinleştirmek için yönetici sırrını ve kimlik doğrulama kancası uç noktasını ayarlamanız gerekir. - Yönetici sırrı, istek gönderirken Hasura yönetici erişimine sahip olmanın anahtarıdır. Webhook kimlik doğrulamasını etkinleştirmeden önce gereklidir. Güvenli bir yerde tutmayı unutmayın ve üretimde kullanmayın. - Kimlik doğrulama kancası uç noktası, kimlik doğrulama isteklerini gönderilecek bir URL'dir. Bunları [çevresel değişkenler](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode) aracılığıyla ayarlayabilirsiniz: ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Kendi sırınızla değiştirin HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Logto'da doldurulan API tanımlayıcısını kimlik doğrulama kancası uç noktası oluşturmak için kullandığımızı fark edebilirsiniz. Bu, kullanıcının kötü niyetli birinden gelebilecek rastgele bir yerine doğru taşıyıcı jetonunu geçmesini sağlar. Farklı bir Logto uç noktanız veya API göstergeniz varsa kimlik doğrulama kancası uç noktasını güncellemeniz gerekecek. Diyelim ki Logto uç noktası olarak `https://logto.domain.com` ve API tanımlayıcı olarak `https://graphql.domain.com` var, o zaman: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` Bundan itibaren, Hasura her GraphQL isteği için tüm istek başlıklarını Logto kimlik doğrulama kancası uç noktasına getirecek ve Logto da buna uygun şekilde yanıt verecek. ## Güvenli GraphQL istekleri gönderin ### Özet Hasura yönetici sırrını üretimde kullanmayacağımızdan, her GraphQL isteği aşağıdaki başlıklar tarafından güvence altına alınacaktır: - `Authorization` Logto tarafından üretilen standart taşıyıcı jeton. - `Expected-Role` Logto'nun kimlik doğrulama kancası yanıtında göstermesini istediğiniz rol. Kullanıcı `Authorization` başlığı ile belirtilen kullanıcı `Expected-Role`e sahip değilse, Logto `401 Yetkisiz` ile yanıt verir. `Authorization` başlığı, izleyici için Hasura API göstergesi ile JWT formatında geçerli bir Erişim Jetonu gerektirir. Tüm bunları hatırlamak ve birleştirmek oldukça zordur. Neyse ki, geek kısmı basitleştirmek için Logto SDK'larına sahibiz. ### Logto SDK'yi entegre edin [Entegrasyon rehberini](https://docs.logto.io/docs/recipes/integrate-logto/) takip ederek istemci uygulamanıza bir Logto SDK entegre edin. Bu, sadece GraphQL istekleri için geçerli bir Erişim Jetonu üretme yeteneğini değil, aynı zamanda son kullanıcılarınız için sorunsuz bir giriş deneyimini de sağlar. Rehberi bitirdiğinizde, `LogtoConfig` içinde küçük bir değişiklik yapmamız gerekiyor: Logto Yönetici Konsolunda oluşturduğunuz API göstergesini `resources` içerisine ekleyin. React SDK örneği: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Bu satırı ekleyin }; ``` ### İstek gönderin Sonunda! Kullanıcı giriş yaptıktan sonra, Logto SDK içindeki `getAccessToken()` fonksiyonunu kullanarak Hasura GraphQL istekleri için Erişim Jetonu alın: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // İsteği göndermeden önce request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Tekrar gözden geçirme Yukarıdaki çabayla, giriş başlığındaki atlanamayacak şeyleri başarıyla uyguladık: - Veritabanı şeması ile yönlendirilen GraphQL API uç noktası - OIDC protokolü üzerinden bir kimlik doğrulama ve kimlik hizmeti - Tam kullanıcı girişi akışı ve kimlik doğrulama durumu yönetimi - Kullanıcı kimliği ve rollerine dayalı güvenli API erişimi Zor değil, değil mi? Herhangi bir sorunla karşılaşırsanız, [Logto](https://discord.gg/vRvwuwgpVX) veya [Hasura](https://discord.gg/hasura) Discord sunucusuna katılarak ekiple canlı sohbet etmeye çekinmeyin.