Frissítés MSAL Angular v1-ről 2-re

Az MSAL Angular v2 naprakésszé teszi Angular-wrapperünket az MSAL common legújabb verziójával, és beépített támogatást nyújt az Angular (9–12) és az rxjs (6) modern verzióihoz.

Ez az útmutató bemutatja a meglévő alkalmazások 1-ről @azure/msal-angular v2-be való migrálásához szükséges módosításokat.

A kifejezetten az MSAL Angular v2-hez készült dokumentáció itt található.

Telepítés

Az MSAL Angular v2 első alapvető módosítása az, hogy már nem az alapcsomagot msal használja, hanem @azure/msal-browser csomagolja be a csomagot.

Először távolítsa el a jelenleg használt MSAL korábbi verzióit.

A(z) @azure/msal-browser és @azure/msal-angular telepítéséhez:

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

Kompatibilitástörő változások a következőben: @azure/msal-browser@2

@azure/msal-browser@2 számos, a msal@1.x verzióhoz képest kompatibilitást megszakító változtatást tartalmaz. Ezek közül soknak el kell távolodnia az alkalmazástól, de van néhány, amely kódmódosítást igényel.

Az MsalModule.forRoot most három argumentumot vesz fel

Korábban a @azure/msal-angular a MsalModule.forRoot() segítségével két konfigurációs objektumot fogadott el: egyet az alapkönyvtárhoz, egyet pedig a @azure/msal-angular számára. Ezt úgy módosítottuk, hogy egy MSAL-példányt, valamint két Angular-specifikus konfigurációs objektumot fogadjon el.

  1. Az első argumentum az MSAL-példány. Ez megadható az MSAL-t példányosító gyárként, vagy az MSAL-példány konfigurációkkal együtt történő átadásával.
  2. A második argumentum egy MsalGuardConfiguration objektum, amely megadja a interactionType-t, valamint egy opcionális authRequest-t és egy opcionális loginFailedRoute-t.
  3. A harmadik argumentum egy MsalInterceptorConfiguration objektum, amely a interactionType, egy protectedResourceMap és egy opcionális authRequest értékeit tartalmazza. unprotectedResourceMap használata nem ajánlott.

További információt az MsalInterceptor és az MsalGuardkonfigurációs dokumentumában és konkrét dokumentációiban talál. Frissített mintáinkban példákat is láthat a konfigurációs objektumok átadására.

Logger

  • A logger most az MSAL-példány konfigurációján keresztül, a system.loggerOptions alatt van beállítva, amely egy loggerCallback, piiLoggingEnabled és logLevel elemet tartalmaz, egy logger példánya helyett. A logger beállítás dinamikusan is beállítható a használatával MsalService.setLogger(). logger documentation További információkért és használati mintaért tekintse meg a témakört.

API-módosítások

  • A acquireToken és login metódusok mostantól különböző kérésobjektumokat fogadnak paraméterként. Részletekért tekintse meg a msal.service.ts .
  • A közvetítési események mostantól csak sztringek helyett egy EventMessage objektumot bocsátanak ki. A megvalósítás módjára az Angular-mintában talál példát.
  • A Redirect metódusokat használó alkalmazásoknak az app.component.ts fájlban importálniuk kell a MsalRedirectComponent elemet és a bootstrapot a AppComponent mellett, amely az összes átirányítást kezeli. Az alkalmazások nem tudják ezt megtenni, ha implementálják a handleRedirectObservable metódust (és minden oldalbetöltésen futtatják), amely rögzíti az átirányítási műveletek eredményét. További részletekért tekintse meg az átirányítási dokumentációt .

MSAL Interceptor

  • További részletekért az aktuális MsalInterceptor konfigurálásáról, valamint a v1 és a v2 közötti különbségekről tekintse meg a MsalInterceptor-dokumentációt.

MSAL Guard

  • Az aktuális és a v1 és a v2 közötti különbségek konfigurálásával kapcsolatos további részletekért tekintse meg MsalGuard.

Accounts

  • Javasoljuk, hogy iratkozzon fel a inProgress$ Observable-ra, és szűrjön a(z) InteractionStatus.None értékre, mielőtt lekéri a fiókadatokat. Ez biztosítja, hogy az összes interakció befejeződjön a fiókadatok lekérése előtt. Ebből a használatból példát talál a példánkban .
  • A fiókok lekérésekor javasoljuk az MSAL-példányon elérhető getAccountByHomeId() és getAccountByLocalId() használatát. getAccount() most már getAccountByUsername(), de csak másodlagos lehetőségként javasolt, mivel kevésbé megbízható lehet, és kizárólag kényelmi célokat szolgál.
  • getAllAccounts() az MSAL-példányban is elérhető. A fiókmódszerekkel kapcsolatos további részletekért tekintse meg a @azure/msal-browser.
  • Emellett most már lekérheti és beállíthatja az aktív fiókokat a getActiveAccount() és setActiveAccount() használatával. További információért tekintse meg a gyakori kérdéseket .

Angular 9+ és rxjs@6

Az MSAL Angular mostantól azt feltételezi, hogy az alkalmazásod a @angular/core@>=9, @angular/common@>=9 és rxjs@6 használatával készült. Az MSAL Angular v1-hez rxjs-compat hasonlóan ez sem kötelező.

Steps:

  1. Telepítse az Angular és rxjs újabb verzióit: npm install @angular/core @angular/common rxjs
  2. Távolítsa el a(z) rxjs-compat elemet (feltéve, hogy más könyvtáraknak nincs rá szükségük): npm uninstall rxjs-compat

Samples

Az Angular 9, 10, 11 és 12 alapszintű mintaalkalmazásokat hoztunk létre. Ezek a minták az alapkonfigurációt és a használatot mutatják be, és fokozatosan fejlesztik és bővítik.

Az MSAL Angular v2-minták és a bemutatott funkciók listáját itt találja.

  • Last updated on