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

Статья
02/14/2024

Библиотека проверки подлинности для 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 перенаправления на платформу одностраничного приложения

Совет

Действия, описанные в этой статье, могут немного отличаться на портале, с который вы начинаете работу.

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

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

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

Эти URI перенаправления должны появиться на плитке платформы одностраничного приложения, сообщая о том, что для них теперь включена поддержка CORS с потоком кода авторизации и PKCE.

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 в приложение см. в руководстве по входу пользователей и вызову API Microsoft Graph из одностраничного приложения JavaScript с помощью потока кода проверки подлинности.

Дополнительные сведения об изменениях, которые могут потребоваться в коде, см. в руководстве по миграции на сайте GitHub.

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

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

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

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

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

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

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