Upgraden van MSAL Angular v1 naar v2

MSAL Angular v2 brengt onze Angular wrapper up-to-date met de nieuwste versie van MSAL common, en met kant-en-klare ondersteuning voor moderne versies van Angular (9 - 12) en rxjs (6).

In deze handleiding worden wijzigingen gedemonstreerd die nodig zijn voor het migreren van een bestaande toepassing van @azure/msal-angular v1 naar v2.

Documentatie die specifiek is voor MSAL Angular v2 vindt u hier.

Installatie

De eerste fundamentele wijziging in MSAL Angular v2 is dat het kernpakket msal niet meer wordt gebruikt, maar het @azure/msal-browser pakket verpakt als peerafhankelijkheid.

Verwijder eerst eerdere versies van MSAL die momenteel worden gebruikt.

Om @azure/msal-browser en @azure/msal-angular te installeren:

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

Belangrijke wijzigingen in @azure/msal-browser@2

@azure/msal-browser@2 bevat een aantal belangrijke wijzigingen van msal@1.x. Veel van deze moeten worden verwijderd van uw toepassing, maar er zijn een paar die codewijzigingen vereisen.

MsalModule.forRoot heeft nu drie argumenten

Eerder hebben @azure/msal-angular twee configuratieobjecten geaccepteerd via MsalModule.forRoot(), één voor de kernbibliotheek en één voor @azure/msal-angular. Dit is gewijzigd om een exemplaar van MSAL op te nemen, evenals twee Angular-specifieke configuratieobjecten.

  1. Het eerste argument is het MSAL-exemplaar. Dit kan worden aangeboden als een factory die MSAL instantieert, of door de MSAL-instantie mee te geven in de configuratie.
  2. Het tweede argument is een MsalGuardConfiguration-object, dat de interactionType specificeert, evenals een optionele authRequest en een optionele loginFailedRoute.
  3. Het derde argument is een MsalInterceptorConfiguration object dat de waarden voor interactionType, a protectedResourceMapen een optioneel authRequestobject bevat. unprotectedResourceMap is verouderd verklaard.

Zie onze configuratiedocumenten en specifieke documenten voor MsalInterceptor en MsalGuard voor meer informatie. U kunt ook onze bijgewerkte voorbeelden bekijken voor voorbeelden van het doorgeven van deze configuratieobjecten.

Logger

  • De logger wordt nu ingesteld via configuraties van het MSAL-exemplaar, onder system.loggerOptions, waaronder een loggerCallback, piiLoggingEnabled en logLevel, in plaats van via een exemplaar van een logger. De logger kan ook dynamisch worden ingesteld met behulp van MsalService.setLogger(). Zie logger documentation voor meer informatie en voorbeeld voor gebruik.

API-wijzigingen

  • De acquireToken en login methoden nemen nu verschillende aanvraagobjecten als parameters. Zie de msal.service.ts voor meer informatie.
  • Broadcast-gebeurtenissen verzenden nu een EventMessage object in plaats van alleen tekenreeksen. Zie het Angular-voorbeeld voor een voorbeeld van het implementeren.
  • Toepassingen die gebruikmaken van Redirect-methoden moeten in hun app.component.ts de MsalRedirectComponent en AppComponent importeren, samen met Bootstrap, dat alle omleidingen afhandelt. Toepassingen die dit niet kunnen doen, moeten de methode handleRedirectObservable implementeren (en deze bij elke paginalading uitvoeren), waarmee het resultaat van omleidingsbewerkingen wordt vastgelegd. Raadpleeg de omleidingsdocumentatie voor meer informatie.

MSAL Interceptor

  • Raadpleeg het msalInterceptor-document voor meer informatie over het configureren van de huidige MsalInterceptorversie en de verschillen tussen v1 en v2.

MSAL Guard

  • Raadpleeg onze MsalGuard-documentatie voor meer informatie over het configureren van de huidige MsalGuardversie en de verschillen tussen v1 en v2.

Accounts

  • We raden aan u te abonneren op de inProgress$ observable en te filteren op InteractionStatus.None voordat u accountgegevens opvraagt. Dit zorgt ervoor dat alle interacties zijn voltooid voordat u accountgegevens ophaalt. Bekijk ons voorbeeld voor een voorbeeld van dit gebruik.
  • Bij het ophalen van accounts raden we u aan getAccountByHomeId() en getAccountByLocalId() te gebruiken, die beschikbaar zijn op de MSAL-instantie. getAccount() is nu getAccountByUsername(), maar moet een secundaire keuze zijn, omdat het misschien minder betrouwbaar is en alleen voor het gemak is.
  • getAllAccounts() is ook beschikbaar op het MSAL-exemplaar. Raadpleeg documenten voor @azure/msal-browser meer informatie over accountmethoden.
  • Daarnaast kunt u nu actieve accounts ophalen en instellen met getActiveAccount() en setActiveAccount(). Zie onze veelgestelde vragen voor meer informatie.

Angular 9+ en rxjs@6

MSAL Angular verwacht nu dat uw toepassing is gebouwd met @angular/core@>=9, @angular/common@>=9, . rxjs@6 Net als bij MSAL Angular v1 is rxjs-compat dit niet vereist.

Steps:

  1. Installeer nieuwere versies van Angular en rxjs: npm install @angular/core @angular/common rxjs
  2. Verwijderen rxjs-compat (ervan uitgaande dat dit niet nodig is voor andere bibliotheken): npm uninstall rxjs-compat

Samples

We hebben basisvoorbeeldtoepassingen samengesteld voor Angular 9, 10, 11 en 12. Deze voorbeelden demonstreren de basisconfiguratie en het gebruik, en worden stapsgewijs verbeterd en toegevoegd.

Zie hier voor een lijst met de MSAL Angular v2-voorbeelden en de functies die worden gedemonstreerd.

  • Last updated on