Nuxt ile kullanıcı kimlik doğrulama akışı nasıl oluşturulur, Logto SDK'sı entegre ederek öğrenin.
Bu öğreticide, Logto SDK'yı entegre ederek Nuxt ile bir kullanıcı kimlik doğrulama akışı oluşturmayı göstereceğiz. Öğreticide programlama dili olarak TypeScript kullanılmaktadır.
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
Başlamak için "Geleneksel web" türünde bir Logto uygulaması oluşturun. Bir Logto uygulaması oluşturmak için şu adımları izleyin:
Daha sonra Nuxt uygulamanızla Logto SDK'yı entegre etme sürecinde size yol gösterecek bir etkileşimli kılavuz göreceksiniz. Aşağıdaki içerik gelecekte referans olarak kullanılabilir.
Favori paket yöneticiniz aracılığıyla Logto SDK'sını yükleyin:
Nuxt yapılandırma dosyanızda (nuxt.config.ts), Logto modülünü ekleyin:
Modül için minimal yapılandırma aşağıdaki gibidir:
Bu bilgilerin hassas olduğu göz önünde bulundurulduğunda, çevre değişkenlerini kullanmanız önerilir:
Daha fazla bilgi için runtime config bakınız.
Logto Konsolu'nun uygulama detayları sayfasına geçin. Bir Yönlendirme URI'si http://localhost:3000/callback ekleyin.
Yönlendirme URI'si, kimlik doğrulamasından sonra yönlendirilmesi gereken konumu belirten bir OAuth 2.0 kavramıdır.
Benzer şekilde, "Çıkış sonrası yönlendirme URI'si" bölümüne http://localhost:3000/ ekleyin.
Çıkış Sonrası Yönlendirme URI'si, çıkış yaptıktan sonra yönlendirilmesi gereken konumu belirten bir OAuth 2.0 kavramıdır.
Değişiklikleri kaydetmek için "Kaydet" üzerine tıklayın.
@logto/nuxt modülünü kaydederken, aşağıdakileri yapar:
/sign-in), oturumu kapatmak (/sign-out) ve geri çağırma (/callback) için üç yol ekler.useLogtoClient ve useLogtoUser.Bu yollar, modül seçeneklerindeki logto.pathnames aracılığıyla yapılandırılabilir, örneğin:
Daha fazla bilgi için @logto/nuxt paketindeki type definition file klasörünü kontrol edin.
Nuxt sayfaları ilk yüklemeden sonra hidrate olacak ve tek sayfalı bir uygulama (SPA) olacak, bu yüzden ihtiyaç duyulduğunda kullanıcıyı oturum açma veya oturumu kapatma rotasına yönlendirmemiz gerekiyor.
Kullanıcının bilgilerini göstermek için, hem sunucu tarafında hem de istemci tarafında kullanılabilen useLogtoUser() katmanını kullanabilirsiniz:
Şimdi uygulamayı çalıştırabilir ve Logto ile giriş/çıkış yapmayı deneyebilirsiniz:
Entegrasyon sırasında herhangi bir sorunla karşılaşırsanız, topluluk ve Logto ekibiyle sohbet etmek için Discord sunucumuza katılmaktan çekinmeyin!