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

發行項
01/11/2024

本文說明如何自訂和增強 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: '/',
  });
}

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

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

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

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

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

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

如果您使用自訂原則，請新增必要的輸入宣告，如設定直接登入中所述。
建立或使用現有 PopupRequest 或 RedirectRequest MSAL 組態物件。
使用對應的登入提示來設定 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"
    }
  },

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

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

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

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

預先選取識別提供者

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

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

檢查外部識別提供者的網域名稱。如需詳細資訊，請參閱將登入重新導向至社交提供者。
建立或使用現有 PopupRequest 或 RedirectRequest MSAL 組態物件。
使用對應的網域提示來設定 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"
    }
  },

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

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

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

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

指定 UI 語言

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

若要設定慣用語言，請執行下列動作：

設定語言自訂。
建立或使用現有 PopupRequest 或 RedirectRequest MSAL 組態物件，具有 extraQueryParameters 屬性。
將具有對應語言代碼的 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"}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

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

傳遞自訂查詢字串參數

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

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

設定 ContentDefinitionParameters 元素。
建立或使用現有 PopupRequest 或 RedirectRequest MSAL 組態物件，具有 extraQueryParameters 屬性。
新增自訂查詢字串參數，例如 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"}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

傳遞識別碼權杖提示

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

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

在您的自訂原則中，定義識別碼權杖提示的技術設定檔。
建立或使用現有 PopupRequest 或 RedirectRequest MSAL 組態物件，具有 extraQueryParameters 屬性。
使用儲存識別碼權杖的對應變數來新增 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}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    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 組態物件，並變更 authorities 和 knownAuthorities 以使用您的自訂網域名稱和租用戶識別碼。

下列 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 可讓您指定記錄層級。可能的值：Error、Warning、Info 和 Verbose。
piiLoggingEnabled 會啟用個人資料的輸入。可能的值：true 或 false。

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

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

後續步驟

深入了解：MSAL.js 組態選項。

共用方式為

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

必要條件

預先選取識別提供者

指定 UI 語言

傳遞自訂查詢字串參數

傳遞識別碼權杖提示

使用自訂網域

設定記錄

後續步驟

其他資源

共用方式為

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

必要條件

登入和登出行為

預先填入登入名稱

預先選取識別提供者

指定 UI 語言

傳遞自訂查詢字串參數

傳遞識別碼權杖提示

使用自訂網域

設定記錄

後續步驟

其他資源