教程:在 Azure Active Directory B2C 中注册单页应用程序 (SPA)Tutorial: Register a single-page application (SPA) in Azure Active Directory B2C

必须在你管理的租户中注册应用程序,然后这些应用程序才能与 Azure Active Directory B2C (Azure AD B2C) 交互。Before your applications can interact with Azure Active Directory B2C (Azure AD B2C), they must be registered in a tenant that you manage. 本教程介绍如何使用 Azure 门户注册单页应用程序 (SPA)。This tutorial shows you how to register a single-page application ("SPA") using the Azure portal.

身份验证选项概述Overview of authentication options

许多新式 Web 应用程序都构建为客户端单页应用程序 (SPA)。Many modern web applications are built as client-side single-page applications ("SPAs"). 开发人员使用 JavaScript 或 SPA 框架(例如 Angular、Vue 和 React)来编写它们。Developers write them by using JavaScript or a SPA framework such as Angular, Vue, and React. 这些应用程序在 Web 浏览器上运行,与传统的服务器端 Web 应用程序相比,它们具有不同的身份验证特征。These applications run on a web browser and have different authentication characteristics than traditional server-side web applications.

Azure AD B2C 提供了两个选项,用于允许单页应用程序让用户登录并获取用于访问后端服务或 Web API 的令牌:Azure AD B2C provides two options to enable single-page applications to sign in users and get tokens to access back-end services or web APIs:

授权代码流(带有 PKCE)Authorization code flow (with PKCE)

  • OAuth 2.0 授权代码流(使用 PKCE)OAuth 2.0 Authorization code flow (with PKCE). 授权代码流允许应用程序用授权代码来交换 ID 令牌(表示已经过身份验证的用户),以及交换调用受保护 API 所需的 访问 令牌。The authorization code flow allows the application to exchange an authorization code for ID tokens to represent the authenticated user and Access tokens needed to call protected APIs. 此外,它还返回 刷新 令牌,这类令牌提供以用户身份长期访问资源而无需与这些用户交互的权限。In addition, it returns Refresh tokens that provide long-term access to resources on behalf of users without requiring interaction with those users.

这是 建议的 做法。This is the recommended approach. 拥有使用期有限的刷新令牌可以帮助你的应用适应 Safari ITP 之类的新式浏览器 cookie 隐私限制Having limited-lifetime refresh tokens helps your application adapt to modern browser cookie privacy limitations, like Safari ITP.

若要利用此流,应用程序可以使用支持它的身份验证库,如 MSAL.js 2.xTo take advantage of this flow, your application can use an authentication library that supports it, like MSAL.js 2.x.

单页应用程序 - 授权

隐式授予流Implicit grant flow

  • OAuth 2.0 隐式流OAuth 2.0 implicit flow. 某些框架(如 MSAL.js 1.x)仅支持隐式授权流。Some frameworks, like MSAL.js 1.x, only support the implicit grant flow. 隐式授权流允许应用程序获取 ID访问 令牌。The implicit grant flow allows the application to get ID and Access tokens. 与授权代码流不同,隐式授权流不会返回 刷新令牌Unlike the authorization code flow, implicit grant flow does not return a Refresh token.

单页应用程序 - 隐式

此身份验证流不包括使用 Electron 和 React-Native 之类的跨平台 JavaScript 框架的应用程序方案。This authentication flow does not include application scenarios that use cross-platform JavaScript frameworks such as Electron and React-Native. 这些方案需要更多功能才能与本机平台进行交互。Those scenarios require further capabilities for interaction with the native platforms.

先决条件Prerequisites

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a Trial before you begin.

如果尚未创建自己的 Azure AD B2C 租户,请立即创建一个。If you haven't already created your own Azure AD B2C Tenant, create one now. 可以使用现有的 Azure AD B2C 租户。You can use an existing Azure AD B2C tenant.

注册 SPA 应用程序Register the SPA application

  1. 登录到 Azure 门户Sign in to the Azure portal.

  2. 在门户工具栏中选择“目录 + 订阅”图标,然后选择包含 Azure AD B2C 租户的目录 。Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.

  3. 在 Azure 门户中,搜索并选择“Azure AD B2C”。In the Azure portal, search for and select Azure AD B2C.

  4. 选择“应用注册”,然后选择“新建注册” 。Select App registrations , and then select New registration.

  5. 输入应用程序的“名称”。Enter a Name for the application. 例如 spaapp1。For example, spaapp1.

  6. 在“支持的帐户类型”下,选择“任何标识提供者或组织目录中的帐户(用于通过用户流对用户进行身份验证)” Under Supported account types , select Accounts in any identity provider or organizational directory (for authenticating users with user flows)

  7. 在“重定向 URI”下,选择“单页应用程序(SPA)”,然后在 URL 文本框中输入 https://jwt.msUnder Redirect URI , select Single-page application (SPA) , and then enter https://jwt.ms in the URL text box.

    “重定向 URI”是授权服务器(在本例中为 Azure AD B2C)在完成与用户的交互后将用户定向到的终结点,也是在成功授权后向其发送访问令牌或授权代码的终结点。The redirect URI is the endpoint to which the user is sent by the authorization server (Azure AD B2C, in this case) after completing its interaction with the user, and to which an access token or authorization code is sent upon successful authorization. 在生产应用程序中,它通常是运行应用的公共可访问终结点,如 https://contoso.com/auth-responseIn a production application, it's typically a publicly accessible endpoint where your app is running, like https://contoso.com/auth-response. 出于类似本教程的测试目的,你可以将它设置为 https://jwt.ms,这是一个 Microsoft 拥有的 Web 应用程序,用于显示已解码的令牌内容(令牌内容始终保留在浏览器中)。For testing purposes like this tutorial, you can set it to https://jwt.ms, a Microsoft-owned web application that displays the decoded contents of a token (the contents of the token never leave your browser). 在应用开发期间,你可以添加应用程序本地侦听的终结点,如 http://localhost:5000During app development, you might add the endpoint where your application listens locally, like http://localhost:5000. 可以随时在注册的应用程序中添加和修改重定向 URI。You can add and modify redirect URIs in your registered applications at any time.

    重定向 URI 存在以下限制:The following restrictions apply to redirect URIs:

    • 除非使用 localhost,否则回复 URL 必须以方案 https 开头。The reply URL must begin with the scheme https, unless using localhost.
    • 回复 URL 区分大小写。The reply URL is case-sensitive. 其大小写必须与正在运行的应用程序的 URL 路径的大小写匹配。Its case must match the case of the URL path of your running application. 例如,如果应用程序在其路径中包括 .../abc/response-oidc,请不要在回复 URL 中指定 .../ABC/response-oidcFor example, if your application includes as part of its path .../abc/response-oidc, do not specify .../ABC/response-oidc in the reply URL. 由于 Web 浏览器将路径视为区分大小写,因此在重定向到大小写不匹配的 .../ABC/response-oidc URL 时,可能会排除与 .../abc/response-oidc 关联的 cookie。Because the web browser treats paths as case-sensitive, cookies associated with .../abc/response-oidc may be excluded if redirected to the case-mismatched .../ABC/response-oidc URL.
  8. 在“权限”下,选择“授予对 openid 和 office_access 权限的管理员许可”复选框。Under Permissions , select the Grant admin consent to openid and offline_access permissions check box.

  9. 选择“注册” 。Select Register.

启用隐式流Enable the implicit flow

如果使用隐式流,则需要在应用注册中启用隐式授权流。If using the implicit flow, you need to enable the implicit grant flow in the app registration.

  1. 在左侧菜单中的“管理”下,选择“身份验证” 。In the left menu, under Manage , select Authentication.
  2. 在“隐式授权”下,选中“访问令牌”和“ID 令牌”复选框 。Under Implicit grant , select both the Access tokens and ID tokens check boxes.
  3. 选择“保存”。Select Save.

从隐式流迁移Migrate from the implicit flow

如果拥有使用隐式流的现有应用程序,我们建议使用支持它的框架(如 MSAL.js 2.x)迁移到使用授权代码流的应用程序。If you have an existing application that uses the implicit flow, we recommend migrating to using the authorization code flow by using a framework that supports it, like MSAL.js 2.x.

当应用注册表示的所有生产单页应用程序都在使用授权代码流时,请禁用隐式授权流设置。When all your production single-page applications represented by an app registration are using the authorization code flow, disable the implicit grant flow settings.

  1. 在左侧菜单中的“管理”下,选择“身份验证” 。In the left menu, under Manage , select Authentication.
  2. 在“隐式授权”下,取消选中“访问令牌”和“ID 令牌”复选框 。Under Implicit grant , de-select both the Access tokens and ID tokens check boxes.
  3. 选择“保存”。Select Save.

如果启用(选中)隐式流,则使用隐式流的应用程序可以继续运行。Applications using the implicit flow can continue to function if you leave the implicit flow enabled (checked).


后续步骤Next steps

接下来,了解如何创建用户流以使用户能够注册、登录和管理其个人资料。Next, learn how to create user flows to enable your users to sign up, sign in, and manage their profiles.