Migreren van MSAL Angular v0 naar v1

MSAL Angular v1 brengt onze Angular wrapper up-to-date met de nieuwste versie van MSAL core, en met kant-en-klare ondersteuning voor moderne versies van Angular (6+) en rxjs (6).

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

Een gedetailleerde lijst met wijzigingen vindt u in het CHANGELOG.

Documentatie voor MSAL Angular v1 vindt u hier.

Installatie

De eerste fundamentele wijziging in MSAL Angular is dat het kernpakket msal geen reguliere afhankelijkheid meer is en in plaats daarvan een peer-afhankelijkheid. Dit betekent dat uw toepassing msal ook als normale afhankelijkheid moet opnemen, in plaats van erop te vertrouwen dat MSAL Angular dit opneemt. Hierdoor kan uw toepassing de nieuwste versie van msal (aanbevolen) gebruiken, of u kunt een aangepaste versie/bereik kiezen, terwijl u nog steeds de nieuwste versie van MSAL Angular zelf gebruikt. Opmerking: u moet nog steeds een versie opgeven die voldoet aan het semver-bereik dat is opgegeven voor de peerafhankelijkheid, anders werkt MSAL Angular mogelijk niet zoals bedoeld.

Steps:

  1. Installeer msal en @azure/msal-angular: npm install msal@beta @azure/msal-angular@beta.

Belangrijke wijzigingen in MSAL.js v1

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

MsalModule.forRoot heeft nu twee argumenten.

Voorheen heeft MSAL Angular één configuratieobject geaccepteerd via MsalModule.forRoot(). Om beter aan te sluiten bij msal@1 en MSAL Angular meer flexibiliteit te bieden, is dit opgesplitst in twee objecten: één voor de kernbibliotheek en één voor de wrapperbibliotheek.

Steps:

  1. Het eerste argument is het configuratieobject, dat hetzelfde Configuration object is dat u aan msal zou doorgeven.
  2. Het tweede argument is een MsalAngularConfiguration object, met de waarden voor consentScopes, popUpen extraQueryParametersprotectedResourceMap. unprotectedResources is verouderd verklaard.

Zie het voorbeeld voor een voorbeeld van hoe u deze configuratieobjecten doorgeeft.

Maatregelen voor fouten in de AOT-modus

Het nieuwe msal configuratieobject gebruikt een functie voor system.logger en framework.protectedResourceMap, die niet goed werkt wanneer het in aot de modus wordt uitgevoerd. Er zijn nu twee tijdelijke oplossingen beschikbaar:

  1. protectedResourceMap is verplaatst naar MsalAngularConfiguration object en kan worden doorgegeven als [string, string[]][] of als een Map. framework.protectedResourceMap werkt nog steeds, maar is afgeschaft. Bekijk de bijgewerkte voorbeelden voor gebruik.
  2. logger kan nu dynamisch worden ingesteld met behulp van MsalService.setLogger(). Bekijk de bijgewerkte voorbeelden voor gebruik.

Andere belangrijke wijzigingen

  • De acquireToken en login methoden nemen nu één AuthenticationParameters object als parameters.
  • getUser() is nu getAccount().
  • Broadcast-gebeurtenissen verzenden nu objecten in plaats van alleen tekenreeksen.
  • Toepassingen die methoden gebruiken Redirect , moeten de handleRedirectCallback methode implementeren (en deze bij elke pagina laden laten uitvoeren), waarmee het resultaat van omleidingsbewerkingen wordt vastgelegd. Zie het Angular-voorbeeld voor een voorbeeld van het implementeren.

Angular 6+ en rxjs@6

MSAL Angular verwacht nu dat uw toepassing is gebouwd met @angular/core@>=6, @angular/common@>=6, . rxjs@6 En rxjs-compat is niet meer nodig.

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 6, 7, 8 en 9. Deze voorbeelden demonstreren de basisconfiguratie en het gebruik, en worden stapsgewijs verbeterd en toegevoegd. We zijn ook van plan om meer voorbeelden op te nemen voor meer scenario's en use cases.

  • Last updated on