将 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 的警告横幅。

    Azure 门户中 Web 应用磁贴上的隐式流警告横幅

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

    在 Azure 门户的 SPA 窗格中选择重定向 URI 窗格

这些重定向 URI 现在应该会出现在“单页应用程序”平台区域,这表明这些 URI 已启用了授权代码流、CORS 和 PKCE 支持。

Azure 门户应用注册中的单页应用磁贴

还可以创建新的应用注册而不是更新现有注册中的重定向 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] 之前,请勿禁用隐式授权流

后续步骤