Inicialización de MSAL en Angular

Antes de usar @azure/msal-angular, registre una aplicación en Microsoft Entra ID para obtener el clientId.

Inclusión e inicialización del módulo MSAL en el módulo de la aplicación

Importe MsalModule en app.module.ts. Para inicializar el módulo MSAL, pase el clientId de la aplicación, que obtiene del registro de la aplicación.

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

Protege las rutas de tu aplicación

Agregue autenticación para proteger rutas específicas en la aplicación agregando canActivate: [MsalGuard] a la definición de ruta. Añádelo a las rutas principales o secundarias. Cuando un usuario visita estas rutas, la biblioteca solicita al usuario que se autentique.

Obtenga más información en nuestro MsalGuard documento sobre la configuración y las consideraciones, incluido el uso de interfaces adicionales.

Este es un ejemplo de una ruta definida con :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 { }

Obtención de tokens para llamadas API web

@azure/msal-angular permite añadir un interceptor HTTP (MsalInterceptor) en su app.module.ts de la siguiente manera. El MsalInterceptor obtendrá los tokens y los añadirá a todas tus solicitudes HTTP en las llamadas a la API basadas en el protectedResourceMap. Consulte la documentación de MsalInterceptor para obtener más información sobre la configuración y el uso.

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

Usar el MsalInterceptor es opcional. Es posible que quiera obtener tokens explícitamente mediante las API acquireToken en su lugar.

Tenga en cuenta que se proporciona para su comodidad y es posible que MsalInterceptor no se ajuste a todos los casos de uso. Escribe tu propio interceptor si tienes necesidades específicas que no cubra el MsalInterceptor.

Suscripción a los eventos

MSAL proporciona un sistema de eventos que emite eventos relacionados con la autenticación y MSAL. Para usar eventos, añada el MsalBroadcastService al constructor de su componente o servicio.

1. Cómo suscribirse a eventos

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. Eventos disponibles

Consulte la lista de eventos disponibles para MSAL en la @azure/msal-browser documentación de eventos.

3. Cancelación de la suscripción

La cancelación de la suscripción es importante. Implemente ngOnDestroy() en el componente para cancelar la suscripción.

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

Pasos siguientes

Está listo para usar @azure/msal-angularlas API públicas.