Azure Active Directory B2C kullanarak Angular uygulamasında kimlik doğrulama seçeneklerini 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 tek sayfalı uygulamanız (SPA) için Azure Active Directory B2C (Azure AD B2C) kimlik doğrulama deneyimini nasıl özelleştirebileceğiniz ve geliştirebileceğiniz açıklanır.

Önkoşullar

Angular SPA'da kimlik doğrulamasını yapılandırma veya Kendi Angular SPA'nızda kimlik doğrulamasını etkinleştirme makalesini inceleyin.

Oturum açma ve oturum kapatma davranışı

Tek sayfalı uygulamanızı MSAL.js kullanıcılarla oturum açmak için iki şekilde yapılandırabilirsiniz:

  • Açılır pencere: Kimlik doğrulaması bir açılır pencerede gerçekleşir ve uygulamanın durumu korunur. Kimlik doğrulaması sırasında kullanıcıların uygulama sayfanızdan uzaklaşmasını istemiyorsanız bu yaklaşımı kullanın. Ancak, Internet Explorer'da açılır pencerelerle ilgili bilinen sorunlar vardır.
    • Açılır pencerelerde oturum açmak için src/app/app.component.ts sınıfındaki loginPopup yöntemini kullanın.
    • src/app/app.module.ts sınıfında özniteliğini interactionType olarak InteractionType.Popupayarlayın.
    • Açılır pencerelerle oturum kapatmak için src/app/app.component.ts sınıfında logoutPopup yöntemini kullanın. Oturumu kapatma işlemi tamamlandıktan sonra, isteğin bir parçası olarak logoutPopup geçirerek ana pencereyi anasayfa veya oturum açma sayfası gibi farklı bir sayfaya yönlendirecek şekilde mainWindowRedirectUri yapılandırabilirsiniz.
  • Yeniden yönlendirme: Kullanıcı, kimlik doğrulama akışını tamamlamak için Azure AD B2C'ye yönlendirilir. Kullanıcıların açılır pencerelerin devre dışı bırakıldığı tarayıcı kısıtlamaları veya ilkeleri varsa bu yaklaşımı kullanın.
    • Oturum açmak için src/app/app.component.ts sınıfında, yeniden yönlendirme ile loginRedirect yöntemini kullanın.
    • src/app/app.module.ts sınıfında özniteliğini interactionType olarak InteractionType.Redirectayarlayın.
    • Yeniden yönlendirme yapmak için src/app/app.component.ts sınıfındaki logoutRedirect yöntemini kullanarak oturumu kapatın. Oturum kapatıldıktan sonra yeniden yönlendirilmesi gereken URI'yi yapılandırmak için postLogoutRedirectUri ayarını kullanın. Bu URI'yi uygulama kaydınıza yeniden yönlendirme URI'si olarak eklemelisiniz.

Aşağıdaki örnekte oturum açma ve oturumu kapatma işlemleri gösterilmektedir:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

MSAL Angular kitaplığının üç oturum açma akışı vardır: etkileşimli oturum açma (kullanıcının oturum açma düğmesini seçtiği yer), MSAL Guard ve MSAL Kesme Noktası. Kullanıcı geçerli bir erişim belirteci olmadan korumalı bir kaynağa erişmeye çalıştığında MSAL Guard ve MSAL Kesme Noktası yapılandırmaları etkinleşir. Bu gibi durumlarda, MSAL kitaplığı kullanıcıyı oturum açmaya zorlar.

Aşağıdaki örneklerde, açılır pencere veya yeniden yönlendirme ile oturum açmak için MSAL Guard ve MSAL Yakalayıcı'nın nasıl yapılandırılması gösterilmektedir.

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

Oturum açma adını önceden doldurma

Oturum açma kullanıcı yolculuğu sırasında uygulamanız belirli bir kullanıcıyı hedef alabilir. Bir uygulama bir kullanıcıyı hedeflediğinde, yetkilendirme isteğinde login_hint kullanıcının oturum açma adıyla sorgu parametresini belirtebilir. Azure AD B2C, oturum açma adını otomatik olarak doldurur ve kullanıcının yalnızca parolayı sağlaması gerekir.

Oturum açma adını önceden doldurmak için aşağıdakileri yapın:

  1. Özel bir ilke kullanıyorsanız, doğrudan oturum açmayı ayarlama bölümünde açıklandığı gibi gerekli giriş beyanını ekleyin.
  2. Mevcut PopupRequest veya MSAL yapılandırma nesnesini oluşturun veya RedirectRequest kullanın.
  3. özniteliğini loginHint ilgili oturum açma ipucuyla ayarlayın.

Aşağıdaki kod parçacıkları, oturum açma ipucu parametresinin nasıl aktarılacağını gösterir. Öznitelik değeri olarak kullanırlar bob@contoso.com .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

Kimlik sağlayıcısını önceden seçme

Uygulamanızın oturum açma yolculuğunu Facebook, LinkedIn veya Google gibi sosyal hesapları içerecek şekilde yapılandırdıysanız parametresini domain_hint belirtebilirsiniz. Bu sorgu parametresi, Azure AD B2C'ye oturum açmak için kullanılması gereken sosyal kimlik sağlayıcısı hakkında bir ipucu sağlar. Örneğin, uygulama belirtirse domain_hint=facebook.comoturum açma akışı doğrudan Facebook oturum açma sayfasına gider.

Kullanıcıları bir dış kimlik sağlayıcısına yönlendirmek için aşağıdakileri yapın:

  1. Dış kimlik sağlayıcınızın alan adını denetleyin. Daha fazla bilgi için bkz. Oturum açmayı sosyal bir sağlayıcıyayönlendirme.
  2. Mevcut PopupRequest veya MSAL yapılandırma nesnesini oluşturun veya RedirectRequest kullanın.
  3. domainHint özniteliğini ilgili etki alanı ipucuyla ayarlayın.

Aşağıdaki kod parçacıkları, domain ipucu parametresini iletmeyi gösterir. Öznitelik değeri olarak kullanırlar facebook.com .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

Kullanıcı arabirimi dilini belirtme

Azure AD B2C'de dil özelleştirmesi, kullanıcı akışınızın müşterilerinizin ihtiyaçlarına uygun çeşitli dilleri barındırmasını sağlar. Daha fazla bilgi için bkz . Dil özelleştirme.

Tercih edilen dili ayarlamak için aşağıdakileri yapın:

  1. Dil özelleştirmesini yapılandırın.
  2. Mevcut bir PopupRequest veya RedirectRequest MSAL yapılandırma nesnesini extraQueryParameters öznitelikleriyle oluşturun veya kullanın.
  3. ui_locales parametresini, karşılık gelen dil koduyla birlikte, extraQueryParameters özniteliklerine ekleyin.

Aşağıdaki kod parçacıkları, domain ipucu parametresini iletmeyi gösterir. Öznitelik değeri olarak kullanırlar es-es .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Özel sorgu dizesi parametresi geçirme

Özel ilkelerle, özel bir sorgu dizesi parametresi geçirebilirsiniz. İyi bir kullanım örneği, sayfa içeriğini dinamik olarak değiştirmek istediğiniz durumlardır.

Özel sorgu dizesi parametresi geçirmek için aşağıdakileri yapın:

  1. ContentDefinitionParameters öğesini yapılandırın.
  2. Mevcut bir PopupRequest veya RedirectRequest MSAL yapılandırma nesnesini extraQueryParameters öznitelikleriyle oluşturun veya kullanın.
  3. gibi campaignIdözel sorgu dizesi parametresini ekleyin. Parametre değerini ayarlayın.

Aşağıdaki kod parçacıkları, özel bir sorgu dizesi parametresinin nasıl geçirileceğini gösterir. Öznitelik değeri olarak kullanırlar germany-promotion .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Kimlik belirteci ipucu sağla

Bağlı olan taraf uygulaması, OAuth2 yetkilendirme isteğinin bir parçası olarak bir gelen JSON Web Belirteci (JWT) gönderebilir. Gelen belirteç, kullanıcı veya yetkilendirme isteği hakkında bir ipucudur. Azure AD B2C belirteci doğrular ve ardından talebi ayıklar.

Kimlik doğrulama isteğine kimlik belirteci ipucu eklemek için aşağıdakileri yapın:

  1. Özel ilkenizde, kimlik belirteci ipucunun teknik profilini tanımlayın.
  2. Mevcut bir PopupRequest veya RedirectRequest MSAL yapılandırma nesnesini extraQueryParameters öznitelikleriyle oluşturun veya kullanın.
  3. id_token_hint parametresini, kimlik belirtecini depolayan karşılık gelen değişkenle ekleyin.

Aşağıdaki kod parçacıklarında kimlik belirteci ipucunun nasıl tanımlanacağı gösterilmektedir:

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

Özel bir etki alanı kullanın

Özel bir etki alanı kullanarak kimlik doğrulama URL'sini tamamen markalayabilirsiniz. Kullanıcı perspektifinden bakıldığında, kullanıcılar kimlik doğrulama işlemi sırasında Azure AD B2C b2clogin.com alan adına yönlendirilmeden kendi alan adınızda kalır.

URL'deki tüm "b2c" başvurularını kaldırmak için, kimlik doğrulama isteği URL'sindeki B2C kiracı adınızı contoso.onmicrosoft.com kiracı kimliği GUID'nizle de değiştirebilirsiniz. Örneğin, olarak https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/değiştirebilirsinizhttps://account.contosobank.co.uk/<tenant ID GUID>/.

Kimlik doğrulama URL'sinde kiracı kimliğiniz için özel etki alanınızı kullanmak için Özel etki alanlarını etkinleştirme başlığındaki yönergeleri izleyin. src/app/auth-config.ts MSAL yapılandırma nesnesini açın ve authorities ile knownAuthorities'yi özel etki alanı adınızı ve kiracı kimliğinizi kullanacak şekilde değiştirin.

Aşağıdaki JavaScript, değişiklik öncesinde MSAL yapılandırma nesnesini gösterir:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Aşağıdaki JavaScript, değişiklik sonrasında MSAL yapılandırma nesnesini gösterir:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Log kaydını yapılandırma

MSAL kitaplığı, sorunları tanılamaya yardımcı olabilecek günlük iletileri oluşturur. Uygulama günlüğü yapılandırabilir. Uygulama ayrıca ayrıntı düzeyi ve kişisel ve kuruluş verilerinin günlüğe kaydedilip kaydedilmediği üzerinde özel denetim sağlayabilir.

Bir MSAL günlüğe kaydetme geri çağırması oluşturmanızı ve kullanıcıların kimlik doğrulaması sorunları olduğunda günlük göndermeleri için bir yol sağlamanızı öneririz. MSAL şu günlük ayrıntıları düzeylerini sağlar:

  • Hata: Bir sorun oluştu ve bir hata oluşturuldu. Bu düzey, hataları ayıklamak ve sorunları tanımlamak için kullanılır.
  • Uyarı: Hata veya hata olması şart değildir, ancak bilgiler tanılama ve sorunları belirleme amacıyla tasarlanmıştır.
  • Bilgi: MSAL, bilgi amaçlı olan ve hata ayıklama için olması gerekmeyen olayları günlüğe kaydeder.
  • Ayrıntılı: Bu varsayılan düzeydir. MSAL, kitaplık davranışının tüm ayrıntılarını günlüğe kaydeder.

Varsayılan olarak, MSAL günlükçü herhangi bir kişisel veya kurumsal veri yakalamaz. Kitaplık, karar verirseniz kişisel ve kurumsal verilerin günlüğe kaydedilmesini etkinleştirme seçeneği sunar.

Angular log yapılandırmak için src/app/auth-config.ts içinde aşağıdaki anahtarları yapılandırın.

  • loggerCallback kayıt geri çağırma fonksiyonudur.
  • logLevel günlük seviyesini belirlemenizi sağlar. Olası değerler: Error, Warning, Infove Verbose.
  • piiLoggingEnabled kişisel verilerin girişini etkinleştirir. Olası değerler: true veya false.

Aşağıdaki kod parçacığında MSAL günlüğünün nasıl yapılandırılır gösterilmektedir:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Sonraki Adımlar

  • Last updated on