SvelteKit ile kullanıcı kimlik doğrulama akışını nasıl oluşturacağınızı öğrenin, Logto SDK'yı entegre edin.
Bu öğreticide, Logto SDK'yı entegre ederek SvelteKit 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 SvelteKit 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öneticinizi kullanarak Logto SDK'yı yükleyin:
hooks.server.ts dosyanızda, sunucunuza Logto kancaını enjekte etmek için aşağıdaki kodu ekleyin:
Bu bilgilerin hassas olması nedeniyle, çevre değişkenlerinin kullanılması önerilir:
Birden fazla kanca kullanmanız durumunda, onları zincirlemek için sequence() yardımcı işlevini kullanabilirsiniz:
Artık locals nesnesi içinde Logto istemcisine erişebilirsiniz. TypeScript için, app.d.ts'ye türü ekleyebilirsiniz:
user nesnesini daha sonra tartışacağı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.
Uygulamanıza geri dönün, oturum açmayı ve oturumu kapatmayı uygulamak istediğiniz sayfada, aşağıdaki işlemleri tanımlayın:
Daha sonra bu işlemleri Svelte bileşeninizde kullanın:
Kullanıcının bilgilerini görüntülemek için, locals.user nesnesini düzene enjekte edebilir ve bunu tüm sayfalara sunabilirsiniz:
Svelte bileşeninizde:
Ş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!