Verwenden von MSAL Guard zum Schutz von Routen

MSAL Angular bietet MsalGuardeine Klasse, mit der Sie Routen schützen und eine Authentifizierung erfordern können, bevor Sie auf die geschützte Route zugreifen. Dieses Dokument enthält weitere Informationen zur Konfiguration sowie zu Aspekten bei der Verwendung des MsalGuard.

MsalGuard ist eine Komfortklasse, die Sie verwenden können, um die Benutzererfahrung zu verbessern, aber sie sollte nicht für die Sicherheit verwendet werden. Angreifer können potenziell clientseitige Schutzvorrichtungen umgehen, und Sie sollten sicherstellen, dass der Server keine Daten zurückgibt, auf die der Benutzer nicht zugreifen sollte.

Möglicherweise benötigen Sie auch einen Routenschutz, der bestimmte Anforderungen erfüllt. Wir empfehlen Ihnen, einen eigenen Guard zu schreiben, wenn MsalGuard nicht all diese Anforderungen erfüllt.

Konfigurationen

Konfiguration von MsalGuard in app.module.ts und app-routing.module.ts

Die MsalGuard kann Ihrer Anwendung in der app.module.ts als Provider zusammen mit ihrer Konfiguration hinzugefügt werden. Die Importe übernehmen eine Instanz von MSAL sowie zwei Angular-spezifische Konfigurationsobjekte. Das zweite Argument ist ein MsalGuardConfiguration Objekt, das die Werte für interactionType, ein optionales authRequestund ein optionales loginFailedRouteenthalten.

Das MsalGuard wird dann verwendet, um Routen im app-routing.module.ts zu schützen. Das folgende Codebeispiel demonstriert, wie das MsalGuard zur Route Profile hinzugefügt wird. Der Schutz der Profile Route bedeutet, dass auch wenn sich ein Benutzer nicht mit der Login Schaltfläche anmeldet, wenn er versucht, auf die Profile Route zuzugreifen oder auf die Profile Schaltfläche zu klicken, der MsalGuard Benutzer auffordert, sich per Popup oder Umleitung zu authentifizieren, bevor die Profile Seite angezeigt wird.

Ihre Konfiguration sieht möglicherweise wie unten aus. In unserem Konfigurationsdokument finden Sie weitere Möglichkeiten zum Konfigurieren von MSAL Angular für Ihre App, und in den folgenden Abschnitten finden Sie weitere Details zum Objekt und zu den Schnittstellen für das MsalConfiguration Routing.

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

Das Festlegen des Interaktionstyps bestimmt, wie MsalGuard interaktiv zur Anmeldung auffordert. Die InteractionType Kann aus @azure/msal-browser importiert und auf Popup oder Redirectfestgelegt werden.

Optionaler Authentifizierungsanforderung

Das optionale authRequest ist eine erweiterte Funktion, die nicht erforderlich ist. Wir empfehlen jedoch, authRequest auf dem MsalGuardConfiguration mit scopes festzulegen, damit die Einwilligung für die Berechtigungsumfänge vorab eingeholt werden kann. Wenn die Zustimmung zu scopes nicht im Voraus erteilt wird, können Berechtigungsbereiche schrittweise angefordert werden. Dies kann dazu führen, dass ihrem App-Benutzer mehrmals ein Zustimmungsdialog angezeigt wird.

Die Zustimmung zu Scopes vorab wird in den obigen Codebeispielen und in unseren Beispielen gezeigt.

Alle möglichen Parameter für das Anforderungsobjekt finden Sie hier: PopupRequest und RedirectRequest.

Anmeldung fehlgeschlagene Route

Die loginFailedRoute Zeichenfolge kann auf MsalGuardConfiguration gesetzt werden. Die MsalGuard Umleitung erfolgt auf diese Route, wenn die Anmeldung erforderlich ist und fehlschlägt.

Im Angular-Beispiel finden Sie Beispiele für die Implementierung im Konfigurations - und App-Routingmodul.

Beachten Sie, dass die Umleitung bei Fehlern für Angular 9-Anwendungen, die die CanLoad Schnittstelle aufgrund von Basistypunterschieden verwenden, nicht verfügbar ist.

Interfaces

Zusätzlich zu canActivate, MsalGuard implementiert canActivateChild und canLoad, und diese können ihren Routendefinitionen in app-routing.module.ts hinzugefügt werden. Sie können diese in unserer älteren MSAL Angular v2 Angular 11-Beispielanwendung sowie unten sehen. Weitere Informationen zu Schnittstellen finden Sie in den 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]
    },
];

Überlegungen bei der Verwendung von MSAL Guard

Verwenden von MSAL Guard auf der Startseite

Wir empfehlen, MsalGuard auf der ersten Seite festzulegen, wenn Benutzer beim Aufrufen Ihrer Anwendung zur Anmeldung aufgefordert werden sollen. Wir empfehlen nicht, login in ngOnInit in app.component.ts aufzurufen, da dies zu Schleifen bei Weiterleitungen führen kann.

Unsere zusätzlichen Empfehlungen hängen von Ihrer Routingstrategie ab und finden Sie in den folgenden Abschnitten.

Verwenden von MSAL Guard mit Pfadrouting

Wenn Sie PathLocationStrategy und Weiterleitungen mit Ihrer Angular-App verwenden, empfehlen wir eine dedizierte Route für Weiterleitungen, um Endlosschleifen zu vermeiden. Diese Route sollte auch dein redirectUri sein und sollte nicht von der MsalGuard geschützt werden.

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

Um Benutzer bei Erreichen Ihrer App anzumelden, wenn Sie PathLocationStrategy verwenden, empfehlen wir Folgendes:

  • Festlegen von MsalGuard auf Ihrer Startseite
  • Stellen Sie Ihre redirectUri auf 'http://localhost:4200/auth' ein
  • Einen 'auth'-Pfad zu Ihren Routen hinzufügen und MsalRedirectComponent als Komponente festlegen (diese Route sollte nicht durch MsalGuard geschützt werden)
  • Sicherstellen, dass MsalRedirectComponent initialisiert ist
  • Optional: Hinzufügen MsalGuard zu allen Routen, wenn alle Ihre Routen geschützt werden sollen

Unser Beispiel zu Angular Modules verwendet die PathLocationStrategy und veranschaulicht, wie man Routen mit der MsalGuard schützt.

Verwenden von MSAL Guard mit Hashrouting

Wenn Sie HashLocationStrategy mit Ihrer Angular-App verwenden, empfehlen wir dringend, in Ihrer app-routing.module.ts Platzhalterrouten (wie /code) einzurichten, um zu verhindern, dass der Angular-Router ausgelöst wird, wenn Microsoft Entra ID die Antwort mit dem Authentifizierungscode im Hash zurückgibt, da es andernfalls zu Problemen beim Abschließen der Authentifizierung kommen kann. Diese Platzhalterrouten sollten nicht durch die MsalGuardKomponente geschützt werden und dürfen nicht auf eine Komponente verweisen, die Interaktion auslöst oder geschützte API-Aufrufe beim Laden der Seite auslöst.

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

Die redirectUri in der MSAL-Konfiguration sollte ebenfalls auf die Startseite gesetzt werden.

Um Benutzer beim Aufrufen Ihrer App anzumelden, wenn Sie HashLocationStrategy verwenden, empfehlen wir Folgendes:

  • Festlegen von MsalGuard auf Ihrer ersten Seite
  • MsalGuard auf Platzhalterrouten nicht festlegen (z. B. /code, /error)
  • Sicherstellen, dass MsalRedirectComponent initialisiert ist
  • Optional: Fügen Sie MsalGuard zu all Ihren übrigen Routen hinzu, wenn Sie möchten, dass alle Ihre Routen geschützt sind.

Sehen Sie sich unser älteres MSAL Angular v2 Angular 11-Beispiel an, das HashLocationStrategy verwendet und zeigt, wie Routen mit MsalGuard geschützt werden.

Änderungen von msal-angular v1 zu v2

  • Konfiguration: MsalAngularConfiguration ist veraltet und funktioniert nicht mehr. Die Konfiguration des MsalGuard erfolgt jetzt über das MsalGuardConfiguration.
  • Schnittstellen: MsalGuard implementiert CanActivateChild und CanLoad zusätzlich zu CanActivate. Weitere Informationen finden Sie im obigen Interfaces Abschnitt.
  • Umleitung bei Fehlern: Die MsalGuard-Konfiguration verfügt jetzt über ein konfigurierbares loginFailedRoute. Weitere Einzelheiten finden Sie im obigen Abschnitt zum loginFailedRoute.
  • Last updated on