MSAL Angular v1'den v2'ye yükseltme

MSAL Angular v2, Angular sarmalayıcımızı MSAL common'ın en son sürümüyle güncel hale getirir ve modern Angular (9 - 12) ile rxjs (6) sürümleri için yerleşik destek sunar.

Bu kılavuz, mevcut bir uygulamayı v1'den @azure/msal-angular v2'ye geçirmek için gereken değişiklikleri gösterir.

MSAL Angular v2'ye özel belgelere buradan ulaşabilirsiniz.

Yükleme

MSAL Angular v2’deki ilk temel değişiklik, artık çekirdek msal paketini kullanmaması, bunun yerine @azure/msal-browser paketini eş bağımlılık olarak sarmalamasıdır.

İlk olarak, şu anda kullanılmakta olan MSAL'nin önceki sürümlerini kaldırın.

@azure/msal-browser ve @azure/msal-angular yüklemek için:

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

Değişikliklerde uyum sorunları @azure/msal-browser@2

@azure/msal-browser@2, msal@1.x sürümünden gelen bir dizi geriye dönük uyumluluğu bozan değişiklik içerir. Bunların birçoğu uygulamanızdan soyutlanmalıdır, ancak kod değişiklikleri gerektiren birkaç tane vardır.

MsalModule.forRoot artık üç argüman alıyor

Daha önce, @azure/msal-angular, MsalModule.forRoot() aracılığıyla biri çekirdek kitaplık için, diğeri @azure/msal-angular için olmak üzere iki yapılandırma nesnesi kabul ediyordu. Bu, bir MSAL örneğini ve Angular’a özel iki yapılandırma nesnesini parametre olarak kabul edecek şekilde değiştirilmiştir.

1. İlk bağımsız değişken MSAL örneğidir. Bu, MSAL örneği oluşturan bir fabrika olarak veya MSAL örneğinin yapılandırmalarla birlikte geçirilmesiyle sağlanabilir.
2. İkinci bağımsız değişken, MsalGuardConfigurationinteractionType öğesini, ayrıca isteğe bağlı authRequest ve isteğe bağlı loginFailedRoute öğelerini belirten bir nesnedir.
3. Üçüncü bağımsız değişken, interactionType, bir protectedResourceMap ve isteğe bağlı bir authRequest için değerleri içeren bir MsalInterceptorConfiguration nesnesidir. unprotectedResourceMap kullanım dışı bırakıldı.

Daha fazla bilgi için MsalInterceptor ve MsalGuard için yapılandırma belgemize ve belirli belgelerimize bakın. Bu yapılandırma nesnelerini geçirme örnekleri için güncelleştirilmiş örneklerimizi de görebilirsiniz.

Logger

• logger, artık system.loggerOptions altındaki MSAL örneği yapılandırmaları üzerinden, bir logger örneği yerine loggerCallback, piiLoggingEnabled ve logLevel içerecek şekilde ayarlanır. logger, kullanılarak MsalService.setLogger()dinamik olarak da ayarlanabilir. logger documentation Daha fazla bilgi ve kullanım örneği için bkz.

API değişiklikleri

• acquireToken ve login yöntemleri artık farklı istek nesnelerini parametre olarak alır. Ayrıntılar için msal.service.ts bakın.
• Yayın olayları artık yalnızca dizeler yerine bir EventMessage nesne yayar. Uygulama örneği için Angular örneğine bakın.
• Redirect yöntemlerini kullanan uygulamalar, tüm yönlendirmeleri işleyecek olan MsalRedirectComponent ve bootstrap’i, AppComponent ile birlikte app.component.ts dosyasında içe aktarmalıdır. Uygulamalar bunu yapamıyorsa, yeniden yönlendirme işlemlerinin handleRedirectObservable sonucunu yakalayacak yöntemi uygulamalıdır (ve her sayfa yükünde çalıştırmalıdır). Diğer ayrıntılar için yeniden yönlendirme belgelerine bakın.

MSAL Önleyici

• Daha fazla bilgi için, mevcut MsalInterceptor yapılandırması ve v1 ile v2 arasındaki farklar hakkında MsalInterceptor belgesini inceleyin.

MSAL Guard

• Geçerli MsalGuard yapılandırması ve v1 ile v2 arasındaki farklar hakkında daha fazla bilgi için lütfen MsalGuard belgemizi inceleyin.

Accounts

• Hesap bilgilerini almadan önce, inProgress$ gözlemlenebilirine abone olmanızı ve InteractionStatus.None için filtreleme yapmanızı öneririz. Bu, hesap bilgilerini almadan önce tüm etkileşimlerin tamamlanmasını sağlar. Bu kullanım örneği için örneğimize bakın.
• Hesapları alırken, MSAL örneğinde bulunan getAccountByHomeId() ve getAccountByLocalId() öğelerini kullanmanızı öneririz. getAccount() şimdi getAccountByUsername()ise, ancak daha az güvenilir olabileceği ve yalnızca kolaylık sağlamak için olduğu için ikincil bir seçenek olmalıdır.
• getAllAccounts() MSAL örneğinde de kullanılabilir. Hesap yöntemleri hakkında daha fazla bilgi için lütfen @azure/msal-browser bakın.
• Ayrıca artık getActiveAccount() ve setActiveAccount() kullanarak etkin hesapları alabilir ve ayarlayabilirsiniz. Daha fazla bilgi için SSS bölümüne bakın.

Angular 9+ ve rxjs@6

MSAL Angular artık uygulamanızın @angular/core@>=9, @angular/common@>=9 ve rxjs@6 ile derlenmiş olmasını bekliyor. MSAL Angular v1'de olduğu gibi, rxjs-compat gerekli değildir.

Adımlar:

1. Angular ve rxjs'nin daha yeni sürümlerini yükleyin: npm install @angular/core @angular/common rxjs
2. Kaldır rxjs-compat (diğer kitaplıklar için gerekli olmadığı varsayılarak): npm uninstall rxjs-compat

Samples

Angular 9, 10, 11 ve 12 için temel örnek uygulamaları bir araya koyduk. Bu örnekler temel yapılandırmayı ve kullanımı gösterir ve artımlı olarak geliştirilip eklenir.

MSAL Angular v2 örneklerinin ve sunulan özelliklerin listesi için buraya bakın.