通过

在 Azure Active Directory 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 所需的访问令牌。 此外，它还返回刷新令牌，这类令牌提供以用户身份长期访问资源而无需与这些用户交互的权限。

这是建议的做法。 拥有使用期有限的刷新令牌可以帮助你的应用适应 Safari ITP 之类的新式浏览器 cookie 隐私限制。

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

单页应用程序 - 授权

隐式授予流

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

单页应用程序 - 隐式

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

先决条件

  • 如果没有 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 存在以下限制：

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

  8. 在“权限”下，选择“授予对 openid 和 office_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 中创建用户流 。