Logto ile SvelteKit kimlik doğrulaması oluşturma
SvelteKit ile kullanıcı kimlik doğrulama akışını nasıl oluşturacağınızı öğrenin, Logto SDK'yı entegre edin.
Founder
Başlamak
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.
- SvelteKit Svelte kullanarak hızlıca sağlam ve performanslı web uygulamaları geliştirmek için bir çerçevedir.
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.
Ön Koşullar
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
- Bir Logto hesabı. Eğer yoksa, ücretsiz kaydolabilirsiniz.
- A SvelteKit 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 "SvelteKit" 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 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.
Logto SDK ile entegrasyon
Kurulum
Favori paket yöneticinizi kullanarak Logto SDK'yı yükleyin:
Logto kancasını ekleyin
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.
Oturum açmayı ve oturumu kapatmayı uygulama
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.
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ı bilgilerini görüntüleme
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:
Kontrol noktası: Uygulamayı çalıştır
Ş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!