使用 Azure AD B2C 在單頁應用程式中設定驗證選項

這很重要

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

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

使用自訂網域

藉由使用自定義網域，您可以完全將驗證 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 中使用自訂網域和租使用者識別碼，請遵循啟用自定義網域中的指引。尋找您的Microsoft驗證連結庫（MSAL）組態物件，並變更 授權單位 和 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"],
      ...
    },
  ...
}

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

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

如果您使用自定義原則，請新增必要的輸入宣告，如設定直接登入中所述。

建立對象來儲存 login_hint，並將這個對象傳遞至 MSAL loginPopup（） 方法。

let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

預先選取識別提供者

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

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

檢查您的外部身份提供者的網域名稱。如需詳細資訊，請參閱將登入重新導向至社交提供者。

建立對象來儲存 extraQueryParameters，並將這個對象傳遞至 MSAL loginPopup（） 方法。

let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

指定UI語言

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

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

設定語言自定義。

建立對象來儲存 extraQueryParameters，並將這個對象傳遞至 MSAL loginPopup（） 方法。

let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

傳遞自訂查詢字串參數

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

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

設定 ContentDefinitionParameters 元素。

建立對象來儲存 extraQueryParameters，並將這個對象傳遞至 MSAL loginPopup（） 方法。

let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

傳遞 ID 令牌提示

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

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

在您的自定義原則中，定義 ID 令牌提示技術設定檔。

建立對象來儲存 extraQueryParameters，並將這個對象傳遞至 MSAL loginPopup（） 方法。

let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

保護您的登出重定向

註銷之後，不論為應用程式指定的回復 URL 為何，用戶都會重新導向至參數中指定的 post_logout_redirect_uri URI。不過，如果傳遞有效 id_token_hint 且開啟註銷要求中的 [需要標識符令牌 ]，Azure AD B2C 會在 post_logout_redirect_uri 執行重新導向之前，先確認的值符合其中一個應用程式設定的重新導向 URI。如果未為應用程式設定相符的回復 URL，則會顯示錯誤訊息，而且不會重新導向使用者。

若要支援安全的註銷重新導向 URI，請遵循下列步驟：

建立可全域存取的 id_token變數來儲存。
```
let id_token = "";
```

在 MSAL handleResponse 函式中，將物件中的 id_token 剖析authenticationResult為 id_token 變數。

function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

在函式中signOutid_token_hint，將參數新增至logoutRequest物件。

function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

在上述範例中，傳入註銷要求的 post_logout_redirect_uri 格式為： https://your-app.com/。此 URL 必須新增至應用程式註冊的回復 URL。

啟用單一註銷

Azure AD B2C 中的單一註銷會使用 OpenId Connect 前端通道註銷，對使用者透過 Azure AD B2C 登入的所有應用程式提出註銷要求。

這些註銷要求是從隱藏 Iframe 中的 Azure AD B2C 註銷頁面提出。 Iframe 會向所有針對 Azure AD B2C 記錄為登入的應用程式註冊的前通道註銷端點提出 HTTP 要求。

每個應用程式的註銷端點都必須呼叫 MSAL 註銷方法 。您也必須將此案例中的 Iframe 設定為，將設定為，以明確設定 allowRedirectInIframetrueMSAL 以在此案例中執行。

下列程式代碼範例會將設定 allowRedirectInIframe 為 true：

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

後續步驟

深入瞭解 MSAL.js 組態選項。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-05-08

共用方式為

使用 Azure AD B2C 在單頁應用程式中設定驗證選項

使用自訂網域

預先填入登入名稱

預先選取識別提供者

指定UI語言

傳遞自訂查詢字串參數

傳遞 ID 令牌提示

保護您的登出重定向

啟用單一註銷

後續步驟

意見反應

其他資源