共用方式為


使用 Azure Active Directory B2C 在 Angular 應用程式中設定驗證選項

本文說明如何自訂和增強 Azure Active Directory B2C (Azure AD B2C) 驗證體驗,以Angular單頁應用程式 (SPA) 。

必要條件

熟悉在Angular SPA 中設定驗證一文,或在您自己的ANGULAR SPA 中啟用驗證一文。

登入和登出行為

您可以使用下列兩種方式,將單頁應用程式設定為以 MSAL.js 登入使用者:

  • 快顯視窗:驗證會發生在快顯視窗,並保留應用程式的狀態。 如果您不想讓使用者在驗證期間離開應用程式頁面,請使用此方法。 不過,Internet Explorer 上的快顯視窗有已知問題。
    • 若要使用快顯視窗登入,請在 src/app/app.component.ts 類別中使用 loginPopup 方法。
    • src/app/app.module.ts 類別中,將 interactionType 屬性設定為 InteractionType.Popup
    • 若要使用快顯視窗登出,請在 src/app/app.component.ts 類別中使用 logoutPopup 方法。 您也可以設定 logoutPopup,在登出完成之後於要求過程中傳遞 mainWindowRedirectUri,將主視窗重新導向至不同的頁面,例如首頁或登入頁面。
  • 重新導向:將使用者重新導向至 Azure AD B2C 以完成驗證流程。 如果使用者具有瀏覽器條件約束,或已停用快顯視窗的原則,請使用此方法。
    • 若要使用重新導向登入,請在 src/app/app.component.ts 類別中使用 loginRedirect 方法。
    • src/app/app.module.ts 類別中,將 interactionType 屬性設定為 InteractionType.Redirect
    • 若要使用重新導向登出,請在 src/app/app.component.ts 類別中使用 logoutRedirect 方法。 藉由設定 postLogoutRedirectUri ,設定在登出之後,設定它應該重新導向的 URI。 您應該將此 URI 新增為應用程式註冊中的重新導向 URI。

下列範例示範如何登入和登出:

//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 程式庫有三個登入流程:互動式登入 (使用者在其中選取登入按鈕)、MSAL Guard 和 MSAL Interceptor。 當使用者嘗試存取受保護的資源,但沒有有效的存取權杖時,MSAL Guard 和 MSAL Interceptor 組態就會生效。 在這種情況下,MSAL 程式庫會強制使用者登入。

下列範例示範如何設定 MSAL Guard 和 MSAL Interceptor,以使用快顯視窗或重新導向進行登入:

// 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]
    ])
  })

預先填入登入名稱

在登入使用者旅程圖中,您的應用程式可能會將特定使用者當作目標。 當應用程式將使用者當作目標時,可在授權要求中指定 login_hint 查詢參數與使用者的登入名稱。 Azure AD B2C 會自動填入登入名稱,而使用者只需提供密碼。

若要預先填入登入名稱,請執行下列動作:

  1. 如果您使用自訂原則,請新增必要的輸入宣告,如設定直接登入中所述。
  2. 建立或使用現有 PopupRequestRedirectRequest MSAL 組態物件。
  3. 使用對應的登入提示來設定 loginHint 屬性。

下列程式碼片段示範如何傳遞登入提示參數。 程式碼使用 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"
    }
  },

預先選取識別提供者

如果您已將應用程式的登入旅程圖設定為包含社交帳戶 (例如 Facebook、LinkedIn 或 Google),您可以指定 domain_hint 參數。 此查詢參數會向 Azure AD B2C 提供應該用於登入的社交識別提供者相關提示。 例如,如果應用程式指定 domain_hint=facebook.com,則登入流程會直接移至 Facebook 登入頁面。

若要將使用者重新導向至外部識別提供者,請執行下列動作:

  1. 檢查外部識別提供者的網域名稱。 如需詳細資訊,請參閱將登入重新導向至社交提供者
  2. 建立或使用現有 PopupRequestRedirectRequest MSAL 組態物件。
  3. 使用對應的網域提示來設定 domainHint 屬性。

下列程式碼片段示範如何傳遞網域提示參數。 程式碼使用 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"
    }
  },

指定 UI 語言

Azure AD B2C 中的語言自訂,可讓您的使用者流程容納各種不同語言,以符合客戶的需求。 如需詳細資訊,請參閱語言自訂

若要設定慣用語言,請執行下列動作:

  1. 設定語言自訂
  2. 建立或使用現有 PopupRequestRedirectRequest MSAL 組態物件,具有 extraQueryParameters 屬性。
  3. 將具有對應語言代碼的 ui_locales 參數新增至 extraQueryParameters 屬性。

下列程式碼片段示範如何傳遞網域提示參數。 程式碼使用 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"}
    }
  },

傳遞自訂查詢字串參數

使用自訂原則,您可以傳遞自訂查詢字串參數。 想要以動態方式變更頁面內容,就是個良好的使用案例範例。

若要傳遞自訂查詢字串參數,請執行下列動作:

  1. 設定 ContentDefinitionParameters 元素。
  2. 建立或使用現有 PopupRequestRedirectRequest MSAL 組態物件,具有 extraQueryParameters 屬性。
  3. 新增自訂查詢字串參數,例如 campaignId。 設定參數值。

下列程式碼片段示範如何傳遞自訂查詢字串參數。 程式碼使用 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"}
    }
  },

傳遞識別碼權杖提示

信賴憑證者應用程式可以將輸入 JSON Web 權杖 (JWT) 放入 OAuth2 授權要求中傳送。 輸入權杖是關於使用者或授權要求的提示。 Azure AD B2C 會驗證權杖,然後擷取宣告。

若要在驗證要求中包含識別碼權杖提示,請執行下列動作:

  1. 在您的自訂原則中,定義識別碼權杖提示的技術設定檔
  2. 建立或使用現有 PopupRequestRedirectRequest MSAL 組態物件,具有 extraQueryParameters 屬性。
  3. 使用儲存識別碼權杖的對應變數來新增 id_token_hint 參數。

下列程式碼片段示範如何定義識別碼權杖提示:

// 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}
    }
  },

使用自訂網域

透過使用自訂網域,您可以完全標記驗證 URL。 就使用者而言,使用者在驗證過程中一直停留在您的網域中,並沒有重新導向至 Azure AD B2C b2clogin.com 網域名稱。

若要移除 URL 中對 "b2c" 的所有參考,您也可以將驗證要求 URL 中的 B2C 租用戶名稱 contoso.onmicrosoft.com 換成您自己的租用戶識別碼 GUID。 例如,您可以將 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ 變更為 https://account.contosobank.co.uk/<tenant ID GUID>/

若要在驗證 URL 中針對您的租用戶識別碼使用自訂網域,請遵循啟用自訂網域中的指引。 開啟 src/app/auth-config.ts MSAL 組態物件,並變更 authoritiesknownAuthorities 以使用您的自訂網域名稱和租用戶識別碼。

下列 JavaScript 程式碼顯示變更之前的 MSAL 組態物件:

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

下列 JavaScript 程式碼顯示變更之後的 MSAL 組態物件:

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

設定記錄

MSAL 程式庫會產生可協助診斷問題的記錄訊息。 應用程式可以設定記錄。 應用程式也可以讓您自訂對詳細資料層級的控制,以及是否記錄個人和組織資料。

建議您建立 MSAL 記錄回撥,並為使用者提供在遇到驗證問題時提交記錄的方法。 MSAL 提供下列層級的記錄詳細資料:

  • 錯誤:已發生問題並產生錯誤。 此層級用於偵錯和識別問題。
  • 警告:不一定已經發生錯誤或失敗,但該資訊可用來進行診斷並查明問題。
  • 資訊:MSAL 會記錄用於資訊用途,而不一定用於偵錯的事件。
  • 詳細資訊:這是預設層級。 MSAL 會記錄程式庫行為的完整詳細資料。

根據預設,MSAL 記錄器不會擷取任何個人或組織資料。 程式庫可讓您選擇在需要時啟用記錄個人和組織資料的功能。

若要設定 Angular 記錄,請在 src/app/auth-config.ts 中設定下列金鑰:

  • loggerCallback 是記錄器回呼函數。
  • logLevel 可讓您指定記錄層級。 可能的值:ErrorWarningInfoVerbose
  • piiLoggingEnabled 會啟用個人資料的輸入。 可能的值:truefalse

下列程式碼片段示範如何設定 MSAL 記錄:

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

後續步驟