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

這很重要

自 2025 年 5 月 1 日起，Azure AD B2C 將不再可供新客戶購買。在我們的常見問題中深入瞭解。

本文說明如何為您的 Angular 單頁應用程式自定義和增強 Azure Active Directory B2C （Azure AD B2C）驗證體驗。

先決條件

熟悉在 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 攔截器。當使用者嘗試在沒有有效存取令牌的情況下存取受保護的資源時，MSAL Guard 和 MSAL 攔截器設定就會生效。在這種情況下，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"}
    }
  },

傳遞身份令牌提示

信賴方應用程式可以在 OAuth2 授權要求中傳送入境 JSON Web 令牌（JWT）。入站令牌是關於用戶或授權請求的指示。 Azure AD B2C 會驗證令牌，然後擷取聲明。

若要在驗證要求中包含識別元令牌提示，請執行下列動作：

在您的自定義原則中，定義 ID 令牌提示的技術設定檔。
建立或使用具有屬性的現有 PopupRequest 或 RedirectRequest MSAL 組態物件 extraQueryParameters 。
新增 id_token_hint 參數，其中使用儲存 ID 令牌的對應變數。

下列代碼段示範如何定義識別碼的提示：

彈出
重新導向

// 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 組態選項。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-06-23