Azure Active Directory B2C kullanarak örnek bir Angular tek sayfalı uygulamada kimlik doğrulamayı yapılandırma

Önemli

1 Mayıs 2025 tarihinden itibaren Azure AD B2C artık yeni müşteriler için satın alınamayacak. SSS bölümünden daha fazla bilgi edinebilirsiniz.

Bu makalede, Angular uygulamalarınıza Azure Active Directory B2C (Azure AD B2C) kimlik doğrulaması eklemeyi göstermek için örnek bir Angular tek sayfalı uygulama (SPA) kullanılmaktadır.

Genel Bakış

OpenID Connect (OIDC), bir kullanıcının uygulamada güvenli bir şekilde oturum açmasını sağlamak için kullanabileceğiniz OAuth 2.0 üzerinde oluşturulmuş bir kimlik doğrulama protokolüdür. Bu Angular örneği MSAL Angular ve MSAL Browser kullanır. MSAL, Microsoft tarafından sağlanan ve Angular SPA'lara kimlik doğrulaması ve yetkilendirme desteği eklemeyi kolaylaştıran bir kitaplıktır.

Oturum açma akışı

Oturum açma akışı aşağıdaki adımları içerir:

1. Kullanıcı uygulamayı açar ve Oturum aç'ı seçer.
2. Uygulama bir kimlik doğrulama isteği başlatır ve kullanıcıyı Azure AD B2C'ye yönlendirir.
3. Kullanıcı oturum açar veya oturum açar ve parolayı sıfırlar ya da bir sosyal hesapla oturum açar.
4. Başarıyla oturum açıldıktan sonra Azure AD B2C uygulamaya bir yetkilendirme kodu döndürür. Uygulama aşağıdaki eylemleri gerçekleştirir:
   1. Kimlik belirteci, erişim belirteci ve yenileme belirteci için yetkilendirme kodunu değiştirir.
   2. Kimlik belirteci taleplerini okur.
   3. Erişim belirtecini ve yenileme belirtecini daha sonra kullanmak üzere bellek içi önbellekte depolar. Erişim belirteci, kullanıcının web API'si gibi korumalı kaynakları çağırmasına olanak tanır. Yenileme belirteci, yeni bir erişim belirteci almak için kullanılır.

Uygulama kaydı

Uygulamanızın Azure AD B2C ile oturum açmasını ve bir web API'sini çağırmasını sağlamak için Azure AD B2C kiracınıza iki uygulama kaydetmeniz gerekir:

• Tek sayfalı uygulama (Angular) kaydı, uygulamanızın Azure AD B2C ile oturum açmasını sağlar. Uygulama kaydı sırasında yeniden yönlendirme URI'sini belirtirsiniz. Yeniden yönlendirme URI'si, kullanıcının Azure AD B2C ile kimlik doğrulamasından sonra yeniden yönlendirildiği uç noktadır. Uygulama kayıt işlemi, uygulamanızı benzersiz olarak tanımlayan istemci kimliği olarak da bilinen bir uygulama kimliği oluşturur. Bu makalede örnek Uygulama Kimliği: 1 kullanılır.

• Web API kaydı, uygulamanızın korumalı bir web API'sini çağırmasını sağlar. Kayıt, web API'sinin izinlerini (kapsamları) kullanıma sunar. Uygulama kayıt işlemi, web API'nizi benzersiz olarak tanımlayan bir uygulama kimliği oluşturur. Bu makalede Örnek Uygulama Kimliği: 2 kullanılır. Uygulamanıza (Uygulama Kimliği: 1) web API'si kapsamları için izin verin (Uygulama Kimliği: 2).

Aşağıdaki diyagramda uygulama kayıtları ve uygulama mimarisi açıklanmaktadır.

Web API'sine çağrı

Kimlik doğrulaması tamamlandıktan sonra, kullanıcılar korumalı bir web API'sini çağıran uygulamayla etkileşim kurar. Web API'sinde taşıyıcı belirteç kimlik doğrulaması kullanılır. Taşıyıcı belirteci, uygulamanın Azure AD B2C'den aldığı erişim belirtecidir. Uygulama, belirteci HTTPS isteğinin yetkilendirme üst bilgisine geçirir.

Authorization: Bearer <access token>

Erişim belirtecinin kapsamı web API'sinin kapsamlarıyla eşleşmiyorsa, kimlik doğrulama kitaplığı doğru kapsamlara sahip yeni bir erişim belirteci alır.

Oturumu kapatma akışı

Oturum kapatma akışı aşağıdaki adımları içerir:

1. Uygulamadan kullanıcılar oturumu kapatmış.
2. Uygulama oturum nesnelerini temizler ve kimlik doğrulama kitaplığı da belirteç önbelleğini temizler.
3. Uygulama, Azure AD B2C oturumunu sonlandırmak için kullanıcıları Azure AD B2C oturumu kapatma uç noktasına götürür.
4. Kullanıcılar uygulamaya geri yönlendirilir.

Önkoşullar

Bu makaledeki yordamları izlemeden önce bilgisayarınızın çalıştığından emin olun:

• Visual Studio Code veya başka bir kod düzenleyicisi.
• Node.js çalışma zamanı ve npm.
• Açısal CLI.

1. Adım: Kullanıcı akışınızı yapılandırma

Kullanıcılar uygulamanızda oturum açmaya çalıştığında, uygulama bir kullanıcı akışı aracılığıyla yetkilendirme uç noktasına bir kimlik doğrulama isteği başlatır. Kullanıcı akışı, kullanıcı deneyimini tanımlar ve denetler. Kullanıcılar kullanıcı akışını tamamladıktan sonra Azure AD B2C bir belirteç oluşturur ve ardından kullanıcıları uygulamanıza geri yönlendirir.

Henüz yapmadıysanız, bir kullanıcı akışı veya özel ilke oluşturun. Üç ayrı kullanıcı akışı oluşturmak için aşağıdaki adımları yineleyin:

• Birleştirilmiş Oturum açma ve kaydolma kullanıcı akışı, örneğin susi. Bu kullanıcı akışı, Parolanızı unuttunuz deneyimini de destekler.
• Bir profil düzenleme kullanıcı akışı, örneğin edit_profile.
• Gibi bir reset_password kullanıcı akışı.

Azure AD B2C, kullanıcı akışı adının önüne B2C_1_ ekler. Örneğin susi, B2C_1_susi olur.

2. Adım: Angular SPA ve API'nizi kaydetme

Bu adımda, Angular SPA ve web API uygulaması için kayıtları oluşturursunuz. Ayrıca web API'nizin kapsamlarını da belirtirsiniz.

2.1 Web API'sini kaydetme uygulaması

Web API'si uygulama kaydını (Uygulama Kimliği: 2) oluşturmak için şu adımları izleyin:

1. Azure portalınaoturum açın.

2. Azure AD B2C kiracınızı içeren dizini kullandığınızdan emin olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.

3. Portal ayarlarında | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir'i seçin.

4. Azure portalında Azure AD B2C'yi arayın ve seçin.

5. Uygulama kayıtlarıöğesini seçin, ve ardından Yeni kayıtöğesini seçin.

6. Ad alanına uygulama için bir ad girin (örneğin, my-api1). Yeniden Yönlendirme URI'sinin ve Desteklenen hesap türlerinin varsayılan değerlerini değiştirmeyin.

7. Kaydıseçin.

8. Uygulama kaydı tamamlandıktan sonra Genel Bakış'ı seçin.

9. Web uygulamasını yapılandırırken daha sonra kullanmak üzere Uygulama (istemci) Kimliği değerini kaydedin.

   

2.2 Kapsamları yapılandırma

1. Oluşturduğunuz my-api1 uygulamasını (Uygulama Kimliği: 2) seçerek Genel Bakış sayfasını açın.

2. Yönetaltında, Bir API'yi Kullanıma Sunmaseçin.

3. Uygulama Kimliği URI'si'nin yanındaki Ayarla bağlantısını seçin. Varsayılan değeri (GUID) benzersiz bir adla (örneğin, tasks-api) değiştirin ve kaydet'i seçin.

   Web uygulamanız web API'si için bir erişim belirteci istediğinde, API için tanımladığınız her kapsamın ön eki olarak bu URI'yi eklemelidir.

4. Bu API tarafından tanımlananKapsamlar altında Kapsam ekleöğesini seçin.

5. API'ye okuma erişimini tanımlayan bir kapsam oluşturmak için:

   1. Kapsam adı olaraktasks.read girin.
   2. Yönetici onayı görünen adı için Görevlere okuma erişimi API'sini girin.
   3. Yönetici onayı açıklaması için Görevler API'sine okuma erişimi sağlar yazın.

6. Kapsam ekle'yi seçin.

7. Kapsam ekle'yi seçin ve ardından API'ye yazma erişimini tanımlayan bir kapsam ekleyin:

   1. Kapsam adı olaraktasks.write yazın.
   2. Yönetici onayı görünen adı içinGörevlere yazma erişimi API'sini girin.
   3. Yönetici onayı açıklaması için Görevler API'sine yazma erişimine izin verir yazın.

8. Kapsam ekle'yi seçin.

2.3 Angular uygulamasını kaydetme

Angular uygulama kaydını oluşturmak için şu adımları izleyin:

1. Azure portalınaoturum açın.
2. Birden çok kiracıya erişiminiz varsa Azure AD B2C kiracınıza geçiş yapmak için Dizinler + abonelikler menüsünde, üstteki menüden Ayarlar simgesini seçin.
3. Azure portalında Azure AD B2C'yi arayın ve seçin.
4. Uygulama kayıtlarıöğesini seçin, ve ardından Yeni kayıtöğesini seçin.
5. Ad alanına uygulama için bir ad girin. Örneğin, Uygulamam yazın.
6. Desteklenen Hesap Türlerialtında, Kullanıcı akışlarıyla kullanıcıları kimlik doğrulama için herhangi bir kimlik sağlayıcısında veya kuruluş dizininde Hesaplar'ı seçin.
7. Yeniden Yönlendirme URI'si'nin altında Tek sayfalı uygulama (SPA) öğesini seçin ve URL kutusuna girinhttp://localhost:4200.
8. "İzinler altında, Openid ve çevrimdışı erişim izinlerine yönetici onayı ver onay kutusunu seçin."
9. Kaydıseçin.
10. Web uygulamasını yapılandırırken daha sonraki bir adımda kullanmak üzere Uygulama (istemci) kimliği değerini kaydedin.

2.5 İzin verme

Uygulamanıza (Uygulama Kimliği: 1) izinleri vermek için şu adımları izleyin:

1. Uygulama kayıtlarını seçin ve ardından da oluşturduğunuz uygulamayı seçin (Uygulama Kimliği: 1).

2. Yönet altında API izinleri'ni seçin.

3. Yapılandırılan izinler'in altında İzin ekle'yi seçin.

4. API'lerim sekmesini seçin.

5. Web uygulamasına erişim verilmesi gereken API'yi (Uygulama Kimliği: 2) seçin. Örneğin , my-api1 girin.

6. İzin'in altında görevleri genişletin ve daha önce tanımladığınız kapsamları seçin (örneğin, tasks.read ve tasks.write).

7. İzinler ekle'yi seçin.

8. <Kiracı adınız için yönetici onayı ver seçeneğini seçin>.

9. Evet'i seçin.

10. Yenile'yi seçin ve her iki kapsam için durum altında ... için verildi ifadesinin göründüğünü doğrulayın.

11. Yapılandırılan izinler listesinden kapsamınızı seçin ve kapsamın tam adını kopyalayın.

    

3. Adım: Angular örnek kodunu alma

Bu örnek, Angular tek sayfalı bir uygulamanın kullanıcı kaydolma ve oturum açma için Azure AD B2C'yi nasıl kullanabileceğini gösterir. Ardından uygulama bir erişim belirteci alır ve korumalı bir web API'sini çağırır.

Örneğin .zip dosyasını indirin veya aşağıdaki komutu kullanarak örneği GitHub deposundan kopyalayın:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Angular örneğini yapılandırma

SPA örneğini edindiğinize göre kodu Azure AD B2C ve web API değerlerinizle güncelleştirin. Örnek klasörde, src/app klasörünün altında auth-config.ts dosyasını açın. Anahtarları ilgili değerlerle güncelleştirin:

Bölüm	Anahtar	Değer
b2cPolitikaları	Ad -larını	1. adımda oluşturduğunuz kullanıcı akışı veya özel ilke.
b2cPolitikaları	Yetkili	your-tenant-name alanını Azure AD B2C kiracı adınız ile değiştirin. Örneğin, kullanın contoso.onmicrosoft.com. Ardından, ilke adını 1. adımda oluşturduğunuz kullanıcı akışı veya özel ilke ile değiştirin. Örneğin: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolitikaları	yetki alanı	Azure AD B2C kiracınızın adı. Örneğin: contoso.onmicrosoft.com.
Konfigürasyon	clientId (İstemci Kimliği)	2.3. adımdaki Angular uygulama kimliği.
korunan kaynaklar	uç nokta	Web API'sinin URL'si: http://localhost:5000/api/todolist.
korunan kaynaklar	Kapsam	2.2. adımda oluşturduğunuz web API kapsamları. Örneğin: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

Elde edilen src/app/auth-config.ts kodunuz aşağıdaki örneğe benzer olmalıdır:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

4. Adım: Web API'sinin örnek kodunu alma

Web API'sinin kayıtlı olduğuna ve kapsamlarını tanımladığınıza göre, web API kodunu Azure AD B2C kiracınızla çalışacak şekilde yapılandırın.

*.zip arşivini indirin veya GitHub'dan örnek web API'sini kopyalayın. Aşağıdaki komutu kullanarak GitHub'da doğrudan Azure-Samples/active-directory-b2c-javascript-nodejs-webapi projesine de göz atabilirsiniz:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 Web API'sini yapılandırma

Örnek klasörde config.json dosyasını açın. Bu dosya, Azure AD B2C kimlik sağlayıcınız hakkında bilgi içerir. Web API uygulaması, web uygulamasının taşıyıcı belirteç olarak geçirdiği erişim belirtecini doğrulamak için bu bilgileri kullanır. Uygulama ayarlarının aşağıdaki özelliklerini güncelleştirin:

Bölüm	Anahtar	Değer
kimlik bilgileri	kiracıAdı	Azure AD B2C kiracı adınızın ilk bölümü. Örneğin: contoso.
kimlik bilgileri	müşteriKimliği	2.1. adımdaki web API'si uygulama kimliği. Önceki diyagramda Uygulama Kimliği: 2 olan uygulamadır.
kimlik bilgileri	yayınlayan	(İsteğe bağlı) Jeton verenin iss talep değeri. Azure AD B2C varsayılan olarak belirteci şu biçimde döndürür: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Azure AD B2C <your-tenant-name> ilk bölümüyle değerini değiştirin. <your-tenant-ID> öğesini Azure AD B2C kiracı kimliğiniz ile değiştirin.
Politikalar	politikaAdı	1. adımda oluşturduğunuz kullanıcı akışı veya özel ilke. Uygulamanız birden çok kullanıcı akışı veya özel ilke kullanıyorsa, yalnızca bir tane belirtin. Örneğin, kaydolma veya oturum açma kullanıcı akışını kullanın.
kaynak	kapsam	2.5. adımdaki web API'si uygulama kaydınızın kapsamları.

Son yapılandırma dosyanız aşağıdaki JSON gibi görünmelidir:

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

5. Adım: Angular SPA ve web API'sini çalıştırma

Artık API'ye Angular kapsamlı erişimini test etmeye hazırsınız. Bu adımda, yerel makinenizde hem web API'sini hem de örnek Angular uygulamasını çalıştırın. Ardından, Angular uygulamasında oturum açın ve korumalı API'ye bir istek başlatmak için TodoList düğmesini seçin.

Web API'sini çalıştırma

1. Bir konsol penceresi açın ve web API'sini içeren dizine geçin. Örneğin:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Aşağıdaki komutları çalıştırın:

   npm install && npm update
   node index.js
   

   Konsol penceresinde uygulamanın barındırıldığı bağlantı noktası numarası görüntülenir:

   Listening on port 5000...
   

Angular uygulamasını çalıştırma

1. Başka bir konsol penceresi açın ve Angular örneğini içeren dizine geçin. Örneğin:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Aşağıdaki komutları çalıştırın:

   npm install && npm update
   npm start
   

   Konsol penceresinde uygulamanın barındırıldığı bağlantı noktası numarası görüntülenir:

   Listening on port 4200...
   

3. http://localhost:4200 Uygulamayı görüntülemek için tarayıcınızda adresine gidin.

4. Oturum Aç'ı seçin.

   

5. Kaydolma veya oturum açma işlemini tamamlayın.

6. Başarılı bir oturum açma işleminin ardından profilinizi görmeniz gerekir. Menüden TodoList'i seçin.

   

7. Listeye yeni öğeler eklemek için Ekle'yi seçin veya öğeleri silmek veya düzenlemek için simgeleri kullanın.

   

Uygulamanızı dağıtın

Bir üretim uygulamasında, uygulama kaydı için yeniden yönlendirme URI'si genellikle uygulamanızın çalıştığı genel olarak erişilebilir bir uç noktadır( gibi https://contoso.com).

Kayıtlı uygulamalarınıza istediğiniz zaman yeniden yönlendirme URI'leri ekleyebilir ve değiştirebilirsiniz. Yeniden yönlendirme URI'leri için aşağıdaki kısıtlamalar geçerlidir:

• Yanıt URL'si düzeni "https" ile başlamalıdır.
• Yanıt URL'si büyük/küçük harfe duyarlıdır. Büyük/küçük harf, çalışan uygulamanızın URL yolunun durumuyla eşleşmelidir.

İlgili içerik

• Kod örneği hakkında daha fazla bilgi edinin
• Kendi Angular uygulamanızda kimlik doğrulamasını etkinleştirme
• Angular uygulamanızda kimlik doğrulama seçeneklerini yapılandırma
• Kendi web API'nizde kimlik doğrulamasını etkinleştirme