Yolları korumak için MSAL Guard kullanma

MSAL Angular, korumalı yola erişmeden önce yolları korumak ve kimlik doğrulaması gerektirmek için kullanabileceğiniz bir sınıf sağlar MsalGuard. Bu belge, yapılandırma ve kullanırken MsalGuarddikkat edilmesi gerekenler hakkında daha fazla bilgi sağlar.

MsalGuard , kullanıcı deneyimini geliştirmek için kullanabileceğiniz bir kolaylık sınıfıdır, ancak güvenlik için bu sınıfa güvenilmemelidir. Saldırganlar istemci tarafı korumaları potansiyel olarak aşabilir; bu nedenle sunucunun, kullanıcının erişmemesi gereken hiçbir veriyi döndürmemesini sağlamalısınız.

Ayrıca belirli gereksinimleri karşılayan bir yol koruyucuya da ihtiyacınız olabilir. MsalGuard tüm bu ihtiyaçları karşılamıyorsa, kendi korumanızı yazmanızı öneririz.

Yapılandırmalar

app.module.ts ve app-routing.module.ts içinde MsalGuard yapılandırma

MsalGuard, yapılandırmasıyla birlikte app.module.ts içinde uygulamanıza bir sağlayıcı olarak eklenebilir. İçe aktarma işlemleri, bir MSAL örneğinin yanı sıra Angular’a özgü iki yapılandırma nesnesini de alır. İkinci bağımsız değişken, interactionType için değerleri, isteğe bağlı bir authRequest ve isteğe bağlı bir loginFailedRoute içeren bir MsalGuardConfiguration nesnesidir.

MsalGuard daha sonra app-routing.module.ts yolları korumak için kullanılır. Aşağıdaki kod örneği, MsalGuard öğesinin Profile yoluna eklenmesini gösterir. Profile yolunu korumak, kullanıcının Login düğmesini kullanarak oturum açmaması durumunda bile Profile yoluna erişmeye çalıştığında veya Profile düğmesine tıkladığında, MsalGuard öğesinin Profile sayfasını göstermeden önce kullanıcıdan açılır pencere ya da yeniden yönlendirme yoluyla kimlik doğrulaması yapmasını istemesi anlamına gelir.

Yapılandırmanız aşağıdaki gibi görünebilir. Uygulamanız için MSAL Angular'ı yapılandırmanın diğer yolları hakkında yapılandırma belgemize ve yönlendirmeye yönelik nesne ve arabirimler hakkında MsalConfiguration daha fazla bilgi için aşağıdaki bölümlere bakın.

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { MsalModule, MsalRedirectComponent, MsalGuard } from '@azure/msal-angular'; // Import MsalInterceptor
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            // MSAL Configuration
        }), {
            // MSAL Guard Configuration
            interactionType: InteractionType.Redirect,
            authRequest: {
                scopes: ['user.read']
            },
            loginFailedRoute: '/login-failed'
        }, {
            // MSAL Interceptor Configurations
        }),
        AppRoutingModule
    ],
    providers: [
        // ...
        MsalGuard
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { MsalGuard } from '@azure/msal-angular';

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        path: '',
        component: HomeComponent
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Etkileşim Türü

Etkileşim türünü ayarlamak, öğesinin MsalGuard etkileşimli olarak nasıl oturum açma isteğinde bulunacağını belirler. InteractionType, @azure/msal-browser içinden içeri aktarılabilir ve Popup veya Redirect olarak ayarlanabilir.

İsteğe bağlı authRequest

İsteğe bağlı authRequest , gerekli olmayan gelişmiş bir özelliktir. Ancak, kapsamlar için onayın önceden alınabilmesi amacıyla scopes ile MsalGuardConfiguration üzerinde authRequest ayarını yapmanızı öneririz. scopes için önceden onay verilmemişse izin kapsamları aşamalı olarak elde edilebilir. Bu, uygulama kullanıcınıza birden çok kez onay iletişim kutusu sunulmasına neden olabilir.

Kapsamların önceden onaylanması yukarıdaki kod örneklerinde ve örneklerimizde gösterilmiştir.

İstek nesnesi için tüm olası parametreler burada bulunabilir: PopupRequest ve RedirectRequest.

Giriş Başarısız Oldu Rotası

loginFailedRoute dizesi MsalGuardConfiguration üzerinde ayarlanabilir. Oturum açma gerekiyorsa ve başarısız olursa, MsalGuard bu rotaya yönlendirilir.

Yapılandırma ve uygulama yönlendirme modülünde uygulama örnekleri için Angular örneğine bakın.

Temel tür farklılıkları nedeniyle, CanLoad arabirimini kullanan Angular 9 uygulamalarında hata durumunda yönlendirme kullanılamadığını unutmayın.

Interfaces

canActivate'a ek olarak, MsalGuard ayrıca canActivateChild ve canLoad'ü de uygular; bunlar app-routing.module.ts içindeki rota tanımlarınıza eklenebilir. Bunları eski MSAL Angular v2 Angular 11 örnek uygulamamızda ve aşağıda görebilirsiniz. Arabirimler hakkında daha fazla bilgi için angular belgelerine bakın.

const routes: Routes = [
    {
        path: 'profile',
        canActivateChild: [MsalGuard],
        children: [
        {
            path: '',
            component: ProfileComponent
        },
        {
            path: 'detail',
            component: DetailComponent
        }
        ]
    },
    { 
        path: 'lazyLoad', 
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
        canLoad: [MsalGuard]
    },
];

MSAL Guard kullanırken dikkat edilmesi gerekenler

Giriş sayfasında MSAL Guard'ı kullanma

MsalGuard Kullanıcılardan uygulamanıza ulaştıklarında oturum açmalarının istenmesini istiyorsanız ilk sayfada ayarının yapılması önerimizdir. app.component.ts içindeki ngOnInit içinde login çağrısı yapmanızı önermiyoruz; çünkü bu, yeniden yönlendirmelerle döngü oluşmasına neden olabilir.

Ek önerilerimiz yönlendirme stratejinize bağlıdır ve aşağıdaki bölümlerde bulunabilir.

MSAL Guard'ı yol yönlendirme ile kullanma

Angular uygulamanızda PathLocationStrategy ve yönlendirmeleri kullanırken, yönlendirmeler için özel bir rota kullanmanızı öneririz; bu, döngü oluşmasını önlemeye yardımcı olur. Bu rota aynı zamanda sizin redirectUri öğeniz olmalı ve MsalGuard tarafından korunmamalıdır.

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        // Dedicated route for redirects
        path: 'auth', 
        component: MsalRedirectComponent
    },
    {
        path: '',
        component: HomeComponent
    }
];

PathLocationStrategy kullanırken, kullanıcıların uygulamanıza geldiklerinde oturum açmasını sağlamak için şunları öneririz:

  • İlk sayfanızda MsalGuard ayarlama
  • redirectUri öğenizi 'http://localhost:4200/auth' olarak ayarlayın.
  • Rotalarınıza bir 'auth' yolu eklemek, MsalRedirectComponent öğesini bileşen olarak ayarlamak (bu rota MsalGuard tarafından korunmamalıdır)
  • MsalRedirectComponent önyüklendiğinden emin olun
  • İsteğe bağlı olarak: tüm rotalarınızın korunmasını istiyorsanız MsalGuard öğesini tüm rotalarınıza ekleme

Angular Modules örneğimiz, PathLocationStrategy kullanır ve rotaların MsalGuard ile nasıl korunacağını gösterir.

MSAL Guard'ı hash tabanlı yönlendirme ile kullanma

HashLocationStrategy bileşenini Angular uygulamanızla kullanırken, Microsoft Entra ID kimlik doğrulama kodu yanıtını hash bölümünde döndürdüğünde Angular yönlendiricisinin tetiklenmesini önlemek için app-routing.module.ts dosyanızda yer tutucu rotalar (/code gibi) ayarlamanızı önemle öneririz; aksi takdirde, bunu yapmazsanız kimlik doğrulamayı tamamlarken sorun yaşayabilirsiniz. Bu yer tutucu rotalar MsalGuard ile korunmamalı ve etkileşimi tetikleyen veya sayfa yüklenirken korumalı API çağrılarını başlatan bir bileşene işaret etmemelidir.

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [MsalGuard]
  },
  {
    // Needed for hash routing
    path: 'code',
    component: HomeComponent
  },
  {
    path: '',
    component: HomeComponent
  }
];

redirectUri MSAL Yapılandırması'ndaki de giriş sayfasına ayarlanmalıdır.

HashLocationStrategy kullanırken, kullanıcıların uygulamanıza geldiklerinde oturum açmasını sağlamak için şunları öneririz:

  • İlk sayfanızda MsalGuard ayarlama
  • Yer tutucu rotalarda (örn. /code, /error) MsalGuard ayarlamama
  • MsalRedirectComponent önyüklendiğinden emin olun
  • İsteğe bağlı olarak: tüm rotalarınızın korunmasını istiyorsanız diğer tüm rotalarınıza MsalGuard eklemek

Daha eski MSAL Angular v2 Angular 11 örneğimize göz atın; bu örnek HashLocationStrategy kullanır ve MsalGuard ile rotaların nasıl korunacağını gösterir.

msal-angular v1'den v2'ye yapılan değişiklikler

  • Yapılandırma: MsalAngularConfiguration kullanım dışı bırakıldı ve artık çalışmıyor. MsalGuard yapılandırması artık MsalGuardConfiguration aracılığıyla gerçekleştirilir.
  • Arabirimler: MsalGuard, CanActivate öğesine ek olarak artık CanActivateChild ve CanLoad öğelerini de uygulamaktadır. Daha fazla ayrıntı için yukarıdaki Interfaces bölümüne bakın.
  • Başarısızlık durumunda yeniden yönlendirme: MsalGuard yapılandırması artık yapılandırılabilen bir loginFailedRoute içeriyor. Ayrıntılar için yukarıdaki bölüme loginFailedRoute bakın.
  • Last updated on