Angular OIDC istemci kütüphanesini entegre ederek Angular ile bir kullanıcı kimlik doğrulama akışı nasıl oluşturulacağını öğrenin.
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.
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
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:
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.
Logto JS çekirdek SDK'sı ve Angular OIDC istemci kütüphanesini yükleyin:
Angular projenizde, app.config.ts dosyanıza doğrulama sağlayıcısını ekleyin:
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:
OidcSecurityService, kimlik doğrulama durumuna abone olmak için uygun bir yol sağlar:
Ve bunu şablonda kullanın:
Ş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!