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

    Implicit flow warning banner on web app tile in Azure portal

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

    Select redirect URI pane in SPA pane in Azure portal

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

Single-page application tile in app registration in Azure portal

还可以创建新的应用注册而不是更新现有注册中的重定向 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);

有关将 MSAL 2.x 添加到应用程序的完整演练,请参阅教程:使用授权代码流让用户登录并从 JavaScript 单页应用 (SPA) 调用 Microsoft Graph API

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

禁用隐式授权设置

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

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

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

后续步骤