Använda MSAL Guard för att skydda vägar

MSAL Angular tillhandahåller MsalGuard, en klass som du kan använda för att skydda vägar och kräva autentisering innan du kommer åt den skyddade vägen. Det här dokumentet innehåller mer information om hur du konfigurerar och överväger när du använder MsalGuard.

MsalGuard är en bekvämlighetsklass som du kan använda för att förbättra användarupplevelsen, men den bör inte användas för säkerhet. Angripare kan potentiellt komma runt skydd på klientsidan och du bör se till att servern inte returnerar några data som användaren inte ska komma åt.

Du kan också behöva en ruttvakt som hanterar specifika behov. Vi uppmuntrar dig att skriva din egen guard om MsalGuard inte uppfyller alla dessa behov.

Konfigurationer

Konfigurera MsalGuard i app.module.ts och app-routing.module.ts

MsalGuard kan läggas till i din applikation som provider i app.module.ts, med tillhörande konfiguration. Importen tar in en instans av MSAL, samt två Angular-specifika konfigurationsobjekt. Det andra argumentet är ett MsalGuardConfiguration objekt som innehåller värdena för interactionType, ett valfritt authRequestoch ett valfritt loginFailedRoute.

MsalGuard Används sedan för att skydda vägar i app-routing.module.ts. Kodexemplet nedan visar hur man lägger till MsalGuard i routen Profile. Att skydda rutten Profile innebär att även om en användare inte loggar in med knappen Login, kommer MsalGuard att uppmana användaren att autentisera sig via popup eller omdirigering innan sidan Profile visas, om användaren försöker komma åt rutten Profile eller klickar på knappen Profile.

Konfigurationen kan se ut som nedan. Se vårt konfigurationsdokument om andra sätt att konfigurera MSAL Angular för din app och avsnitten nedan för mer information om objektet och gränssnitten MsalConfiguration för routning.

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

Interaktionstyp

Om du anger interaktionstypen avgör du hur kommer MsalGuard att fråga interaktivt om inloggning. InteractionType Kan importeras från @azure/msal-browser och anges till Popup eller Redirect.

Valfri authRequest

Det valfria authRequest är en avancerad funktion som inte krävs. Vi rekommenderar dock att du anger authRequest på MsalGuardConfiguration med scopes så att samtycke kan inhämtas för behörigheterna på förhand. Om medgivande för scopes inte godkänns i förväg kan omfång erhållas stegvis. Detta kan leda till att en medgivandedialog visas för appanvändaren flera gånger.

Att ge samtycke till behörigheter i förväg illustreras i kodexemplen ovan och i våra exempel.

Alla möjliga parametrar för begärandeobjektet finns här: PopupRequest och RedirectRequest.

Rutt för misslyckad inloggning

Strängen loginFailedRoute kan ställas in på MsalGuardConfiguration. MsalGuard kommer att omdirigeras till den här routen om inloggning krävs men inloggningen misslyckas.

Se Angular-exemplet för exempel på hur du implementerar det i konfigurations- och approutningsmodulen.

Observera att omdirigering vid fel inte är tillgängligt för Angular 9-program som använder CanLoad gränssnittet på grund av skillnader i bastyp.

Interfaces

Förutom canActivate implementerar MsalGuard även canActivateChild och canLoad, och dessa kan läggas till i dina routningsdefinitioner i app-routing.module.ts. Du kan se dessa som används i vårt äldre MSAL Angular v2 Angular 11-exempelprogram, samt nedan. Mer information om gränssnitt finns i Angular-dokumenten.

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

Överväganden vid användning av MSAL Guard

Använda MSAL Guard på startsidan

Att ange MsalGuard på den inledande sidan är vår rekommendation om du vill att användarna ska uppmanas att logga in när de kommer till din applikation. Vi rekommenderar inte att du anropar login i ngOnInit , app.component.tseftersom detta kan orsaka loopning med omdirigeringar.

Våra ytterligare rekommendationer beror på din routningsstrategi och finns i avsnitten nedan.

Använd MSAL Guard med sökvägsbaserad routning

När du använder PathLocationStrategy och omdirigerar med din Angular-app rekommenderar vi att du använder en dedikerad väg för omdirigeringar, vilket hjälper till att förhindra loopning. Den här vägen bör också vara din redirectUri, och bör inte skyddas av MsalGuard.

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

Om du vill logga in användare när de når din app rekommenderar vi att du använder PathLocationStrategy:

  • Ställa in MsalGuard på din startsida
  • Ställ redirectUri in på 'http://localhost:4200/auth'
  • Lägga till en 'auth' sökväg till dina vägar och ange MsalRedirectComponent som komponent (den här vägen bör inte skyddas av MsalGuard)
  • Se till att MsalRedirectComponent är bootstrapped
  • Valfritt: lägga MsalGuard till i alla dina vägar om du vill att alla dina vägar ska skyddas

Vårt Exempel på Angular-moduler använder PathLocationStrategy och visar hur du skyddar vägar med MsalGuard.

Användning av MSAL Guard med hash-routning

När du använder HashLocationStrategy med din Angular-app rekommenderar vi starkt att du ställer in platshållarvägar (till exempel /code) i app-routing.module.ts för att förhindra att Angular-routern utlöses när Microsoft Entra ID returnerar autentiseringskodsvaret i hashen, eftersom det kan uppstå problem med att slutföra autentiseringen utan att göra det. Dessa platshållarvägar bör inte skyddas av MsalGuard, och bör inte peka på en komponent som utlöser interaktion eller gör skyddade API-anrop vid sidinläsning.

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

Det redirectUri i MSAL-konfigurationen bör också ställas in på startsidan.

Om du vill logga in användare när de når din app rekommenderar vi att du använder HashLocationStrategy:

  • Ställa in MsalGuard på din startsida
  • Ställer inte in MsalGuard på platshållarrutter (t.ex. /code, /error)
  • Se till att MsalRedirectComponent är bootstrapped
  • Alternativt: lägga MsalGuard till i alla övriga vägar om du vill att alla dina vägar ska skyddas

Se vårt äldre MSAL Angular v2 Angular 11-exempel, som använder HashLocationStrategy och visar hur du skyddar vägar med MsalGuard.

Ändringar från msal-angular v1 till v2

  • Konfiguration: MsalAngularConfiguration har blivit inaktuell och fungerar inte längre. Konfigurering av MsalGuard görs nu via MsalGuardConfiguration.
  • Gränssnitt: MsalGuard implementerar CanActivateChild nu och CanLoad utöver CanActivate. Mer information finns i avsnittet ovan Interfaces .
  • Omdirigering vid fel: MsalGuard konfigurationen har nu en loginFailedRoute som kan konfigureras. Mer information finns i loginFailedRoute avsnittet ovan.
  • Last updated on