Обновление с MSAL Angular версии 1 до версии 2

MSAL Angular v2 обновляет нашу оболочку для Angular до актуальной версии MSAL Common и обеспечивает встроенную поддержку современных версий Angular (9–12) и RxJS (6).

В этом руководстве будут показаны изменения, необходимые для переноса существующего приложения с @azure/msal-angular версии 1 на версию 2.

Здесь приведена документация специально для MSAL Angular версии 2.

Installation

Первое ключевое изменение в MSAL Angular v2 заключается в том, что эта версия больше не использует базовый пакет msal, а вместо этого использует пакет @azure/msal-browser как peer dependency.

Сначала удалите все предыдущие версии MSAL, которые сейчас используются.

Чтобы установить @azure/msal-browser и @azure/msal-angular:

npm install @azure/msal-browser @azure/msal-angular@latest

Серьезные изменения в @azure/msal-browser@2

@azure/msal-browser@2 включает в себя ряд критических изменений из msal@1.x. Многие из них должны быть абстрагированы от приложения, но есть несколько, которые потребуют изменения кода.

MsalModule.forRoot теперь принимает три аргумента

Ранее @azure/msal-angular принимал два объекта конфигурации через MsalModule.forRoot(): один для основной библиотеки и один для @azure/msal-angular. Это изменили так, чтобы оно принимало экземпляр MSAL, а также два объекта конфигурации, специфичных для Angular.

  1. Первым аргументом является экземпляр MSAL. Это можно сделать с помощью фабрики, создающей экземпляр MSAL, либо передав экземпляр MSAL вместе с конфигурацией.
  2. Второй аргумент представляет собой объект MsalGuardConfiguration, который задаёт interactionType, а также необязательные authRequest и loginFailedRoute.
  3. Третий MsalInterceptorConfiguration аргумент — это объект, содержащий значения для interactionType, a protectedResourceMapи необязательный authRequest. unprotectedResourceMap больше не поддерживается.

Дополнительные сведения см. в документации по конфигурации и конкретным документам для MsalInterceptor и MsalGuard . Вы также можете просмотреть обновленные примеры передачи этих объектов конфигурации.

Logger

  • Теперь logger задаётся через конфигурации для экземпляра MSAL в разделе system.loggerOptions, которые включают loggerCallback, piiLoggingEnabled и logLevel, вместо экземпляра logger. logger также можно задать динамически с помощью MsalService.setLogger(). logger documentation Дополнительные сведения и пример использования см. в разделе "Дополнительные сведения".

Изменения API

  • Методы acquireToken и login теперь принимают разные объекты запросов в качестве параметров. Дополнительные сведения см. в msal.service.ts .
  • Трансляция событий теперь выдает EventMessage объект, а не только строки. См. пример для Angular, чтобы увидеть пример реализации.
  • Приложения, использующие методы Redirect, должны импортировать MsalRedirectComponent и bootstrap вместе с AppComponent в своём файле app.component.ts, которые будут обрабатывать все перенаправления. Приложения, которые не могут этого сделать, должны реализовать метод handleRedirectObservable (и вызывать его при каждой загрузке страницы), чтобы получать результаты операций перенаправления. Дополнительные сведения см. в документации по перенаправлению .

Перехватчик MSAL

MSAL Guard

  • Дополнительные сведения о настройке текущего MsalGuard, а также о различиях между v1 и v2 см. в нашей документации MsalGuard.

Accounts

  • Перед получением сведений об учетной записи рекомендуется подписаться на inProgress$ observable и выполнить фильтрацию по InteractionStatus.None. Это гарантирует, что все взаимодействия завершены перед получением сведений об учетной записи. Пример использования см. в нашем примере .
  • При получении учетных записей рекомендуется использовать getAccountByHomeId() и getAccountByLocalId(), доступные в экземпляре MSAL. getAccount() теперь getAccountByUsername(), но должен быть вторичным выбором, так как он может быть менее надежным и предназначен только для удобства.
  • getAllAccounts() также доступен в экземпляре MSAL. Дополнительные сведения о методах учетной записи см. в документации@azure/msal-browser.
  • Кроме того, теперь можно получать и устанавливать активные аккаунты с помощью getActiveAccount() и setActiveAccount(). Дополнительные сведения см. в разделе "Вопросы и ответы ".

Angular 9+ и rxjs@6

MSAL Angular теперь ожидает, что ваше приложение собрано с использованием @angular/core@>=9, @angular/common@>=9, rxjs@6. Как и в MSAL Angular версии 1, rxjs-compat не требуется.

Steps:

  1. Установите более новые версии Angular и rxjs: npm install @angular/core @angular/common rxjs
  2. Удалите rxjs-compat (если это не требуется для других библиотек): npm uninstall rxjs-compat

Samples

Мы объединили базовые примеры приложений для Angular 9, 10, 11 и 12. Эти примеры демонстрируют базовую настройку и использование и будут постепенно улучшаться и дополняться.

См. здесь список примеров MSAL Angular версии 2 и показанных функций.

  • Last updated on