Logto ile Nuxt kimlik doğrulaması oluşturun
Nuxt ile kullanıcı kimlik doğrulama akışı nasıl oluşturulur, Logto SDK'sı entegre ederek öğrenin.
Founder
Başlayın
Giriş
- Logto, kimlik altyapıları oluşturmak için açık kaynaklı bir Auth0 alternatifidir. Kullanıcı adı, e-posta, telefon numarası ve Google ve GitHub gibi popüler sosyal giriş yöntemleri dahil olmak üzere çeşitli giriş yöntemlerini destekler.
- Nuxt web geliştirme işlemini sezgisel ve güçlü kılan bir açık kaynak çerçevesi.
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.
Ön Koşullar
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
- Bir Logto hesabı. Eğer yoksa, ücretsiz kaydolabilirsiniz.
- A Nuxt geliştirme ortamı ve bir proje.
Bir Logto uygulaması oluşturun
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:
- Logto Konsolu'nda oturum açın.
- Sol gezinme çubuğunda Uygulamalar üzerine tıklayın.
- Uygulama oluştur üzerine tıklayın.
- Açılan sayfada, "Geleneksel web" bölümünü bulun ve "Nuxt" kartını seçin.
- Yapmaya başla üzerine tıklayın ve uygulamanızın adını girin.
- Oluştur üzerine tıklayın.
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.
Logto SDK'sı Integre Et
Kurulum
Favori paket yöneticiniz aracılığıyla Logto SDK'sını yükleyin:
Logto Modülünü Kaydet
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.
Oturum açmayı ve oturumu kapatmayı gerçekleştir
Yönlendirme URI'lerini yapılandırın
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:
- Oturum açmak (
/sign-in), oturumu kapatmak (/sign-out) ve geri çağırma (/callback) için üç yol ekler. - İki katmana alınabilir öğeyi alın:
useLogtoClientveuseLogtoUser.
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ı Bilgilerini Göster
Kullanıcının bilgilerini göstermek için, hem sunucu tarafında hem de istemci tarafında kullanılabilen useLogtoUser() katmanını kullanabilirsiniz:
Kontrol Noktası: Uygulamayı Çalıştırın
Şimdi uygulamayı çalıştırabilir ve Logto ile giriş/çıkış yapmayı deneyebilirsiniz:
- Uygulamayı tarayıcınızda açın, "Giriş yap" düğmesini görmelisiniz.
- "Giriş yap" düğmesine tıklayın ve Logto giriş sayfasına yönlendirilmelisiniz.
- Giriş yaptıktan sonra uygulamaya geri yönlendirilmelisiniz ve kullanıcı verilerini ve "Çıkış yap" düğmesini görmelisiniz.
- "Çıkış yap" düğmesine tıklayın ve Logto çıkış sayfasına yönlendirilmeli ve ardından giriş yapılmamış durumda uygulamaya geri yönlendirilmelisiniz.
Entegrasyon sırasında herhangi bir sorunla karşılaşırsanız, topluluk ve Logto ekibiyle sohbet etmek için Discord sunucumuza katılmaktan çekinmeyin!