Uppgradera från MSAL Angular v1 till v2

MSAL Angular v2 uppdaterar vår version av MSAL för Angular till den senaste versionen av MSAL Common och har inbyggt stöd för moderna versioner av Angular (9–12) och rxjs (6).

Den här guiden visar de ändringar som krävs för att migrera ett befintligt program från @azure/msal-angular v1 till v2.

Dokumentation specifikt för MSAL Angular v2 finns här.

Installation

Den första grundläggande ändringen av MSAL Angular v2 är att det inte längre använder kärnpaketet msal , utan omsluter @azure/msal-browser paketet som ett peer-beroende.

Avinstallera först alla tidigare versioner av MSAL som för närvarande används.

Så här installerar du @azure/msal-browser och @azure/msal-angular:

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

Ändringar som bryter kompatibiliteten i @azure/msal-browser@2

@azure/msal-browser@2 innehåller ett antal icke-bakåtkompatibla ändringar från msal@1.x. Många av dessa bör abstraheras bort från ditt program, men det finns några som kräver kodändringar.

MsalModule.forRoot tar nu emot tre argument

@azure/msal-angular Tidigare accepterade två konfigurationsobjekt via MsalModule.forRoot(), ett för kärnbiblioteket och ett för @azure/msal-angular. Detta har ändrats för att ta in en instans av MSAL, samt två Angular-specifika konfigurationsobjekt.

  1. Det första argumentet är MSAL-instansen. Detta kan tillhandahållas som en fabriksfunktion som instansierar MSAL eller genom att skicka in MSAL-instansen tillsammans med konfigurationer.
  2. Det andra argumentet är ett MsalGuardConfiguration objekt som anger interactionType samt ett valfritt authRequest och ett valfritt loginFailedRoute.
  3. Det tredje argumentet är ett MsalInterceptorConfiguration objekt som innehåller värdena för interactionType, en protectedResourceMapoch en valfri authRequest. unprotectedResourceMap har blivit inaktuell.

Mer information finns i vårt konfigurationsdokument och specifika dokument för MsalInterceptor och MsalGuard . Du kan också se våra uppdaterade exempel på hur du skickar dessa konfigurationsobjekt.

Logger

  • logger har nu angetts via konfigurationen för MSAL-instansen under system.loggerOptions, som innehåller en loggerCallback, piiLoggingEnabled och logLevel, i stället för en instans av en logger. logger kan också ställas in dynamiskt med hjälp av MsalService.setLogger(). Se logger documentation för mer information och exempel på användning.

API-ändringar

  • Metoderna acquireToken och login tar nu olika begärandeobjekt som parametrar. Mer information finns i msal.service.ts .
  • Sändningshändelser genererar nu ett EventMessage objekt, i stället för bara strängar. Se Angular-exemplet för ett exempel på hur du implementerar.
  • Applikationer som använder Redirect-metoder bör importera MsalRedirectComponent och bootstrap-koden tillsammans med AppComponent i sin app.component.ts, som hanterar alla omdirigeringar. Applikationer som inte kan göra detta bör implementera metoden handleRedirectObservable (och låta den köras vid varje sidinläsning), vilket fångar resultatet av omdirigeringsåtgärder. Mer information finns i omdirigeringsdokumentationen .

MSAL Interceptor

MSAL Guard

  • Se vår MsalGuard-dokumentation för mer information om hur du konfigurerar den aktuella MsalGuard samt om skillnaderna mellan v1 och v2.

Accounts

  • Vi rekommenderar att du prenumererar på den inProgress$ Observable och filtrerar efter InteractionStatus.None innan du hämtar kontoinformation. Detta säkerställer att alla interaktioner har slutförts innan kontoinformation hämtas. Se vårt exempel för ett exempel på den här användningen.
  • När du hämtar konton rekommenderar vi att du använder getAccountByHomeId() och getAccountByLocalId(), som är tillgängliga på MSAL-instansen. getAccount() är nu getAccountByUsername(), men bör vara ett sekundärt val, eftersom det kan vara mindre tillförlitligt och är endast för enkelhetens skull.
  • getAllAccounts() är också tillgängligt på MSAL-instansen. Se dokumentationen för @azure/msal-browser för mer information om kontometoder.
  • Dessutom kan du nu hämta och ställa in aktiva konton med getActiveAccount() och setActiveAccount(). Mer information finns i våra vanliga frågor och svar .

Angular 9+ och rxjs@6

MSAL Angular förväntar sig nu att ditt program har skapats med @angular/core@>=9, @angular/common@>=9, rxjs@6. Precis som med MSAL Angular v1 krävs inte rxjs-compat.

Steps:

  1. Installera nyare versioner av Angular och rxjs: npm install @angular/core @angular/common rxjs
  2. Avinstallera rxjs-compat (förutsatt att det inte behövs för andra bibliotek): npm uninstall rxjs-compat

Samples

Vi har sammanställt grundläggande exempelprogram för Angular 9, 10, 11 och 12. Dessa exempel visar grundläggande konfiguration och användning, och kommer att förbättras och läggas till stegvis.

Här finns en lista över MSAL Angular v2-exempel och de funktioner som visas.

  • Last updated on