通过

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

在 Azure Active Directory B2C 中注册单页应用程序

重要

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

在应用程序可与 Azure Active Directory B2C（Azure AD B2C）交互之前，必须在你管理的租户中注册它们。 本指南介绍如何使用 Azure 门户注册单页应用程序（“SPA”。

身份验证选项概述

许多新式 Web 应用程序都是作为客户端单页应用程序（“SPA”）构建的。 开发人员使用 JavaScript 或 SPA 框架（如 Angular、Vue 和 React）编写它们。 这些应用程序在 Web 浏览器上运行，与传统的服务器端 Web 应用程序相比，它们具有不同的身份验证特征。

Azure AD B2C 提供了 两 个选项，使单页应用程序能够登录用户并获取用于访问后端服务或 Web API 的令牌：

授权代码流（使用 PKCE）

OAuth 2.0 授权代码流（使用 PKCE） 允许应用程序交换 ID 令牌的授权代码，以表示调用受保护 API 所需的经过身份验证的用户和 访问 令牌。 此外，它还返回 刷新 令牌，这些令牌代表用户提供对资源的长期访问，而无需与这些用户交互。

这是 建议 的方法。 使用有限生命周期的刷新令牌帮助您的应用程序适应现代浏览器 Cookie 隐私限制，例如 Safari ITP。

若要利用此流，应用程序可以使用支持它的身份验证库，例如 MSAL.js。

单页应用程序 - 授权

隐式授予流

某些库（如 MSAL.js 1.x）仅支持隐式授予流或应用程序实现以使用隐式流。 在这些情况下，Azure AD B2C 支持 OAuth 2.0 隐式流。 隐式授权流允许应用程序从授权终结点获取 ID 和 访问 令牌。 与授权代码流不同，隐式授权流不会返回 刷新令牌。

单页应用程序 - 隐式

此身份验证流不包括使用跨平台 JavaScript 框架的应用程序方案，例如 Electron 和 React-Native。 这些方案需要更多功能才能与本机平台进行交互。

先决条件

  • 如果没有 Azure 订阅，请在开始之前创建一个免费帐户。

  • 如果没有 Azure AD B2C 租户，请立即创建一个。 你可以使用现有的 Azure AD B2C 租户。

注册 SPA 应用程序

  1. 登录到 Azure 门户。

  2. 如果有权访问多个租户，请选择顶部菜单中的“设置”图标，从“目录 + 订阅”菜单切换到你的 Azure AD B2C 租户。

  3. 在 Azure 门户中，搜索并选择 Azure AD B2C。

  4. 选择“应用注册”，然后选择“新建注册”。

  5. 输入应用程序的“名称”。 例如， spaapp1。

  6. 在 “支持的帐户类型”下，选择 任何标识提供者或组织目录中的帐户（用于使用用户流对用户进行身份验证）

  7. 在 “重定向 URI”下，选择 “单页应用程序”（SPA），然后在 URL 文本框中输入 https://jwt.ms 。

    重定向 URI 是授权服务器（在本例中为 Azure AD B2C）完成与用户的交互后发送用户的终结点。 此外，重定向 URI 终结点在成功授权后接收访问令牌或授权代码。 在生产应用程序中，它通常是运行应用的公共可访问终结点，如 https://contoso.com/auth-response。 对于本指南等测试目的，你可以将其设置为 https://jwt.ms一个Microsoft拥有的 Web 应用程序，它显示令牌的解码内容（令牌的内容永远不会离开浏览器）。 在应用开发过程中，可以添加应用程序在本地侦听的终结点，如 http://localhost:5000。 可以随时在注册的应用程序中添加和修改重定向 URI。

    重定向 URI 存在以下限制：

    • 回复 URL 必须以方案 https开头，除非使用 localhost。
    • 回复 URL 区分大小写。 其大小写必须与正在运行的应用程序的 URL 路径的大小写匹配。 例如，如果应用程序包含在其路径 .../abc/response-oidc中，请不要在回复 URL 中指定 .../ABC/response-oidc 。 由于 Web 浏览器将路径视为区分大小写，因此在重定向到大小写不匹配的 .../abc/response-oidc URL 时，可能会排除与 .../ABC/response-oidc 关联的 cookie。

  8. 在“权限”下，选择“向 OpenID 和 offline_access 权限授予管理员同意”复选框。

  9. 选择“注册”。

启用隐式授权流

可以启用隐式授权流有两个原因，当使用 MSAL.js 版本 1.3 或更早版本时，或者当使用应用注册来测试用户流以进行测试时。

使用以下步骤为应用启用隐式授权流：

  1. 选择创建的应用注册。

  2. 在“管理”下，选择“身份验证”。

  3. 在“隐式授权和混合流”下，同时选中“访问令牌（用于隐式流）”和“ID 令牌（用于隐式流和混合流）”复选框。

  4. 选择“保存”。

注释

如果你的应用使用 MSAL.js 2.0 或更高版本，请不要启用隐式授权流，因为 MSAL.js 2.0 + 支持 OAuth 2.0 授权代码流（使用 PKCE）。 如果启用隐式授权来测试用户流，请确保在将应用部署到生产环境之前禁用隐式授权流设置。

从隐式授权流迁移

如果你有使用隐式流的现有应用程序，建议使用支持它的框架（如 MSAL.js 2.0+）将授权代码流与 PKCE 配合使用。

当应用注册表示的所有生产 SPA 都开始使用授权代码流时，请按如下所示禁用隐式授权流设置：

  1. 在左侧菜单中的“管理”下，选择“身份验证” 。
  2. 在“隐式授权”下，取消选中“访问令牌”和“ID 令牌”复选框。
  3. 选择“保存”。

如果保留启用隐式流（已选中），则使用隐式流的应用程序可以继续正常运行。

后续步骤

了解如何 在 Azure Active Directory B2C 中创建用户流。