Migrasi dari MSAL Angular v0 ke v1

MSAL Angular v1 memperbarui pembungkus Angular kami agar selaras dengan versi terbaru inti MSAL, serta menghadirkan dukungan bawaan untuk Angular (6+) dan rxjs (6) versi modern.

Panduan ini akan menunjukkan perubahan yang diperlukan untuk memigrasikan aplikasi yang ada dari @azure/msal-angular@0.x ke @azure/msal-angular@1.0.0.

Daftar terperinci perubahan dapat ditemukan di CHANGELOG.

Dokumentasi untuk MSAL Angular v1 dapat ditemukan di sini.

Installation

Perubahan mendasar pertama pada MSAL Angular adalah bahwa paket inti msal tidak lagi menjadi dependensi reguler, dan sebaliknya dependensi serekan. Ini berarti aplikasi Anda juga harus menyertakan msal sebagai dependensi normal, alih-alih mengandalkan MSAL Angular untuk menyertakannya. Ini memungkinkan aplikasi Anda untuk menggunakan versi terbaru (disarankan msal ), atau Anda dapat memilih versi/rentang kustom, sambil masih menggunakan versi terbaru MSAL Angular itu sendiri. Perlu diperhatikan, Anda tetap harus menyediakan versi yang memenuhi rentang semver yang ditentukan untuk dependensi peer, jika tidak, MSAL Angular mungkin tidak berfungsi sebagaimana mestinya.

Langkah-langkah:

  1. Pasang msal dan @azure/msal-angular: npm install msal@beta @azure/msal-angular@beta.

Memutus perubahan di MSAL.js v1

msal@1 mencakup sejumlah perubahan yang bersifat breaking dibandingkan dengan msal@0.2.x. Banyak dari ini harus diabstraksi jauh dari aplikasi Anda, tetapi ada beberapa yang akan memerlukan perubahan kode.

MsalModule.forRoot sekarang menerima dua argumen.

Sebelumnya, MSAL Angular menerima satu objek konfigurasi melalui MsalModule.forRoot(). Agar lebih selaras dengan msal@1 dan memberikan fleksibilitas yang lebih besar untuk MSAL Angular, hal ini dibagi menjadi dua objek: satu untuk pustaka inti dan satu untuk wrapper.

Langkah-langkah:

  1. Argumen pertama adalah objek konfigurasi, yang merupakan objek yang sama Configuration dengan yang akan Anda teruskan ke msal.
  2. Argumen kedua adalah MsalAngularConfiguration object, yang berisi nilai untuk consentScopes, , popUpextraQueryParameters, dan protectedResourceMap. unprotectedResources sudah tidak digunakan lagi.

Lihat sampel untuk contoh cara meneruskan objek konfigurasi ini.

Penanganan kesalahan mode AOT

Objek konfigurasi baru msal mengambil fungsi untuk system.logger dan framework.protectedResourceMap, yang tidak berfungsi dengan baik saat berjalan dalam aot mode. Sekarang ada dua solusi yang tersedia:

  1. protectedResourceMap telah dipindahkan ke MsalAngularConfiguration objek, dan dapat diteruskan sebagai [string, string[]][] atau sebagai Map. framework.protectedResourceMap masih berfungsi, tetapi tidak digunakan lagi. Lihat sampel yang diperbarui untuk penggunaan.
  2. logger sekarang dapat diatur secara dinamis dengan menggunakan MsalService.setLogger(). Lihat sampel yang diperbarui untuk penggunaan.

Perubahan mencolok lainnya

  • Metode acquireToken dan login sekarang mengambil satu AuthenticationParameters objek sebagai parameter.
  • getUser() sekarang getAccount().
  • Peristiwa siaran sekarang memancarkan objek, bukan hanya string.
  • Aplikasi yang menggunakan Redirect metode harus menerapkan handleRedirectCallback metode (dan menjalankannya pada setiap pemuatan halaman), yang akan menangkap hasil operasi pengalihan. Lihat sampel Angular untuk contoh cara mengimplementasikan.

Angular 6+ dan rxjs@6

MSAL Angular sekarang mengharapkan bahwa aplikasi Anda dibangun dengan @angular/core@>=6, , @angular/common@>=6rxjs@6. Dan rxjs-compat tidak lagi diperlukan.

Langkah-langkah:

  1. Instal versi Angular dan rxjs yang lebih baru: npm install @angular/core @angular/common rxjs
  2. Copot pemasangan rxjs-compat (jika tidak diperlukan untuk pustaka lain): npm uninstall rxjs-compat

Sampel

Kami telah mengumpulkan aplikasi sampel dasar untuk Angular 6, 7, 8, dan 9. Sampel ini menunjukkan konfigurasi dan penggunaan dasar, dan akan ditingkatkan dan ditambahkan ke secara bertahap. Kami juga berencana untuk menyertakan lebih banyak sampel untuk lebih banyak skenario dan kasus penggunaan.

  • Last updated on