Aracılığıyla paylaş

Azure Active Directory B2C kullanarak bir Angular uygulamasında kimlik doğrulama seçeneklerini yapılandırma

  • Makale

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ı kullanıcılarla MSAL.js 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 taşınmasını istemiyorsanız bu yaklaşımı kullanın. Ancak, Internet Explorer'da açılır pencerelerle ilgili bilinen sorunlar vardır.
    • Açılır pencerelerle src/app/app.component.ts oturum açmak için sınıfında yöntemini kullanın loginPopup .
    • src/app/app.module.ts sınıfında özniteliğini interactionType olarak InteractionType.Popupayarlayın.
    • Açılır pencerelerle src/app/app.component.ts oturumu kapatmak için sınıfında yöntemini kullanın logoutPopup . Ayrıca, oturumu kapatma işlemi tamamlandıktan sonra isteğin bir parçası olarak geçirerek mainWindowRedirectUri ana pencereyi giriş sayfası veya oturum açma sayfası gibi farklı bir sayfaya yönlendirecek şekilde de yapılandırabilirsinizlogoutPopup.
  • 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.
    • Yeniden yönlendirme src/app/app.component.ts ile oturum açmak için sınıfında yöntemini kullanın loginRedirect .
    • src/app/app.module.ts sınıfında özniteliğini interactionType olarak InteractionType.Redirectayarlayın.
    • Yeniden yönlendirme src/app/app.component.ts ile oturumu kapatmak için sınıfında yöntemini kullanın logoutRedirect . oturumu kapatıldıktan sonra yeniden yönlendirmesi gereken URI'yi ayarlayarak yapılandırın postLogoutRedirectUri. 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ığı üç oturum açma akışına sahiptir: etkileşimli oturum açma (kullanıcının oturum açma düğmesini seçtiği yer), MSAL Guard ve MSAL Kesme Noktası. MSAL Guard ve MSAL Kesme Noktası yapılandırmaları, kullanıcı geçerli bir erişim belirteci olmadan korumalı bir kaynağa erişmeye çalıştığında geçerlilik kazanır. Bu gibi durumlarda, MSAL kitaplığı kullanıcıyı oturum açmaya zorlar.

Aşağıdaki örneklerde, MSAL Guard ve MSAL Interceptor'ın açılır pencere veya yeniden yönlendirme ile oturum açmak için 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 doldurması 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 parametresini geçirmeyi 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, oturum açmak için kullanılması gereken sosyal kimlik sağlayıcısı hakkında B2C'yi Azure AD için 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ı 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 etki alanı adını denetleyin. Daha fazla bilgi için bkz. Oturum açmayı sosyal hizmet sağlayıcısına yeniden yönlendirme.
  2. Mevcut PopupRequest veya MSAL yapılandırma nesnesini oluşturun veya RedirectRequest kullanın.
  3. özniteliğini domainHint ilgili etki alanı ipucuyla ayarlayın.

Aşağıdaki kod parçacıkları, etki alanı ipucu parametresini geçirmeyi 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. Öznitelikleri olan extraQueryParameters mevcut PopupRequest veya MSAL yapılandırma nesnesini oluşturun veya RedirectRequest kullanın.
  3. ui_locales özniteliklerine karşılık gelen dil koduyla parametresini extraQueryParameters ekleyin.

Aşağıdaki kod parçacıkları, etki alanı ipucu parametresini geçirmeyi 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 istemenizdir.

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

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

Aşağıdaki kod parçacıklarında özel sorgu dizesi parametresinin nasıl geçir yapılacağı gösterilmektedir. Ö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 geçirme

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. Öznitelikleri olan extraQueryParameters mevcut PopupRequest veya MSAL yapılandırma nesnesini oluşturun veya RedirectRequest kullanın.
  3. Parametreyi id_token_hint , kimlik belirtecini depolayan karşılık gelen değişkene 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 etki alanı kullanma

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

URL'deki "b2c" öğesine yapılan tüm başvuruları 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 değiştirebilirsiniz https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/https://account.contosobank.co.uk/<tenant ID GUID>/.

Kimlik doğrulama URL'sindeki 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 özel etki alanı adınızı ve kiracı kimliğinizi kullanmak için ve knownAuthorities değerini değiştirinauthorities.

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"],
      ...
    },
  ...
}

Günlüğü 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 verilerin ve kuruluş verilerinin günlüğe kaydedilip kaydedilmediği konusunda size özel denetim sağlayabilir.

Bir MSAL günlüğü 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ı belirlemek için kullanılır.
  • Uyarı: Bir hata veya hata olması şart değildir, ancak bilgiler tanılama ve sorunları belirlemeye yöneliktir.
  • Bilgi: MSAL, hata ayıklama için değil bilgilendirme amaçlı 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, siz karar verirseniz kişisel ve kurumsal verilerin günlüğe kaydedilmesini etkinleştirme seçeneği sunar.

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

  • loggerCallback günlükçü geri çağırma işlevidir.
  • logLevel günlük düzeyini belirtmenize olanak tanır. 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