Habilitación de la autenticación en su propia aplicación angular mediante Azure Active Directory B2C

En este artículo se muestra cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a su propia aplicación de página única (SPA) de Angular. Obtenga información sobre cómo integrar una aplicación de Angular con la biblioteca de autenticación msal para Angular .

Use este artículo con el artículo relacionado denominado Configurar autenticación en una aplicación de página única de Angular de ejemplo. Sustituya la aplicación angular de ejemplo por su propia aplicación de Angular. Después de completar los pasos de este artículo, la aplicación aceptará inicios de sesión a través de Azure AD B2C.

Prerrequisitos

Complete los pasos descritos en el artículo Configuración de la autenticación en una aplicación de página única de Angular de ejemplo.

Creación de un proyecto de aplicación de Angular

Puede usar un proyecto de aplicación de Angular existente o crear uno nuevo. Para crear un proyecto, ejecute los siguientes comandos.

Los comandos:

1. Instale la CLI de Angular mediante el administrador de paquetes npm.
2. Cree un área de trabajo de Angular con un módulo de enrutamiento. El nombre de la aplicación es msal-angular-tutorial. Puede cambiarlo a cualquier nombre de aplicación de Angular válido, como contoso-car-service.
3. Cambie a la carpeta del directorio de la aplicación.

npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

Instalación de las dependencias

Para instalar las bibliotecas MSAL Browser y MSAL Angular en la aplicación, ejecute el siguiente comando en el shell de comandos:

npm install @azure/msal-browser @azure/msal-angular

Instale la biblioteca de componentes de material de Angular (opcional, para la interfaz de usuario):

npm install @angular/material @angular/cdk

Adición de los componentes de autenticación

El código de ejemplo consta de los siguientes componentes:

Para agregar los siguientes componentes a la aplicación, ejecute los siguientes comandos de la CLI de Angular. Los generate component comandos:

1. Cree una carpeta para cada componente. La carpeta contiene los archivos TypeScript, HTML, CSS y test.
2. Actualice los app.module.ts archivos y app-routing.module.ts con referencias a los nuevos componentes.

ng generate component home
ng generate component profile
ng generate component webapi

Adición de la configuración de la aplicación

La configuración del proveedor de identidades de Azure AD B2C y la API web se almacenan en el archivo auth-config.ts . En la carpeta src/app , cree un archivo denominado auth-config.ts que contenga el código siguiente. A continuación, cambie la configuración tal como se describe en 3.1 Configure the Angular sample (Configurar el ejemplo de Angular).

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE, 
     },
     system: {
         loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-name.onmicrosoft.com/api/tasks.read"],
  },
}
export const loginRequest = {
  scopes: []
};

Inicio de las bibliotecas de autenticación

Las aplicaciones cliente públicas no son de confianza para mantener de forma segura los secretos de aplicación, por lo que no tienen secretos de cliente. En la carpeta src/app , abra app.module.ts y realice los cambios siguientes:

1. Importe las bibliotecas de MSAL Angular y MSAL Browser.
2. Importe el módulo de configuración de Azure AD B2C.
3. Importe HttpClientModule. El cliente HTTP se usa para llamar a las API web.
4. Importe el interceptor HTTP de Angular. MSAL usa el interceptor para insertar el token de portador en el encabezado de autorización HTTP.
5. Agregue los materiales esenciales de Angular.
6. Cree una instancia de MSAL mediante el objeto de aplicación cliente pública de varias cuentas. La inicialización de MSAL incluye pasar lo siguiente:
   1. Objeto de configuración para auth-config.ts.
   2. El objeto de configuración para la protección de enrutamiento.
   3. Objeto de configuración del interceptor de MSAL. La clase interceptor adquiere automáticamente tokens para las solicitudes salientes que usan la clase HttpClient de Angular para los recursos protegidos conocidos.
7. Configure los proveedores HTTP_INTERCEPTORS y MsalGuardde Angular.
8. Agregue MsalRedirectComponent al arranque de Angular.

En la carpeta src/app , edite app.module.ts y realice las modificaciones que se muestran en el siguiente fragmento de código. Los cambios se marcan con "Los cambios empiezan aquí" y "Los cambios terminan aquí".

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

/* Changes start here. */
// Import MSAL and MSAL browser libraries. 
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

// Import the Azure AD B2C configuration 
import { msalConfig, protectedResources } from './auth-config';

// Import the Angular HTTP interceptor. 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { WebapiComponent } from './webapi/webapi.component';

// Add the essential Angular materials.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
/* Changes end here. */

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent,
    WebapiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* Changes start here. */
    // Import the following Angular materials. 
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatTableModule,
    // Import the HTTP client. 
    HttpClientModule,

    // Initiate the MSAL library with the MSAL configuration object
    MsalModule.forRoot(new PublicClientApplication(msalConfig),
      {
        // The routing guard configuration. 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: protectedResources.todoListApi.scopes
        }
      },
      {
        // MSAL interceptor configuration.
        // The protected resource mapping maps your web API with the corresponding app scopes. If your code needs to call another web API, add the URI mapping here.
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
        ])
      })
    /* Changes end here. */
  ],
  providers: [
    /* Changes start here. */
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalGuard
    /* Changes end here. */
  ],
  bootstrap: [
    AppComponent,
    /* Changes start here. */
    MsalRedirectComponent
    /* Changes end here. */
  ]
})
export class AppModule { }

Configuración de rutas

En esta sección, configure las rutas de la aplicación de Angular. Cuando un usuario selecciona un vínculo en la página para moverse dentro de la aplicación de página única, o escribe una dirección URL en la barra de direcciones, las rutas asignan la dirección URL a un componente de Angular. La interfaz canActivate de enrutamiento de Angular usa MSAL Guard para comprobar si el usuario ha iniciado sesión. Si el usuario no ha iniciado sesión, MSAL lleva al usuario a Azure AD B2C para autenticarse.

En la carpeta src/app , edite app-routing.module.ts realice las modificaciones que se muestran en el siguiente fragmento de código. Los cambios se marcan con "Los cambios empiezan aquí" y "Los cambios terminan aquí".

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { WebapiComponent } from './webapi/webapi.component';

const routes: Routes = [
  /* Changes start here. */
  {
    path: 'profile',
    component: ProfileComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    // The home component allows anonymous access
    path: '',
    component: HomeComponent
  }
  /* Changes end here. */
];


@NgModule({
  /* Changes start here. */
  // Replace the following line with the next one
  //imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation:'enabled'
  })],
  /* Changes end here. */
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agregar los botones de inicio de sesión y cierre de sesión

En esta sección, agregará los botones de inicio de sesión y cierre de sesión al componente de la aplicación . En la carpeta src/app , abra el archivo app.component.ts y realice los cambios siguientes:

1. Importe los componentes necesarios.

2. Cambie la clase para implementar el método OnInit. El OnInit método se suscribe al evento observable MsalBroadcastServiceinProgress$ de MSAL. Use este evento para conocer el estado de las interacciones del usuario, especialmente para comprobar que se completan las interacciones.

   Antes de las interacciones con el objeto de cuenta de MSAL, compruebe que la propiedad InteractionStatus devuelve InteractionStatus.None. El subscribe evento llama al setLoginDisplay método para comprobar si el usuario está autenticado.

3. Agregue variables de clase.

4. Agregue el método login que inicia el flujo de autorización.

5. Agregue el método logout que cierra la sesión del usuario.

6. Agregue el setLoginDisplay método que comprueba si el usuario está autenticado.

7. Agregue el método ngOnDestroy para limpiar el inProgress$ evento de suscripción.

Después de los cambios, el código debe tener un aspecto similar al siguiente fragmento de código:

import { Component, OnInit, Inject } from '@angular/core';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus, RedirectRequest } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

/* Changes start here. */
export class AppComponent implements OnInit{
  title = 'msal-angular-tutorial';
  loginDisplay = false;
  private readonly _destroying$ = new Subject<void>();

  constructor(@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration, private broadcastService: MsalBroadcastService, private authService: MsalService) { }

  ngOnInit() {

    this.broadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.setLoginDisplay();
    })
  }

  login() {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  logout() { 
    this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  /* Changes end here. */
}

En la carpeta src/app , edite app.component.html y realice los siguientes cambios:

1. Agregue un vínculo a los componentes de perfil y API web.
2. Agregue el botón de inicio de sesión con el atributo evento de clic establecido en el método login(). Este botón solo aparece si la loginDisplay variable de clase es false.
3. Agregue el botón de cierre de sesión, con el atributo del evento de clic establecido en el método logout(). Este botón solo aparece si la loginDisplay variable de clase es true.
4. Agregue un elemento router-outlet .

Después de los cambios, el código debe tener un aspecto similar al siguiente fragmento de código:

<mat-toolbar color="primary">
  <a class="title" href="/">{{ title }}</a>

  <div class="toolbar-spacer"></div>

  <a mat-button [routerLink]="['profile']">Profile</a>
  <a mat-button [routerLink]="['webapi']">Web API</a>

  <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
  <button mat-raised-button *ngIf="loginDisplay" (click)="logout()">Logout</button>

</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Opcionalmente, actualice el archivo app.component.css con el siguiente fragmento de código CSS:

.toolbar-spacer {
    flex: 1 1 auto;
  }

  a.title {
    color: white;
  }

Control de las redirecciones de la aplicación

Al usar redireccionamientos con MSAL, debe agregar la directiva app-redirect a index.html. En la carpeta src , edite index.html como se muestra en el siguiente fragmento de código:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MsalAngularTutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- Changes start here -->
  <app-redirect></app-redirect>
  <!-- Changes end here -->
</body>
</html>

Establecer el CSS de la aplicación (opcional)

En la carpeta /src , actualice el archivo styles.css con el siguiente fragmento de código CSS:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.container { margin: 1%; }

Comprobar si un usuario está autenticado

El archivo home.component muestra cómo comprobar si el usuario está autenticado. En la carpeta src/app/home , actualice home.component.ts con el siguiente fragmento de código.

El código:

1. Se suscribe a los eventos observables MSAL MsalBroadcastServicemsalSubject$ y inProgress$.
2. Garantiza que el evento msalSubject$ registre el resultado de la autenticación en la consola del explorador.
3. Garantiza que el inProgress$ evento comprueba si un usuario está autenticado. El getAllAccounts() método devuelve uno o varios objetos.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loginDisplay = false;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe((result: EventMessage) => {
        console.log(result);
      });

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      })
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
}

En la carpeta src/app/home , actualice home.component.html con el siguiente fragmento HTML. La directiva *ngIf comprueba la loginDisplay variable de clase para mostrar u ocultar los mensajes de bienvenida.

<div *ngIf="!loginDisplay">
    <p>Please sign-in to see your profile information.</p>
</div>

<div *ngIf="loginDisplay">
    <p>Login successful!</p>
    <p>Request your profile information by clicking Profile above.</p>
</div>

Lectura de las notificaciones de tokens de identificador

El archivo profile.component muestra cómo acceder a las declaraciones del token de ID del usuario. En la carpeta src/app/profile , actualice profile.component.ts con el siguiente fragmento de código.

El código:

1. Importa los componentes necesarios.
2. Se suscribe al evento observable MSAL MsalBroadcastServiceinProgress$. El evento carga la cuenta y lee las notificaciones del token de identificador.
3. Garantiza que el checkAndSetActiveAccount método comprueba y establece la cuenta activa. Esta acción es común cuando la aplicación interactúa con varios flujos de usuario de Azure AD B2C o directivas personalizadas.
4. Asegúrese de que el método getClaims obtenga las notificaciones del token de identificador del objeto de cuenta MSAL activo. A continuación, el método agrega las reclamaciones a la dataSource matriz. La matriz se representa al usuario con el enlace de plantilla del componente.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
  displayedColumns: string[] = ['claim', 'value'];
  dataSource: Claim[] = [];
  private readonly _destroying$ = new Subject<void>();
  
  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) =>  status === InteractionStatus.None || status === InteractionStatus.HandleRedirect),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      })
  }

  checkAndSetActiveAccount() {

    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  getClaims(claims: any) {

    let list: Claim[]  =  new Array<Claim>();

    Object.keys(claims).forEach(function(k, v){
      
      let c = new Claim()
      c.id = v;
      c.claim = k;
      c.value =  claims ? claims[k]: null;
      list.push(c);
    });
    this.dataSource = list;

  }

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

export class Claim {
  id: number;
  claim: string;
  value: string;
}

En la carpeta src/app/profile , actualiza profile.component.html con el siguiente fragmento de código HTML:

<h1>ID token claims:</h1>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Claim Column -->
  <ng-container matColumnDef="claim">
    <th mat-header-cell *matHeaderCellDef> Claim </th>
    <td mat-cell *matCellDef="let element"> {{element.claim}} </td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Llamada a una API de web

Para llamar a una API web de autorización basada en tokens, la aplicación debe tener un token de acceso válido. El proveedor MsalInterceptor adquiere automáticamente tokens para las solicitudes salientes que usan la clase HttpClient de Angular para los recursos protegidos conocidos.

Cuando el objeto HttpClient llama a una API web, el proveedor MsalInterceptor realiza los pasos siguientes:

1. Adquiere un token de acceso con los permisos necesarios (ámbitos) para el punto de conexión de API web.

2. Pasa el token de acceso como un token de portador en el encabezado de autorización de la solicitud HTTP mediante este formato:

   Authorization: Bearer <access-token>
   

El archivo webapi.component muestra cómo llamar a una API web. En la carpeta src/app/webapi , actualice webapi.component.ts con el siguiente fragmento de código.

El código:

1. Usa la clase HttpClient de Angular para llamar a la API web.
2. Lee el elemento auth-config de la clase protectedResources.todoListApi.endpoint. Este elemento especifica el URI de la API web. En función del URI de la API web, el interceptor de MSAL adquiere un token de acceso con los ámbitos correspondientes.
3. Obtiene el perfil de la API web y establece la variable de clase profile.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { protectedResources } from '../auth-config';

type ProfileType = {
  name?: string
};

@Component({
  selector: 'app-webapi',
  templateUrl: './webapi.component.html',
  styleUrls: ['./webapi.component.css']
})
export class WebapiComponent implements OnInit {
  todoListEndpoint: string = protectedResources.todoListApi.endpoint;
  profile!: ProfileType;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(this.todoListEndpoint)
      .subscribe(profile => {
        this.profile = profile;
      });
  }
}

En la carpeta src/app/webapi , actualice webapi.component.html con el siguiente fragmento de código HTML. La plantilla del componente representa el nombre que devuelve la API web. En la parte inferior de la página, la plantilla representa la dirección de la API web.

<h1>The web API returns:</h1>
<div>
    <p><strong>Name: </strong> {{profile?.name}}</p>
</div>

<div class="footer-text">
    Web API: {{todoListEndpoint}}
</div>

Opcionalmente, actualice el archivo webapi.component.css con el siguiente fragmento de código CSS:

.footer-text {
    position: absolute;
    bottom: 50px;
    color: gray;
}

Ejecución de la aplicación angular

Ejecute el siguiente comando:

npm start

La ventana de la consola muestra el número del puerto donde se hospeda la aplicación.

Listening on port 4200...

Vaya a http://localhost:4200 en el explorador para ver la aplicación.

Pasos siguientes

• Configuración de las opciones de autenticación en su propia aplicación angular mediante Azure AD B2C
• Habilitación de la autenticación en su propia API web