Перенос одностраничного приложения JavaScript из неявного потока предоставления разрешения в поток кода авторизации

Статья
03/05/2025

Библиотека проверки подлинности для JavaScript от Майкрософт (MSAL.js) версии 2.0 обеспечивает поддержку потока кода авторизации с использованием 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 перенаправления для регистрации приложения с веб-платформы на платформу одностраничного приложения.
Обновите ваш код с MSAL.js 1.x до 2.x.
Отключите неявное разрешение в регистрации приложения, когда все приложения, использующие эту регистрацию, будут обновлены до MSAL.js 2.x и потока кода авторизации.

Далее подробно описан каждый из этих шагов.

Переключите URI перенаправления на платформу SPA

Если вы хотите продолжить использование вашей существующей регистрации для приложений, используйте Центр администрирования Microsoft Entra для обновления URI перенаправления регистрации на платформу SPA. Это позволит активировать поток кода авторизации с поддержкой PKCE и CORS для приложений, использующих регистрацию (но вам по-прежнему необходимо обновить код вашего приложения до версии MSAL.js 2.x).

Выполните следующие действия для регистраций приложений, у которых URI перенаправления настроены для веб-платформы.

Войдите в центр администрирования Microsoft Entra.
Перейдите к Идентификация>Приложения>Регистрация приложений, выберите ваше приложение, а затем Аутентификация.
На плитке веб-платформы в разделе URI перенаправления выберите предупреждающий баннер (он указывает на необходимость переноса URI).
Выберите только URI, связанные с приложениями, которые будут использовать MSAL.js 2.x, и выберите Настроить.

Эти 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.

Отключение параметров неявного предоставления разрешений

Когда вы перенесете все рабочие приложения, использующие эту регистрацию приложения и соответствующий идентификатор клиента, на MSAL 2.x и поток кода авторизации, снимите флажки параметров неявного предоставления разрешения в меню Проверка подлинности регистрации приложения.

Когда вы снимаете флажок с настроек неявного гранта в регистрации приложения, неявный поток отключается для всех приложений, использующих регистрацию и ее идентификатор клиента.

Не отключайте неявный поток авторизации до обновления всех приложений до MSAL.js 2.x и [PublicClientApplication][msal-js-publicclientapplication].

Следующие шаги

Дополнительные сведения о потоке кода авторизации, в том числе о различиях между неявными потоками кода и потоками кода авторизации, см. в статье Поток кода авторизации для платформы удостоверений Майкрософт и OAuth 2.0.
Узнайте больше, создав одностраничное приложение React (SPA), которое выполняет вход пользователей, в следующей многосерийной серии руководств.

Поделиться через