你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用 Azure AD B2C 在单页应用程序中配置身份验证选项

2025-05-08

重要

自 2025 年 5 月 1 日起，Azure AD B2C 将不再可供新客户购买。在我们的常见问题解答中了解详细信息。

本文介绍如何为单页应用程序（SPA）自定义和增强 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 中使用自定义域和租户 ID，请按照 “启用自定义域”中的指南进行作。找到Microsoft身份验证库（MSAL）配置对象，并更改 颁发机构 和 已知身份验证 ，以使用自定义域名和租户 ID。

以下 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 令牌提示

信赖方应用程序可以将入站 JSON Web 令牌（JWT）作为 OAuth2 授权请求的一部分发送。入站令牌是有关用户或授权请求的提示。 Azure AD B2C 验证令牌，然后提取声明。

若要在身份验证请求中包含 ID 令牌提示，请执行以下作：

在自定义策略中，定义 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 并且启用了注销请求中的“要求 ID 令牌 ”，Azure AD B2C 将验证是否与应用程序配置的重定向 URI 之一匹配的值 post_logout_redirect_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();
    }
}

在函数中 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 注销方法 。还必须将 MSAL 显式配置为在此方案中的 Iframe 中运行，方法是设置为 allowRedirectInIframetrue。

以下代码示例设置为allowRedirectInIframetrue：

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 语言

传递自定义查询字符串参数

传递 ID 令牌提示

保护注销重定向

启用单一注销

后续步骤

反馈

其他资源