Uaktualnianie z MSAL Angular v1 do v2

MSAL Angular w wersji 2 aktualizuje naszą nakładkę dla Angulara do najnowszej wersji biblioteki MSAL Common i zapewnia gotową obsługę nowoczesnych wersji Angulara (9–12) oraz RxJS (6).

W tym przewodniku przedstawiono zmiany wymagane do migracji istniejącej aplikacji z @azure/msal-angular wersji 1 do wersji 2.

Dokumentację dotyczącą biblioteki MSAL Angular w wersji 2 można znaleźć tutaj.

Instalacja

Pierwszą podstawową zmianą biblioteki MSAL Angular w wersji 2 jest to, że nie używa już podstawowego msal pakietu, ale opakowuje @azure/msal-browser pakiet jako zależność równorzędną.

Najpierw odinstaluj wszystkie poprzednie wersje biblioteki MSAL, które są obecnie używane.

Aby zainstalować program @azure/msal-browser i @azure/msal-angular:

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

Zmiany powodujące niezgodność w @azure/msal-browser@2

@azure/msal-browser@2 zawiera szereg niekompatybilnych zmian względem msal@1.x. Wiele z nich powinno być abstrahowanych od aplikacji, ale istnieje kilka, które będą wymagały zmian kodu.

MsalModule.forRoot przyjmuje teraz trzy argumenty

Wcześniej @azure/msal-angular akceptowało dwa obiekty konfiguracji za pośrednictwem MsalModule.forRoot(): jeden dla biblioteki podstawowej, a drugi dla @azure/msal-angular. Zmieniono to tak, aby przyjmowało instancję MSAL, a także dwa obiekty konfiguracji specyficzne dla Angulara.

1. Pierwszym argumentem jest instancja MSAL. Można to dostarczyć jako fabrykę tworzącą instancję MSAL albo przez przekazanie instancji MSAL wraz z konfiguracją.
2. Drugim argumentem jest obiekt MsalGuardConfiguration, który określa interactionType, a także opcjonalny authRequest oraz opcjonalny loginFailedRoute.
3. Trzeci argument jest obiektem MsalInterceptorConfiguration , który zawiera wartości interactionType, , protectedResourceMapi opcjonalny authRequest. unprotectedResourceMap został wycofany z użycia.

Aby uzyskać więcej informacji, zobacz nasz dokument konfiguracji i szczegółowe dokumenty dotyczące bibliotek MsalInterceptor i MsalGuard . Możesz również zapoznać się z naszymi zaktualizowanymi przykładami dotyczącymi sposobu przekazywania tych obiektów konfiguracji.

Logger

• Wartość logger jest teraz ustawiana za pomocą konfiguracji wystąpienia biblioteki MSAL w sekcji system.loggerOptions, które obejmują loggerCallback, piiLoggingEnabled i logLevel, zamiast wystąpienia logger. Element logger można również ustawiać dynamicznie przy użyciu polecenia MsalService.setLogger(). Zobacz logger documentation, aby uzyskać więcej informacji, oraz przykład dotyczący użycia.

Zmiany interfejsu API

• Metody acquireToken i login teraz przyjmują różne obiekty żądania jako parametry. Aby uzyskać szczegółowe informacje, zobacz msal.service.ts .
• Zdarzenia rozgłoszeniowe emitują teraz obiekt EventMessage, a nie tylko ciągi znaków. Zobacz przykład usługi Angular , aby zapoznać się z przykładem implementacji.
• Aplikacje korzystające z metod Redirect powinny importować MsalRedirectComponent i uruchamiać wraz z AppComponent w pliku app.component.ts, który będzie obsługiwać wszystkie przekierowania. Aplikacje, które nie mogą tego zrobić, powinny zaimplementować metodę handleRedirectObservable (i uruchamiać ją przy każdym załadowaniu strony), co pozwoli przechwycić wynik operacji przekierowania. Aby uzyskać więcej informacji, zobacz dokumentację przekierowania .

Przechwytnika MSAL

• Aby uzyskać więcej informacji na temat konfigurowania bieżącej wersji i różnic między wersjami 1 i v2, zapoznaj się z naszym MsalInterceptor.

MSAL Guard

• Aby uzyskać więcej informacji na temat konfigurowania bieżącej wersji i różnic między wersjami 1 i v2, zapoznaj się z naszym MsalGuard.

Accounts

• Zalecamy subskrybowanie obserwowalnego obiektu inProgress$ i filtrowanie według InteractionStatus.None przed pobraniem informacji o koncie. Dzięki temu wszystkie interakcje zostały ukończone przed uzyskaniem informacji o koncie. Zobacz nasz przykład , aby zapoznać się z przykładem tego użycia.
• Podczas pobierania kont zalecamy używanie getAccountByHomeId() i getAccountByLocalId(), dostępnych w instancji MSAL. getAccount() jest teraz getAccountByUsername(), ale powinien być pomocniczym wyborem, ponieważ może być mniej niezawodny i jest tylko dla wygody.
• getAllAccounts() jest również dostępny w instancji MSAL. Aby uzyskać więcej informacji na temat metod kont, zobacz @azure/msal-browser.
• Ponadto możesz teraz pobierać i ustawiać aktywne konta za pomocą getActiveAccount() i setActiveAccount(). Aby uzyskać więcej informacji, zobacz nasze często zadawane pytania .

Angular 9+ i rxjs@6

MSAL Angular wymaga teraz, aby aplikacja była zbudowana przy użyciu @angular/core@>=9, @angular/common@>=9, rxjs@6. Podobnie jak w przypadku biblioteki MSAL Angular w wersji 1, rxjs-compat nie jest wymagane.

Kroki:

1. Zainstaluj nowsze wersje oprogramowania Angular i rxjs: npm install @angular/core @angular/common rxjs
2. Odinstaluj rxjs-compat (zakładając, że nie jest to wymagane dla innych bibliotek): npm uninstall rxjs-compat

Przykłady

Zebraliśmy podstawowe przykładowe aplikacje dla platformy Angular 9, 10, 11 i 12. Te przykłady pokazują podstawową konfigurację i sposób użycia oraz będą stopniowo ulepszane i uzupełniane.

Zobacz tutaj , aby zapoznać się z listą przykładów biblioteki MSAL Angular w wersji 2 i przedstawionych funkcji.