Initialisation de MSAL Angular

Avant d’utiliser @azure/msal-angular, inscrivez une application dans Microsoft Entra ID pour obtenir le clientId.

Inclure et initialiser le module MSAL dans votre module d’application

Importer MsalModule dans app.module.ts. Pour initialiser le module MSAL, transmettez l’ID client de votre application, que vous obtenez à partir de l’inscription de l’application.

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

Sécuriser les itinéraires dans votre application

Ajoutez l’authentification pour sécuriser des itinéraires spécifiques dans votre application en ajoutant canActivate: [MsalGuard] à votre définition de route. Ajoutez-le aux itinéraires parent ou enfant. Lorsqu’un utilisateur visite ces itinéraires, la bibliothèque invite l’utilisateur à s’authentifier.

Apprenez-en davantage dans notre MsalGuard documentation sur la configuration et les considérations, notamment à l’aide d’interfaces supplémentaires.

Voici un exemple d’itinéraire défini avec :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 { }

Obtenir des jetons pour les appels d’API web

@azure/msal-angular vous permet d’ajouter un intercepteur Http (MsalInterceptor) dans votre app.module.ts de la manière suivante. Le MsalInterceptor obtient des tokens et les ajoute à toutes vos requêtes Http dans les appels d'API en fonction du protectedResourceMap. Pour plus d’informations sur la configuration et l’utilisation, consultez notre document 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 {}

L’utilisation MsalInterceptor est facultative. Vous souhaiterez peut-être récupérer explicitement des jetons en utilisant plutôt les API acquireToken.

Notez que le MsalInterceptor paramètre est fourni pour votre commodité et peut ne pas correspondre à tous les cas d’usage. Écrivez votre propre intercepteur si vous avez des besoins spécifiques qui ne sont pas traités par le MsalInterceptor.

S’abonner à des événements

MSAL fournit un système d’événements qui émet des événements liés à l’authentification et à MSAL. Pour utiliser les événements, ajoutez le MsalBroadcastService au constructeur de votre composant ou service.

1. Comment s’abonner à des événements

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. Événements disponibles

Recherchez la liste des événements disponibles pour MSAL dans la @azure/msal-browser documentation des événements.

3. Désinscrire

Le désabonnement est important. Implémentez ngOnDestroy() dans votre composant pour vous désabonner.

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

Étapes suivantes

Vous êtes prêt à utiliser @azure/msal-angulardes API publiques.