将 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 启用了具有 PKCE 和 CORS 支持的授权代码流。

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] 之前,请勿禁用隐式授权流

后续步骤