Logto ile Angular kimlik doğrulama oluştur
Angular OIDC istemci kütüphanesini entegre ederek Angular ile bir kullanıcı kimlik doğrulama akışı nasıl oluşturulacağını öğrenin.
Founder
Başlarken
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.
- Angular Google tarafından oluşturulan ve sürdürülen bir web geliştirme frameworküdür.
Bu öğreticide, Logto SDK'yı entegre ederek Angular 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.
- An Angular geliştirme ortamı ve bir proje.
Bir Logto uygulaması oluşturun
Başlamak için "Tek sayfa uygulama" 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, "Tek sayfa uygulama" bölümünü bulun ve "Angular" 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 Angular 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.
Projenize Logto'yu Entegre Edin
Kurulum
Logto JS çekirdek SDK'sı ve Angular OIDC istemci kütüphanesini yükleyin:
Uygulamayı yapılandırma
Angular projenizde, app.config.ts dosyanıza doğrulama sağlayıcısını ekleyin:
Oturum açma ve oturum kapatma 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.
Oturum açma ve oturum kapatma işlevlerini uygulamak istediğiniz bileşende (örneğin, app.component.ts), OidcSecurityService'i enjekte edin ve giriş ve çıkış yapmak için kullanın.
Bu işlemi şablonda gerçekleştirin ve oturum açma ve oturum kapatma için butonlar ekleyin:
Kimlik doğrulama durumuna abone olma ve kullanıcı bilgilerini görüntüleme
OidcSecurityService, kimlik doğrulama durumuna abone olmak için uygun bir yol sağlar:
Ve bunu şablonda kullanın:
Çalışma 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!