Inicjowanie biblioteki Angular MSAL

Przed użyciem @azure/msal-angularzarejestruj aplikację w usłudze Microsoft Entra ID, aby uzyskać clientId.

Dołączanie i inicjowanie modułu MSAL w module aplikacji

Zaimportuj MsalModule do app.module.ts. Aby zainicjować moduł MSAL, przekaż clientId swojej aplikacji, który uzyskasz z rejestracji aplikacji.

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

Zabezpieczanie tras w aplikacji

Dodaj uwierzytelnianie, aby zabezpieczyć określone trasy w aplikacji, dodając canActivate: [MsalGuard] do definicji trasy. Dodaj go do nadrzędnych lub podrzędnych ścieżek. Gdy użytkownik odwiedza te trasy, biblioteka monituje użytkownika o uwierzytelnienie.

Dowiedz się więcej w naszym MsalGuard dokumencie na temat konfiguracji i kwestii, w tym korzystania z dodatkowych interfejsów.

Oto przykład trasy zdefiniowanej za pomocą elementu MsalGuard:

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

Uzyskiwanie tokenów dla wywołań interfejsu Web API

@azure/msal-angular umożliwia dodanie interceptora HTTP (MsalInterceptor) w elemencie app.module.ts w następujący sposób. Element MsalInterceptor pobierze tokeny i doda je do wszystkich żądań HTTP wysyłanych w wywołaniach API na podstawie elementu protectedResourceMap. Aby uzyskać więcej informacji na temat konfiguracji i użycia, zobacz nasz dokument msalInterceptor .

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

Użycie elementu MsalInterceptor jest opcjonalne. Zamiast tego możesz jawnie pobrać tokeny przy użyciu interfejsów API acquireToken.

Należy pamiętać, że element MsalInterceptor jest dostarczany dla wygody i może nie mieścić się we wszystkich przypadkach użycia. Napisz własny interceptor, jeśli masz specyficzne potrzeby, które nie są obsługiwane przez element MsalInterceptor.

Zapisz się na wydarzenia

MSAL udostępnia system zdarzeń, który generuje zdarzenia związane z uwierzytelnianiem i samym MSAL. Aby używać zdarzeń, dodaj MsalBroadcastService do konstruktora komponentu lub usługi.

1. Jak subskrybować zdarzenia

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. Dostępne zdarzenia

Znajdź listę zdarzeń dostępnych w bibliotece MSAL w @azure/msal-browserdokumentacji zdarzeń.

3. Anulowanie subskrybowania

Anulowanie subskrypcji jest ważne. Zaimplementuj ngOnDestroy() w składniku, aby anulować subskrypcję.

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();
}

Następne kroki

Możesz już korzystać z @azure/msal-angularpublicznych interfejsów API.