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

使用 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) 替换为你的租户 ID GUID。例如，可以将 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ 更改为 https://account.contosobank.co.uk/<tenant ID GUID>/。

若要在身份验证 URL 中使用自定义域和租户 ID，请按照启用自定义域中的指南进行操作。找到 Microsoft 身份验证库 (MSAL) 配置对象并更改 authorities 和 knownAuthorities 来使用自定义域名和租户 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 令牌提示

信赖方应用可随附 OAuth2 授权请求发送入站 JSON Web 令牌 (JWT)。入站令牌是有关用户或授权请求的提示。 Azure AD B2C 会验证令牌，然后提取声明。

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

在自定义策略中，定义 ID 令牌提示技术配置文件。

创建一个对象来存储 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 并启用了id_token_hint，则在执行重定向之前，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 语言

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

传递 ID 令牌提示

保护注销重定向

启用单一注销

后续步骤

反馈

其他资源