共用方式為

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

這很重要

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

本文說明您可以針對 React 單頁應用程式自定義和增強 Azure Active Directory B2C （Azure AD B2C） 驗證體驗的方式。 開始之前，請先熟悉在 React SPA 中設定驗證 一文，或在 您自己的 React SPA 中啟用驗證。

登入和註銷行為

您可以將單頁應用程式設定為以兩種方式讓具有 MSAL.js 的使用者登入：

  • 彈出視窗：驗證會在彈出視窗中發生，並保留應用程式的狀態。 如果您不想讓使用者在驗證期間離開應用程式頁面，請使用此方法。 Internet Explorer 上的彈出視窗有已知問題。
    • 若要使用彈出視窗登入，請使用 loginPopup 方法。
    • 若要使用彈出視窗註銷，請使用 logoutPopup 方法。
  • 重新導向：用戶會重新導向至 Azure AD B2C 以完成驗證流程。 如果使用者有停用彈出視窗的瀏覽器條件約束或原則，請使用此方法。
    • 若要使用重新導向登入，請使用 loginRedirect 方法。
    • 若要使用重新導向註銷，請使用 logoutRedirect 方法。

下列範例示範如何登入和註銷：

// src/components/NavigationBar.jsx
instance.loginPopup(loginRequest)
            .catch((error) => console.log(error))

instance.logoutPopup({ postLogoutRedirectUri: "/", mainWindowRedirectUri: "/" })

使用自訂網域

藉由使用 自定義網域，您可以完全將驗證 URL 品牌化。 從使用者的角度來看，使用者在驗證過程中會停留在您的網域上，而不會被重新導向至 Azure AD B2C b2clogin.com 網域名稱。

若要完全移除 URL 中對「b2c」的所有提及，您也可以將驗證請求 URL 中的 B2C 租使用者名稱 contoso.onmicrosoft.com 取代為您的租使用者 ID GUID。 例如，您可以變更 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ 變更為 https://account.contosobank.co.uk/<tenant ID GUID>/。

若要在驗證 URL 中使用您的租使用者標識碼自定義網域，請遵循 啟用自定義網域中的指引。 開啟 src/authConfig.js 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 組態物件：

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_reset",
        },
        editProfile: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_edit_profile"
        }
    },
    authorityDomain: "custom.domain.com"
}

預先填入登入名稱

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

若要預填登入名稱，請執行以下步驟：

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

下列代碼段示範如何傳遞登入提示參數。 它們會使用 bob@contoso.com 作為屬性值。

// src/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com";
instance.loginPopup(loginRequest);

預先選取識別提供者

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

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

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

下列代碼段示範如何傳遞網域提示參數。 它們會使用 facebook.com 作為屬性值。

// src/components/NavigationBar.jsx
loginRequest.domainHint = "facebook.com";
instance.loginPopup(loginRequest);

指定UI語言

Azure AD B2C 中的語言自定義可讓您的使用者流程適應各種語言，以符合客戶需求。 如需詳細資訊，請參閱 語言自定義。

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

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

下列代碼段示範如何傳遞網域提示參數。 它們會使用 es-es 作為屬性值。

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.loginPopup(loginRequest);

傳遞自訂查詢字串參數

使用自定義原則，您可以傳遞自定義查詢字串參數。 良好的使用案例範例是當您想要 動態變更頁面內容時。

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

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

下列代碼段示範如何傳遞自定義查詢字串參數。 它們會使用 germany-promotion 作為屬性值。

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.loginPopup(loginRequest);

傳遞 ID 令牌提示

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

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

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

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginPopup(loginRequest);

設定日誌記錄

MSAL 連結庫會產生可協助診斷問題的記錄訊息。 應用程式可以設定記錄。 應用程式也可以讓您自定義控制詳細數據層級，以及是否記錄個人和組織數據。

建議您設置 MSAL 日誌回呼，並提供一種方式讓使用者在遇到驗證問題時提交日誌。 MSAL 提供下列記錄層級詳細資料：

  • 錯誤：發生問題，並產生錯誤。 此層級用於偵錯和識別問題。
  • 警告：不一定發生錯誤或失敗，但資訊適用於診斷和找出問題。
  • 資訊：MSAL 會記錄用於資訊用途的事件，而不一定用於偵錯。
  • 詳細資訊：這是預設級別。 MSAL 會記錄程式庫行為的完整詳細資訊。

根據預設，MSAL 記錄器不會擷取任何個人或組織數據。 如果您決定這麼做，程式庫會讓您選擇是否啟用個人和組織數據的記錄功能。

若要設定 MSAL 記錄，請在 src/authConfig.js中設定下列金鑰：

  • loggerCallback 是記錄器回呼函式。
  • logLevel 可讓您指定記錄層級。 可能的值： Error、 Warning、 Info和 Verbose。
  • piiLoggingEnabled 會啟用個人資料的輸入。 可能的值： true 或 false。

下列代碼段示範如何設定 MSAL 記錄：

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

後續步驟

  • Last updated on