将 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 和授权代码流,有三个主要步骤:
- 将应用注册重定向 URI 从“Web”平台转换到“单页应用程序”平台 。
- 将代码从 MSAL.js 1.x 更新为 2.x。
- 将共享注册的所有应用程序都更新为 MSAL.js 2.x 和授权代码流后,禁用应用注册中的隐式授权。
以下部分将详细介绍每个步骤。
将重定向 URI 转换到 SPA 平台
提示
本文中的步骤可能因开始使用的门户而略有不同。
如果要继续对应用程序使用现有的应用注册,请使用 Microsoft Entra 管理中心将注册的重定向 URI 更新为 SPA 平台。 这样做可为使用注册的应用(仍需将应用程序的代码更新为 MSAL.js v2.x)启用具有 PKCE 和 CORS 支持的授权代码流。
对于当前配置了 Web 平台重定向 URI 的应用注册,请按照以下步骤进行操作:
浏览到“标识”>“应用程序”>“应用注册”,选择应用程序,然后选择“身份验证”。
在 Web 平台磁贴下的“重定向 URI”中,选择指示“应该迁移 URI”的警告横幅 。
仅选择对应的应用程序将使用 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)。