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

發行項
01/11/2024

此文章說明如何針對單頁應用程式 (SPA) 自訂和增強 Azure Active Directory B2C (Azure AD B2C) 驗證體驗。

使用自訂網域

透過使用自訂網域，您可以完全標記驗證 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 中使用自訂網域和您的租用戶識別碼，請遵循啟用自訂網域中的指引。尋找您的 Microsoft 驗證程式庫 (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"],
      ...
    },
  ...
}

在登入使用者旅程圖中，您的應用程式可能會將特定使用者當作目標。當應用程式將使用者當作目標時，可在授權要求中指定 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);

傳遞識別碼權杖提示

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

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

在您的自訂原則中，定義識別碼權杖提示技術設定檔。

建立用來儲存 extraQueryParameters 的物件，並將此物件傳遞至 MSAL loginPopup() 方法。

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

myMSALObj.loginPopup(loginRequest);

保護您的登出重新導向

登出之後，會將使用者重新導向 post_logout_redirect_uri 參數中所指定的 URI，而不論已針對應用程式指定的回覆 URL 為何。然而，若已傳遞有效的 id_token_hint，並且已開啟 [Require ID Token in logout requests] \(登出要求中需要識別碼權杖\)，則 Azure AD B2C 會先驗證 post_logout_redirect_uri 的值與其中一個應用程式所設定的重新導向 URI 相符，然後再執行重新導向。如果未針對應用程式設定相符的回覆 URL，即會顯示錯誤訊息，而且不會將使用者重新導向。

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

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

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

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

在 signOut 函式中，將 id_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 logout() 方法。您也必須在此案例中，透過將 allowRedirectInIframe 設定為 true，明確地將 MSAL 設定為在 Iframe 內執行。

下列程式碼範例會將 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 設定選項。

共用方式為

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

使用自訂網域

預先選取識別提供者

指定 UI 語言

傳遞自訂查詢字串參數

傳遞識別碼權杖提示

保護您的登出重新導向

啟用單一登出

後續步驟

意見反應

其他資源