单页应用程序:应用注册Single-page application: App registration

要在 Microsoft 标识平台中注册单页应用程序 (SPA),请完成以下步骤。To register a single-page application (SPA) in the Microsoft identity platform, complete the following steps. 注册步骤在支持隐式授权流的 MSAL 1.0 和支持使用 PKCE 的授权代码流的 MSAL 2.0 之间有所不同。The registration steps differ between MSAL.js 1.0, which supports the implicit grant flow, and MSAL.js 2.0, which supports the authorization code flow with PKCE.

创建应用注册Create the app registration

对于基于 MSAL 1.0 和 2.0 的应用程序,请先完成以下步骤以创建初始应用注册。For both MSAL.js 1.0- and 2.0-based applications, start by completing the following steps to create the initial app registration.

  1. 登录 Azure 门户Sign in to the Azure portal. 如果你的帐户有权访问多个租户,请在顶部菜单中选择“目录 + 订阅”筛选器,然后选择应包含你要创建的应用注册的租户。If your account has access to multiple tenants, select the Directory + Subscription filter in the top menu, and then select the tenant that should contain the app registration you're about to create.
  2. 搜索并选择“Azure Active Directory”。Search for and select Azure Active Directory.
  3. 在“管理”下,选择“应用注册”。 Under Manage, select App registrations.
  4. 选择“新注册”,输入应用程序的“名称”,并为应用程序选择“支持的帐户类型”。Select New registration, enter a Name for the application and choose the Supported account types for the application. 请勿输入“重定向 URI”。Do NOT enter a Redirect URI. 有关不同帐户类型的说明,请参阅 使用 Azure 门户注册新应用程序For a description of the different account types, see the Register a new application using the Azure portal.
  5. 选择“注册”以创建应用注册。Select Register to create the app registration.

接下来,使用“重定向 URI”配置应用注册,以指定 Microsoft 标识平台应将客户端与任何安全令牌重定向到的位置。Next, configure the app registration with a Redirect URI to specify where the Microsoft identity platform should redirect the client along with any security tokens. 按照适用于将在应用程序中使用的 MSAL.js 版本的步骤操作:Use the steps appropriate for the version of MSAL.js you're using in your application:

重定向 URI:采用身份验证代码流的 MSAL.js 2.0Redirect URI: MSAL.js 2.0 with auth code flow

按照以下步骤为使用 MSAL.js 2.0 或更高版本的应用添加重定向 URI。Follow these steps to add a redirect URI for an app that uses MSAL.js 2.0 or later. MSAL.js 2.0+ 支持使用 PKCE 和 CORS 的授权代码流,以响应浏览器第三方 cookie 限制MSAL.js 2.0+ supports the authorization code flow with PKCE and CORS in response to browser third party cookie restrictions. MSAL.js 2.0+ 不支持隐式授权流。The implicit grant flow is not supported in MSAL.js 2.0+.

  1. 在 Azure 门户中,选择先前在创建应用注册中创建的应用注册。In the Azure portal, select the app registration you created earlier in Create the app registration.
  2. 在“管理”下,选择“身份验证”,然后选择“添加平台”。Under Manage, select Authentication, and then select Add a platform.
  3. 在“Web 应用程序”下,选择“单页应用程序”磁贴。Under Web applications, select the Single-page application tile.
  4. 在“重定向 URI”下,输入 重定向 URIUnder Redirect URIs, enter a redirect URI. 请勿选中“隐式授权”下的任一复选框。Do NOT select either checkbox under Implicit grant.
  5. 选择“配置”以添加重定向 URI。Select Configure to finish adding the redirect URI.

现在,你已经完成了单页应用程序 (SPA) 的注册,并配置了重定向 URI,客户端将被重定向到该 URI,并且安全令牌也将发送到该 URI。You've now completed the registration of your single-page application (SPA) and configured a redirect URI to which the client will be redirected and any security tokens will be sent. 通过使用“添加平台”窗格中的“单页应用程序”磁贴来配置重定向 URI,可以将应用程序注册配置为支持使用 PKCE 和 CORS 的授权代码流。By configuring your redirect URI using the Single-page application tile in the Add a platform pane, your application registration is configured to support the authorization code flow with PKCE and CORS.

重定向 URI:采用隐式流的 MSAL.js 1.0Redirect URI: MSAL.js 1.0 with implicit flow

请按照以下步骤为使用 MSAL.js 1.3 或更早版本的单页应用和隐式授权流添加重定向 URI。Follow these steps to add a redirect URI for a single-page app that uses MSAL.js 1.3 or earlier and the implicit grant flow. 使用 MSAL.js 1.3 或更早版本的应用程序不支持身份验证代码流。Applications that use MSAL.js 1.3 or earlier do not support the auth code flow.

  1. 在 Azure 门户中,选择先前在创建应用注册中创建的应用注册。In the Azure portal, select the app registration you created earlier in Create the app registration.
  2. 在“管理”下,选择“身份验证”,然后选择“添加平台”。Under Manage, select Authentication, and then select Add a platform.
  3. 在“Web 应用程序”下,选择“单页应用程序”磁贴。Under Web applications, select Single-page application tile.
  4. 在“重定向 URI”下,输入 重定向 URIUnder Redirect URIs, enter a redirect URI.
  5. 启用“隐式流”:Enable the Implicit flow:
    • 如果你的应用程序登录了用户,请选择“ID 令牌”。If your application signs in users, select ID tokens.
    • 如果你的应用程序也需调用受保护的 Web API,请选择“访问令牌”。If your application also needs to call a protected web API, select Access tokens. 有关这些令牌类型的更多信息,请参阅 ID 令牌访问令牌For more information about these token types, see ID tokens and Access tokens.
  6. 选择“配置”以添加重定向 URI。Select Configure to finish adding the redirect URI.

现在,你已经完成了单页应用程序 (SPA) 的注册,并配置了重定向 URI,客户端将被重定向到该 URI,并且安全令牌也将发送到该 URI。You've now completed the registration of your single-page application (SPA) and configured a redirect URI to which the client will be redirected and any security tokens will be sent. 通过选择“ID 令牌”和“访问令牌”中的一个或选择两个,即表示启用了隐式授权流。By selecting one or both of ID tokens and Access tokens, you've enabled the implicit grant flow.

关于授权流的注意事项Note about authorization flows

默认情况下,使用单页应用程序平台配置创建的应用注册会启用授权代码流。By default, an app registration created by using single-page application platform configuration enables the authorization code flow. 要利用此流,你的应用程序必须使用 MSAL.js 2.0 或更高版本。To take advantage of this flow, your application must use MSAL.js 2.0 or later.

如前所述,使用 MSAL.js 1.3 的单页应用程序仅限于隐式授权流。As mentioned previously, single-page applications using MSAL.js 1.3 are restricted to the implicit grant flow. 当前的 OAuth 2.0 最佳做法建议为 SPA 使用授权代码流而非隐式流。Current OAuth 2.0 best practices recommend using the authorization code flow rather than the implicit flow for SPAs. 拥有使用期有限的刷新令牌还可以帮助你的应用适应 Safari ITP 之类的新式浏览器 cookie 隐私限制Having limited-lifetime refresh tokens also helps your application adapt to modern browser cookie privacy limitations, like Safari ITP.

当应用注册代表的所有生产单页应用程序都使用 MSAL.js 2.0 和授权代码流时,请取消选中 Azure 门户中应用注册的“身份验证”窗格的隐式授权设置。When all your production single-page applications represented by an app registration are using MSAL.js 2.0 and the authorization code flow, uncheck the implicit grant settings the app registration's Authentication pane in the Azure portal. 但是,如果启用(选中)隐式流,则使用 MSAL.js 1.x 和隐式流的应用程序可以继续运行。Applications using MSAL.js 1.x and the implicit flow can continue to function, however, if you leave the implicit flow enabled (checked).

后续步骤Next steps

接下来,配置应用代码,以使用在先前步骤中创建的应用注册:Next, configure your app's code to use the app registration you created in the previous steps:.