Logto x Hasura: Açık kaynaklı kimlik doğrulama + GraphQL çözümünü projenizi güçlendirmek için nasıl kullanırsınız

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: Giriş yapma, kimlik doğrulama ve kullanıcı kimliğini dakikalar içinde oluşturmanıza yardımcı olur.
• Hasura: 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 hem de Hasura 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

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.

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ü kullanıcılara atamayı unutmayın.

Hasura'da webhook kimlik doğrulamasını etkinleştirme#

Hasura, rol tabanlı erişim yönetimi kullanır 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 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 aracılığıyla ayarlayabilirsiniz:

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:

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.

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 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:

İ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:

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 veya Hasura Discord sunucusuna katılarak ekiple canlı sohbet etmeye çekinmeyin.