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

Библиотека проверки подлинности для 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 и потока кода авторизации, нужно выполнить три основных шага:

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

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

Переключение URI перенаправления на платформу одностраничного приложения

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

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

  1. Войдите на портал Azure и выберите свой клиент Azure Active Directory.

  2. В разделе Регистрация приложений выберите свое приложение и щелкните элемент Проверка подлинности.

  3. На плитке веб- платформы в разделе URI перенаправления выберите предупреждающий баннер (он указывает на необходимость переноса URI).

    Баннер, предупреждающий об использовании неявного потока, на плитке веб-приложения на портале Azure

  4. Выберите только URI, связанные с приложениями которые будут использовать MSAL.js 2.x, и щелкните Настроить.

    Выбор панели URI перенаправления на панели одностраничного приложения на портале Azure

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

Дальнейшие действия

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

Если вы хотите узнать больше о разработке одностраничных приложений JavaScript на платформе удостоверений Майкрософт, см. серию статей Сценарий: одностраничное приложение.