将 JavaScript 单页应用从隐式授权迁移到授权代码流

适用于 JavaScript (MSAL.js) v2.0 的 Microsoft 身份验证库为 Microsoft 标识平台上的单页应用程序提供了对具有 PKCE 和 CORS 的授权代码流的支持。 按照以下部分中的步骤，将使用隐式授权的 MSAL.js 1.x 迁移到 MSAL.js 2.0+（以下称为 2.x）和授权代码流。

MSAL.js 2.x 支持浏览器中的授权代码流（而不是隐式授权流），从而在 MSAL.js 1.x 的基础上进行了改进。 MSAL.js 2.x 不支持隐式流。

迁移步骤

若要将应用程序更新为 MSAL.js 2.x 和授权代码流，有三个主要步骤：

1. 将应用注册重定向 URI 从“Web”平台转换到“单页应用程序”平台 。
2. 将代码从 MSAL.js 1.x 更新为 2.x。
3. 将共享注册的所有应用程序都更新为 MSAL.js 2.x 和授权代码流后，禁用应用注册中的隐式授权。

以下部分将详细介绍每个步骤。

将重定向 URI 转换到 SPA 平台

如果要继续对应用程序使用现有的应用注册，请使用 Microsoft Entra 管理中心将注册的重定向 URI 更新为 SPA 平台。 这样做可为使用注册的应用（仍需将应用程序的代码更新为 MSAL.js v2.x）启用具有 PKCE 和 CORS 支持的授权代码流。

对于当前配置了 Web 平台重定向 URI 的应用注册，请按照以下步骤进行操作：

1. 登录 Microsoft Entra 管理中心。

2. 浏览到“标识”>“应用程序”>“应用注册”，选择应用程序，然后选择“身份验证”。

3. 在 Web 平台磁贴下的“重定向 URI”中，选择指示“应该迁移 URI”的警告横幅 。

   

4. 仅选择对应的应用程序将使用 MSAL.js 2.x 的重定向 URI，然后选择“配置”。

   

这些重定向 URI 现在应会在“单页应用程序”平台磁贴中显示，其中显示为这些 URI 启用了具有 PKCE 和 CORS 支持的授权代码流。

还可以创建新的应用注册而不是更新现有注册中的重定向 URI。

将代码更新为 MSAL.js 2.x

在 MSAL 1.x 中，你通过初始化 UserAgentApplication 创建了一个应用程序实例，如下所示：

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

在 MSAL 2.x 中，改为初始化 [PublicClientApplication][msal-js-publicclientapplication]：

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

如需对代码进行其他更改，请参阅 GitHub 上的迁移指南。

禁用隐式授权设置

将使用此应用注册及其客户端 ID 的所有生产应用程序更新为 MSAL 2.x 和授权代码流后，应在应用注册中取消选中应用注册的“身份验证”菜单下的隐式授权设置。

在应用注册中取消选中隐式授权设置后，将对使用注册及其客户端 ID 的所有应用程序禁用隐式流。

在将所有应用程序更新为 MSAL.js 2.x 和 [PublicClientApplication][msal-js-publicclientapplication] 之前，请勿禁用隐式授权流。

后续步骤

• 若要详细了解授权代码流（包括隐式和授权代码流之间的差异），请参阅 Microsoft 标识平台和 OAuth 2.0 授权代码流。

• 在以下多部分教程系列中详细了解如何生成一个让用户登录的 React 单页应用程序 (SPA)。