MSAL Guard gebruiken om routes te beveiligen

MSAL Angular biedt MsalGuard, een klasse die u kunt gebruiken om routes te beveiligen en verificatie te vereisen voordat u toegang krijgt tot de beveiligde route. Dit document bevat meer informatie over het configureren en overwegingen bij het gebruik van de MsalGuard.

MsalGuard is een handige klasse die u kunt gebruiken om de gebruikerservaring te verbeteren, maar deze moet niet worden vertrouwd voor beveiliging. Aanvallers kunnen mogelijk beveiliging aan de clientzijde omzeilen en u moet ervoor zorgen dat de server geen gegevens retourneert waartoe de gebruiker geen toegang mag krijgen.

Mogelijk hebt u ook een routebeveiliging nodig die aan specifieke behoeften voldoet. We raden u aan uw eigen guard te schrijven als MsalGuard niet aan al deze behoeften voldoet.

Configuraties

Het configureren van de MsalGuard in de app.module.ts en app-routing.module.ts

De MsalGuard kan worden toegevoegd aan uw toepassing als provider in de app.module.ts, met de configuratie ervan. De import neemt een exemplaar van MSAL en twee Angular-specifieke configuratieobjecten in beslag. Het tweede argument is een MsalGuardConfiguration-object, dat de waarden bevat voor interactionType, een optionele authRequest en een optionele loginFailedRoute.

De MsalGuard wordt vervolgens gebruikt om routes in de app-routing.module.ts te beveiligen. In het onderstaande codevoorbeeld ziet u hoe de MsalGuard wordt toegevoegd aan de Profile-route. Het beveiligen van de Profile route betekent dat, zelfs als een gebruiker zich niet aanmeldt met behulp van de Login knop, als hij de Profile route probeert te openen of op de Profile knop klikt, de MsalGuard gebruiker wordt gevraagd zich te verifiëren via pop-up of omleiding voordat de Profile pagina wordt weergegeven.

Uw configuratie ziet er mogelijk uit zoals hieronder. Zie ons configuratie-document op andere manieren om MSAL Angular voor uw app te configureren en de onderstaande secties voor meer informatie over het MsalConfiguration object en de interfaces voor routering.

// 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 { }

Interactietype

Als u het interactietype instelt, wordt bepaald hoe de MsalGuard gebruiker interactief om aanmelding wordt gevraagd. De InteractionType kan worden geïmporteerd uit @azure/msal-browser en ingesteld op Popup of Redirect.

Optionele authRequest

De optionele authRequest functie is een geavanceerde functie die niet vereist is. We raden u echter aan authRequest in te stellen op de MsalGuardConfiguration met scopes, zodat vooraf toestemming voor de scopes kan worden verkregen. Als niet vooraf toestemming wordt gegeven voor scopes, kunnen scopes incrementeel worden verkregen. Dit kan ertoe leiden dat een toestemmingsdialoog meerdere keren aan uw app-gebruiker wordt gepresenteerd.

Toestemming voor scopes vooraf wordt geïllustreerd in de codevoorbeelden hierboven en in onze voorbeelden.

Alle mogelijke parameters voor het aanvraagobject vindt u hier: PopupRequest en RedirectRequest.

Aanmelding mislukte route

De loginFailedRoute tekenreeks kan worden ingesteld op MsalGuardConfiguration. De MsalGuard zal naar deze route doorsturen als inloggen vereist is en dit mislukt.

Zie het Angular-voorbeeld voor voorbeelden van het implementeren ervan in de configuratie - en app-routeringsmodule.

Houd er rekening mee dat omleiden bij fouten niet beschikbaar is voor Angular 9-toepassingen die gebruikmaken van de CanLoad interface vanwege verschillen in basistypen.

Interfaces

Naast canActivate, MsalGuard implementeert canActivateChild en canLoad, en deze kunnen worden toegevoegd aan uw routedefinities in app-routing.module.ts. U kunt zien dat deze worden gebruikt in onze oudere MSAL Angular v2 Angular 11-voorbeeldtoepassing, en hieronder. Zie de Angular-documenten voor meer informatie over interfaces.

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]
    },
];

Overwegingen bij het gebruik van MSAL Guard

MsAL Guard gebruiken op de startpagina

Het instellen van de MsalGuard initiële pagina is onze aanbeveling als u wilt dat gebruikers worden gevraagd zich aan te melden wanneer ze uw toepassing bereiken. We raden niet aan om login in de ngOnInit in app.component.ts aan te roepen, omdat dit redirectlussen kan veroorzaken.

Onze aanvullende aanbevelingen zijn afhankelijk van uw routeringsstrategie en vindt u in de onderstaande secties.

MSAL Guard gebruiken met padgebaseerde routering

Wanneer u de PathLocationStrategy en omleidingen met uw Angular-app gebruikt, wordt u aangeraden een speciale route te gebruiken voor omleidingen, waardoor lusing wordt voorkomen. Deze route moet ook uw redirectUri zijn en mag niet worden beveiligd door de MsalGuard.

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

Als u gebruikers wilt aanmelden bij het bereiken van uw app, wordt u aangeraden bij gebruik van de PathLocationStrategyapp het volgende te doen:

  • De instelling van de MsalGuard op uw beginpagina
  • Stel uw redirectUri in op 'http://localhost:4200/auth'
  • 'auth' Een pad toevoegen aan uw routes, het MsalRedirectComponent instellen als het onderdeel (deze route mag niet worden beveiligd door de MsalGuard)
  • Ervoor zorgen dat de MsalRedirectComponent is geïnitialiseerd
  • Optioneel: toevoegen MsalGuard aan al uw routes als u al uw routes wilt beveiligen

Ons Angular Modules-voorbeeld maakt gebruik van de PathLocationStrategy en laat zien hoe u routes beveiligt met de MsalGuard.

MSAL Guard gebruiken met hash-routering

Wanneer u de HashLocationStrategy Angular-app gebruikt, raden we u ten zeerste aan om tijdelijke aanduidingen (zoals/code) in uw app-routing.module.ts in te stellen om te voorkomen dat de Angular-router wordt geactiveerd wanneer Microsoft Entra ID het antwoord op de verificatiecode in de hash retourneert, omdat u mogelijk problemen ondervindt bij het voltooien van verificatie zonder dit te doen. Deze tijdelijke aanduidingen voor routes mogen niet worden beveiligd door de MsalGuarden mogen niet verwijzen naar een onderdeel dat interactie activeert of beveiligde API-aanroepen maakt bij het laden van pagina's.

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

De redirectUri in de MSAL-configuratie moet ook worden ingesteld op de startpagina.

Als u gebruikers wilt aanmelden bij het bereiken van uw app, wordt u aangeraden bij gebruik van de HashLocationStrategyapp het volgende te doen:

  • De instelling van de MsalGuard op uw beginpagina
  • MsalGuard niet instellen op plaatshouderroutes (bijvoorbeeld /code, /error)
  • Ervoor zorgen dat de MsalRedirectComponent is geïnitialiseerd
  • Optioneel: toevoegen MsalGuard aan alle rest van uw routes als u al uw routes wilt beveiligen

Bekijk ons oudere MSAL Angular v2 Angular 11-voorbeeld, dat gebruikmaakt van de HashLocationStrategy en laat zien hoe u routes beveiligt met MsalGuard.

Wijzigingen van msal-angular v1 in v2

  • Configuratie: MsalAngularConfiguration is afgeschaft en werkt niet meer. Het configureren van de MsalGuard gebeurt nu via de MsalGuardConfiguration.
  • Interfaces: MsalGuard implementeert CanActivateChild en CanLoad naast CanActivate. Zie de bovenstaande Interfaces sectie voor meer informatie.
  • Omleiding bij fout: MsalGuard configuratie heeft nu een loginFailedRoute configuratie die kan worden geconfigureerd. Zie de bovenstaande sectie over de loginFailedRoute voor meer informatie.
  • Last updated on