Upgrade z MSAL Angular v1 na v2

MSAL Angular v2 aktualizuje náš obal pro Angular na nejnovější verzi MSAL Common a přináší integrovanou podporu moderních verzí Angularu (9–12) a RxJS (6).

Tato příručka předvede změny potřebné k migraci existující aplikace z @azure/msal-angular verze 1 na verzi 2.

Dokumentaci konkrétně pro MSAL Angular v2 najdete tady.

Instalace

První zásadní změnou v MSAL Angular v2 je, že již nepoužívá základní balíček msal, ale využívá balíček @azure/msal-browser jako partnerskou závislost.

Nejprve odinstalujte všechny předchozí verze knihovny MSAL, které se aktuálně používají.

Chcete-li nainstalovat @azure/msal-browser a @azure/msal-angular:

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

Zásadní změny v @azure/msal-browser@2

@azure/msal-browser@2 obsahuje řadu zásadních změn od msal@1.x. Mnohé z nich by měly být abstrahovány mimo vaši aplikaci, ale existuje několik, které budou vyžadovat změny kódu.

MsalModule.forRoot teď přebírá tři argumenty.

Dříve akceptoval @azure/msal-angular dva objekty konfigurace prostřednictvím MsalModule.forRoot(), jeden pro základní knihovnu a jeden pro @azure/msal-angular. Toto bylo změněno tak, aby to přijímalo instanci MSAL a také dva konfigurační objekty specifické pro Angular.

  1. Prvním argumentem je instance MSAL. To lze poskytnout prostřednictvím továrny, která vytvoří instanci MSAL, nebo předáním instance MSAL spolu s konfigurací.
  2. Druhý argument je MsalGuardConfiguration objekt, který určuje interactionType , stejně jako volitelné authRequest a volitelné loginFailedRoute.
  3. Třetí argument je MsalInterceptorConfiguration objekt, který obsahuje hodnoty pro interactionType, protectedResourceMapa a volitelné authRequest. unprotectedResourceMap byl označen za zastaralý.

Další informace najdete v naší dokumentaci ke konfiguraci a konkrétní dokumentaci pro MsalInterceptor a MsalGuard . Příklady předání těchto konfiguračních objektů najdete také v našich aktualizovaných ukázkách .

Logger

  • logger se nyní nastavuje prostřednictvím konfigurací pro instanci MSAL v části system.loggerOptions, která zahrnuje loggerCallback, piiLoggingEnabled a logLevel, namísto instance logger. Lze logger také nastavit dynamicky pomocí MsalService.setLogger(). Další informace najdete v logger documentation a ukázku použití v ukázce.

Změny rozhraní API

  • Metody acquireToken a login nyní jako parametry přijímají různé objekty žádosti. Podrobnosti najdete v msal.service.ts .
  • Události všesměrového vysílání teď generují EventMessage objekt místo jen řetězců. Příklad implementace najdete v ukázce Angular .
  • Aplikace používající metody Redirect by měly importovat MsalRedirectComponent a inicializovat je spolu s AppComponent v souboru app.component.ts, který bude zpracovávat všechna přesměrování. Aplikace to nemůžou provést, by měly implementovat metodu handleRedirectObservable (a spustit ji při každém načtení stránky), která zachytí výsledek operací přesměrování. Další podrobnosti najdete v dokumentaci k přesměrování .

Průsečík MSAL

MSAL Guard

  • Podrobnější informace o konfiguraci aktuálního MsalGuard a o rozdílech mezi v1 a v2 naleznete v našem dokumentu MsalGuard.

Accounts

  • Doporučujeme přihlásit odběr observable inProgress$ a před načtením informací o účtu filtrovat podle InteractionStatus.None. Tím se zajistí, že se všechny interakce dokončily před získáním informací o účtu. Příklad tohoto použití najdete v naší ukázce .
  • Při získávání účtů doporučujeme používat getAccountByHomeId() a getAccountByLocalId(), které jsou k dispozici v instanci MSAL. getAccount() je nyní getAccountByUsername(), ale měla by být sekundární volba, protože může být méně spolehlivé a je pouze pro pohodlí.
  • getAllAccounts() je také k dispozici v rámci instance MSAL. Další podrobnosti o metodách účtu najdete v dokumentaci@azure/msal-browser.
  • Kromě toho teď můžete pomocí getActiveAccount() a setActiveAccount() získat a nastavit aktivní účty. Další informace najdete v nejčastějších dotazech .

Angular 9+ a rxjs@6

MSAL Angular nyní očekává, že vaše aplikace je sestavena pomocí @angular/core@>=9, @angular/common@>=9, rxjs@6. Stejně jako u MSAL Angular v1 rxjs-compat se nevyžaduje.

Steps:

  1. Nainstalujte novější verze Angular a rxjs: npm install @angular/core @angular/common rxjs
  2. Odinstalujte rxjs-compat (za předpokladu, že není potřeba pro jiné knihovny): npm uninstall rxjs-compat

Ukázky

Sestavili jsme základní ukázkové aplikace pro Angular 9, 10, 11 a 12. Tyto ukázky demonstrují základní konfiguraci a využití a budou vylepšeny a přidány postupně.

Seznam ukázek MSAL Angular v2 a předváděných funkcí najdete zde.

  • Last updated on