Memutakhirkan MSAL Angular dari v1 ke v2

MSAL Angular v2 menghadirkan pembungkus Angular kami agar selaras dengan versi terbaru MSAL Common, serta dengan dukungan bawaan untuk Angular versi modern (9 - 12) dan rxjs (6).

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

Dokumentasi khusus untuk MSAL Angular v2 dapat ditemukan di sini.

Installation

Perubahan mendasar pertama pada MSAL Angular v2 adalah bahwa paket ini tidak lagi menggunakan paket inti msal, tetapi membungkus paket @azure/msal-browser sebagai dependensi peer.

Pertama, hapus instalan versi MSAL sebelumnya yang saat ini sedang digunakan.

Untuk menginstal @azure/msal-browser dan @azure/msal-angular:

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

Memutus perubahan dalam @azure/msal-browser@2

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

MsalModule.forRoot kini menerima tiga argumen

Sebelumnya, @azure/msal-angular menerima dua objek konfigurasi melalui MsalModule.forRoot(), satu untuk pustaka inti, dan satu untuk @azure/msal-angular. Ini telah diubah agar menerima sebuah instans MSAL, serta dua objek konfigurasi yang khusus untuk Angular.

1. Argumen pertama adalah instans MSAL. Ini dapat disediakan sebagai fungsi pabrik yang membuat instance MSAL, atau dengan meneruskan instance MSAL beserta konfigurasinya.
2. Argumen kedua adalah sebuah objek MsalGuardConfiguration, yang menentukan interactionType serta authRequest opsional dan loginFailedRoute opsional.
3. Argumen ketiga adalah MsalInterceptorConfiguration objek, yang berisi nilai untuk interactionType, , protectedResourceMapdan opsional authRequest. unprotectedResourceMap sudah tidak digunakan lagi.

Lihat dokumen konfigurasi dan dokumen khusus kami untuk MsalInterceptor dan MsalGuard untuk informasi selengkapnya. Anda juga dapat melihat sampel kami yang diperbarui untuk contoh cara meneruskan objek konfigurasi ini.

Logger

• logger sekarang diatur melalui konfigurasi untuk instans MSAL, dalam system.loggerOptions, yang mencakup loggerCallback, piiLoggingEnabled, dan logLevel, alih-alih instans dari logger. logger juga dapat diatur secara dinamis dengan menggunakan MsalService.setLogger(). Lihat logger documentation untuk informasi selengkapnya dan contoh untuk cara penggunaan.

Perubahan API

• Metode acquireToken dan login sekarang mengambil objek permintaan yang berbeda sebagai parameter. Lihat msal.service.ts untuk detailnya.
• Event broadcast sekarang menghasilkan objek EventMessage, bukan lagi hanya string. Lihat sampel Angular untuk contoh cara mengimplementasikan.
• Aplikasi yang menggunakan metode Redirect harus mengimpor MsalRedirectComponent dan melakukan bootstrap bersama AppComponent di app.component.ts, yang akan menangani semua pengalihan. Aplikasi yang tidak dapat melakukan hal ini harus menerapkan metode handleRedirectObservable (dan menjalankannya pada setiap pemuatan halaman), yang akan menangani hasil operasi pengalihan. Lihat dokumentasi pengalihan untuk detail selengkapnya.

Pencegat MSAL

• Silakan lihat dokumentasi MsalInterceptor kami untuk detail lebih lanjut tentang cara mengonfigurasi MsalInterceptor saat ini, serta perbedaan antara v1 dan v2.

Penjaga MSAL

• Silakan lihat dokumentasi MsalGuard kami untuk detail lebih lanjut tentang cara mengonfigurasi MsalGuardsaat ini, serta perbedaan antara v1 dan v2.

Accounts

• Kami menyarankan untuk berlangganan ke observable inProgress$ dan memfilter InteractionStatus.None sebelum mengambil informasi akun. Ini memastikan bahwa semua interaksi telah selesai sebelum mendapatkan informasi akun. Lihat sampel kami untuk contoh penggunaan ini.
• Saat mendapatkan akun, sebaiknya gunakan getAccountByHomeId() dan getAccountByLocalId(), tersedia pada instans MSAL. getAccount() sekarang getAccountByUsername(), tetapi harus menjadi pilihan sekunder, karena mungkin kurang dapat diandalkan dan hanya untuk kenyamanan.
• getAllAccounts() juga tersedia pada instans MSAL. Silakan lihat dokumentasi untuk @azure/msal-browser untuk detail lebih lanjut tentang metode akun.
• Selain itu, kini Anda dapat mengambil dan menetapkan akun aktif menggunakan getActiveAccount() dan setActiveAccount(). Lihat FAQ kami untuk informasi selengkapnya.

Angular 9+ dan rxjs@6

MSAL Angular sekarang mengharapkan bahwa aplikasi Anda dibangun dengan @angular/core@>=9, , @angular/common@>=9rxjs@6. Seperti halnya MSAL Angular v1, rxjs-compat tidak 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 9, 10, 11, dan 12. Sampel ini menunjukkan konfigurasi dan penggunaan dasar, dan akan ditingkatkan dan ditambahkan ke secara bertahap.

Lihat di sini untuk daftar sampel MSAL Angular v2 dan fitur yang ditunjukkan.