通过适用于 JavaScript 的 Microsoft 身份验证库来使用 Azure AD B2C

借助适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js)，JavaScript 应用程序开发人员可以使用 Azure Active Directory B2C (Azure AD B2C) 通过社交和本地标识对用户进行身份验证。

通过将 Azure AD B2C 用作标识管理服务，可以自定义和控制客户在使用应用程序时如何注册、登录和管理其配置文件。

Azure AD B2C 还允许你在身份验证过程中对应用程序显示的 UI 进行品牌打造和自定义。

支持的应用类型和方案

MSAL.js 使 单页应用程序 能够通过使用 授权代码流和 PKCE 授权，与 Azure AD B2C 登录用户。 使用 MSAL.js 和 Azure AD B2C：

• 用户 可以使用 其社交和本地标识进行身份验证。
• 用户可以获授权访问 Azure AD B2C 保护的资源（但不包括 Microsoft Entra 保护的资源）。
• 用户无法使用委托权限获取 Microsoft API（如 MS 图形 API）的令牌。
• 具有管理员权限的用户可以使用委托权限获取 Microsoft API（如 MS 图形 API）的令牌。

有关详细信息，请参阅使用 Azure AD B2C

后续步骤

按照教程学习如何：

• 在单页应用程序中使用 Azure AD B2C 登录用户
• 调用受 Azure AD B2C 保护的 Web API

⚠️ 在开始之前，请确保 了解如何初始化应用对象 以及 处理资源和范围。 我们还建议对 Azure AD B2C 有基本了解。 有关详细信息，请参阅 B2C 文档 。

MSAL.js 支持使用 Azure AD B2C（简称 B2C）通过社交（Microsoft、Google、Facebook 等）、企业（ADFS、Salesforce 等）和本地（存储在 Azure AD B2C 目录中）标识进行身份验证。 使用 MSAL.js开发 B2C 应用时，需要记住一些重要细节。

快速事实

使用 B2C：

• 用户 可以使用 其社交标识进行身份验证。
• 可以授权用户访问受 B2C 保护的资源（但不能访问受 Microsoft Entra 保护的资源）。
• 用户无法使用委派权限获取Microsoft API（例如 MS 图形 API）的令牌。
• 应用程序可以使用应用程序权限（用户管理方案）获取Microsoft API 的令牌。

B2C 应用配置

下面是 B2C 应用配置示例：

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Microsoft Entra 与 B2C 终结点

Microsoft Entra ID与 Azure AD B2C 租户之间的主要区别在于其终结点。

Microsoft Entra ID 租户：

• 仅包含 Microsoft Entra 端点 (login.microsoftonline.com/*)。
• 公开 单个 令牌终结点（login.microsoftonline.com/.../token）。
• Microsoft Entra 终结点可用于获取以下令牌：
  • 您的应用程序受 Microsoft Entra ID 保护。
  • Microsoft API，例如 MS 图形 API。

B2C 租户：

• 包含 Microsoft Entra ID 和 Azure AD B2C 端点 (login.microsoftonline.com/* 和 <your-domain>.b2clogin.com/*)。
• 为每个 （， login.microsoftonline.com/.../token） 公开<your-domain>.b2clogin.com/.../token令牌终结点。
• B2C 终结点允许你获取用于以下用途的令牌：
  • 受 B2C 保护的应用程序。

B2C 和委派权限

委派权限通过已登录的用户的交互式授权来指定基于范围的访问。 这些权限会在运行时作为客户端访问令牌中的scp声明提供给资源（例如你的 Web API、MS 图形 API 等）。

用户的 B2C 身份验证不能用于授权Microsoft Entra受保护的应用或Microsoft API（也受Microsoft Entra ID保护）。 因此，使用 MSAL.js时，无法使用<your-tenant>.b2clogin.com/.../token终结点获取 MS 图形 API的令牌。

OpenID Connect 权限

上述规则的例外来自一组称为 OpenID Connect （OIDC） 权限的特殊范围，其中包括 openid 和 profile。 另一个特殊权限是 offline_access，它允许应用代表用户访问资源一段时间（使用 刷新令牌）。 MSAL.js 默认会在 loginPopup() 和 loginRedirect() 请求期间提供 openid、profile 和 offline_access。

针对 B2C 租户的 Microsoft Entra 身份验证

当您在针对 B2C 租户时使用 login.microsoftonline.com 终结点，且未提供任何 policyID 参数时，您将访问到 B2C 租户的 Microsoft Entra 终结点。 只有在这种情况下，你才可以使用已登录用户的上下文获取用于访问 MS 图形 API 资源的令牌。

B2C 和应用程序权限

应用程序权限通过客户端应用程序的凭据/身份规定基于角色的访问权限。 这些权限会在运行时以客户端的 访问令牌中的 roles 声明形式呈现给资源。

用户管理方案

login.microsoftonline.com即使这些端点是 B2C 特有的，仍可用于在后台执行任何与管理用户和属性相关的非交互式工作。 为将使用客户端凭据授予的应用创建应用程序注册以使用 MS 图形 API管理 B2C 资源时，需要选择管理应用需要获取权限的图形 API范围（请参阅文档了解详细信息）。 需要记住的事项：

• 若要获取 应用程序权限，需要执行应用程序身份验证（使用 客户端凭据授予）。
• 若要获取 委派的权限，需要使用管理员帐户执行用户身份验证。
• 管理应用通常注册为受众 类型 1 或 类型 2 （请参阅 下文）。

其他主题

B2C 和帐户/受众类型

在应用程序注册期间，系统会提示你选择 受众。 你选择的受众类型指示你要针对的身份验证类型。

获取你自己的 API 的访问令牌

有 2 种方法可以获取自己的 API 的访问令牌：

1. 请求将 clientId 作为作用域：

msal.loginRedirect({
    scopes: ["client_Id"]
});

在此处阅读详细信息

2. 在应用注册上公开自己的自定义范围并请求此范围：

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

B2C 和注销体验

注销会清除用户的 Azure AD B2C的单一登录状态，但它可能不会让用户退出其社交标识提供者会话。 如果用户在后续登录期间选择相同的标识提供者，则他们可能会在不输入凭据的情况下重新进行身份验证。 假设是，如果用户想要注销应用程序，这并不一定意味着他们希望注销其社交帐户（例如 Facebook）本身。

B2C 和邀请流

MSAL.js 只会处理它自己原先请求的令牌。 如果你的流要求你向用户发送一个可用于注册的链接，则需要确保链接指向你的应用，而不是直接指向 B2C 服务。 邀请流示例如下所示：

1. 用户点击您的应用链接
2. 应用调用msal.loginRedirect，并在extraQueryParameters中包含id_token_hint

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

3. 应用将重定向到用户在其中输入凭据/注册的 B2C 服务
4. B2C 服务会重定向回你的应用，而你的应用会调用 await msal.handleRedirectPromise() 来处理响应并保存令牌

B2C 和 iframe 的使用

Azure AD B2C 提供嵌入式登录体验，允许在 iframe 中呈现自定义登录 UI。 由于 MSAL 默认阻止 iframe 中的重定向，因此需要将 allowRedirectInIframe 配置选项设置为 true 才能使用此功能。 有关使用 iframe 的其他注意事项，请参阅： 在 iframed 应用中使用 MSAL