Initialisieren von MSAL Angular

Bevor Sie @azure/msal-angular verwenden, registrieren Sie eine Anwendung in Microsoft Entra ID, um clientId zu erhalten.

Einschließen und Initialisieren des MSAL-Moduls in Ihr App-Modul

Importieren Sie MsalModule in die app.module.ts. Um das MSAL-Modul zu initialisieren, übergeben Sie die Client-ID Ihrer Anwendung, die Sie aus der Anwendungsregistrierung erhalten.

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent } from "@azure/msal-angular";
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "Your client ID",
                authority: "Your authority",
                redirectUri: "Your redirect Uri",
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Redirect, // MSAL Guard Configuration
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}

Sichern der Routen in Ihrer Anwendung

Fügen Sie die Authentifizierung hinzu, um bestimmte Routen in Ihrer Anwendung zu sichern, indem Sie ihrer Routendefinition hinzufügen canActivate: [MsalGuard] . Fügen Sie es zu übergeordneten oder untergeordneten Routen hinzu. Wenn ein Benutzer diese Routen besucht, fordert die Bibliothek den Benutzer auf, sich zu authentifizieren.

Erfahren Sie mehr in unserem MsalGuard Dokument zu Konfiguration und Überlegungen, einschließlich der Verwendung zusätzlicher Schnittstellen.

Hier ist ein Beispiel für eine Route, die mit MsalGuard definiert ist:

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

Abrufen von Token für Web-API-Aufrufe

Mit @azure/msal-angular können Sie in Ihrem/Ihrer app.module.ts wie folgt einen HTTP-Interceptor (MsalInterceptor) hinzufügen. Die MsalInterceptor ruft Token ab und fügt sie allen Ihren HTTP-Anfragen bei API-Aufrufen auf Grundlage von protectedResourceMap hinzu. Weitere Informationen zur Konfiguration und Verwendung finden Sie in unserem MsalInterceptor-Dokument .

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent } from "@azure/msal-angular";
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "Your client ID",
                authority: "Your authority",
                redirectUri: "Your redirect Uri",
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Redirect, // MSAL Guard Configuration
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
            protectedResourceMap: new Map([
                ['https://graph.microsoft.com/v1.0/me', ['user.read']],
                ['https://api.myapplication.com/users/*', ['customscope.read']],
                ['http://localhost:4200/about/', null] 
            ])
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}

Die Verwendung des MsalInterceptor ist optional. Möglicherweise möchten Sie Token explizit mithilfe der AcquireToken-APIs abrufen.

Beachten Sie, dass MsalInterceptor für Ihre Bequemlichkeit bereitgestellt wird und möglicherweise nicht für alle Anwendungsfälle geeignet ist. Schreiben Sie Ihren eigenen Interceptor, wenn Sie spezifische Anforderungen haben, die nicht von der MsalInterceptor abgedeckt werden.

Abonnieren von Ereignissen

MSAL stellt ein Ereignissystem bereit, das Ereignisse im Zusammenhang mit der Authentifizierung und MSAL ausgibt. Um Ereignisse zu verwenden, fügen Sie dazu im Konstruktor Ihrer Komponente oder Ihres Dienstes MsalBroadcastService hinzu.

1. So abonnieren Sie Ereignisse

import { EventMessage, EventType } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

this.msalBroadcastService.msalSubject$
    .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS)
    )
    .subscribe((result) => {
        // do something here
    });

2. Verfügbare Ereignisse

Finden Sie die Liste der in MSAL verfügbaren Ereignisse in der @azure/msal-browserEreignisdokumentation.

3. Abmelden

Das Abmelden ist wichtig. Implementieren Sie ngOnDestroy() in Ihrer Komponente, um das Abonnement abbestellen zu können.

import { EventMessage, EventType } from '@azure/msal-browser';
import { filter, Subject, takeUntil } from 'rxjs';

private readonly _destroying$ = new Subject<void>();

this.msalBroadcastService.msalSubject$
    .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
    )
    .subscribe((result) => {
        this.checkAccount();
    });

ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
}

Nächste Schritte

Sie sind bereit, @azure/msal-angularpublic APIs zu verwenden.