Tutorial: Incorporación de inicio de sesión y cierre de sesión en la aplicación de página única de Angular

Se aplica a: inquilinos de personal inquilinos externos (más información)

Este tutorial forma parte 2 de una serie que muestra cómo compilar una aplicación de página única (SPA) de Angular y agregar autenticación mediante la plataforma de identidad de Microsoft. En la Parte 1 de esta serie, creó una SPA de Angular y agregó configuraciones iniciales.

En este tutorial, harás lo siguiente:

• Añadir inicio y cierre de sesión

Requisitos previos

• Finalización de los requisitos previos y los pasos descritos en Tutorial: Creación de una aplicación de página única de Angular

Adición de la funcionalidad de inicio de sesión y cierre de sesión a la aplicación

En esta sección, agregarás componentes para admitir la funcionalidad de inicio y cierre de sesión en tu aplicación Angular. Estos componentes permiten a los usuarios autenticar y administrar sus sesiones. Agregará enrutamiento a la aplicación para dirigir a los usuarios a los componentes adecuados en función de su estado de autenticación.

Usuario de la fuerza laboral

Para habilitar la funcionalidad de inicio de sesión y cierre de sesión en la aplicación de Angular, siga estos pasos:

1. Abre el archivo src/app/app.component.html y reemplaza el contenido por el código siguiente.

   <a class="navbar navbar-dark bg-primary" variant="dark" href="/">
       <a class="navbar-brand"> Microsoft Identity Platform </a>
       <a>
           <button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
           <button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Sign Out</button>
       </a>
   </a>
   <a class="profileButton">
       <a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a> 
   </a>
   <div class="container">
       <router-outlet></router-outlet>
   </div>
   

   El código implementa una barra de navegación en una aplicación de Angular. Muestra dinámicamente los botones de inicio de sesión y cierre de sesión en función del estado de autenticación del usuario e incluye un botón Ver perfil para los usuarios que han iniciado sesión, lo que mejora la interfaz de usuario de la aplicación. Se llama a los métodos login() y logout() en src/app/app.component.ts cuando se seleccionan los botones.

2. Abre el archivo src/app/app-routing.module.ts y reemplaza el contenido por el código siguiente.

   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required for the Angular routing service
   import { Routes, RouterModule } from '@angular/router';
   
   // Required for the "Profile" page
   import { ProfileComponent } from './profile/profile.component';
   
   // Required for the "Home" page
   import { HomeComponent } from './home/home.component';
   
   // MsalGuard is required to protect routes and require authentication before accessing protected routes
   import { MsalGuard } from '@azure/msal-angular';
   
   // Define the possible routes
   // Specify MsalGuard on routes to be protected
   // '**' denotes a wild card
   const routes: Routes = [
     {
       path: 'profile',
       component: ProfileComponent,
       canActivate: [
         MsalGuard
       ]
     },
     {
       path: '**',
       component: HomeComponent
     }
   ];
   
   // Create an NgModule that contains all the directives for the routes specified above
   @NgModule({
     imports: [RouterModule.forRoot(routes, {
       useHash: true
     })],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

   El fragmento de código configura el enrutamiento en una aplicación de Angular estableciendo rutas de acceso para los componentes Perfil e Inicio. Usa MsalGuard para aplicar la autenticación en la ruta de perfil, mientras que todas las rutas de acceso no coincidentes redirigen al componente Inicio.

3. Abre el archivo src/app/home/home.component.ts y reemplaza el contenido por el código siguiente.

   // Required for Angular
   import { Component, OnInit } from '@angular/core';
   
   // Required for MSAL
   import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
   
   // Required for Angular multi-browser support
   import { EventMessage, EventType, AuthenticationResult } from '@azure/msal-browser';
   
   // Required for RJXS observables
   import { filter } from 'rxjs/operators';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html'
   })
   export class HomeComponent implements OnInit {
     constructor(
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     // Subscribe to the msalSubject$ observable on the msalBroadcastService
     // This allows the app to consume emitted events from MSAL
     ngOnInit(): void {
       this.msalBroadcastService.msalSubject$
         .pipe(
           filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
         )
         .subscribe((result: EventMessage) => {
           const payload = result.payload as AuthenticationResult;
           this.authService.instance.setActiveAccount(payload.account);
         });
     }
   }
   

   El código configura un componente de Angular denominado HomeComponent que se integra con la Biblioteca de autenticación de Microsoft (MSAL). En el enlace de ciclo de vida de ngOnInit, el componente se suscribe al msalSubject$ observable desde MsalBroadcastService, filtrando los eventos de inicio de sesión correctos. Cuando se produce un evento de inicio de sesión, recupera el resultado de autenticación y establece la cuenta activa en MsalService, lo que permite a la aplicación administrar sesiones de usuario.

4. Abre el archivo src/app/home/home.component.html y reemplaza el contenido por el código siguiente.

   <div class="title">
       <h5>
           Welcome to the Microsoft Authentication Library For JavaScript - Angular SPA
       </h5>
       <p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
   </div>
   

   El código da la bienvenida a los usuarios a la aplicación y les pide que vean sus datos de Microsoft Graph haciendo clic en el vínculo Ver perfil.

5. Abre el archivo src/main.ts y reemplaza el contenido por el código siguiente.

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   El fragmento de código importa platformBrowserDynamic desde el módulo dinámico del explorador de plataforma de Angular y AppModule desde el archivo de módulo de la aplicación. A continuación, usa platformBrowserDynamic() para arrancar el AppModule, inicializando la aplicación de Angular. Los errores que se producen durante el proceso de arranque se detectan y registran en la consola.

6. Abre el archivo src/index.html y reemplaza el contenido por el código siguiente.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>MSAL For JavaScript - Angular SPA</title>
     </head>
     <body>
       <app-root></app-root>
       <app-redirect></app-redirect>
     </body>
   </html>
   

   El fragmento de código define un documento HTML5 con inglés como idioma y codificación de caracteres UTF-8. Establece el título en "MSAL For JavaScript - Angular SPA". El cuerpo incluye como punto de entrada principal el componente <app-root> y para las funcionalidades de redireccionamiento el componente <app-redirect>.

7. Abre el archivo src/styles.css y reemplaza el contenido por el código siguiente.

   body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
       'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
       sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
       monospace;
   }
   
   .app {
     text-align: center;
     padding: 8px;
   }
   
   .title{
     text-align: center;
     padding: 18px;
   }
   
   
   .profile{
     text-align: center;
     padding: 18px;
   }
   
   .profileButton{
     display: flex;
     justify-content: center;
     padding: 18px;
   }
   

   El código CSS aplica estilos a la página web estableciendo la fuente del cuerpo en una pila sans-serif moderna, quitando los márgenes predeterminados y aplicando suavizado de fuentes para mejorar la legibilidad. Centra el texto y agrega relleno a las clases .app, .title y .profile, mientras que la clase .profileButton usa caja flexible para centrar sus elementos.

Inquilino externo

1. Abra src/app/app.component.html y reemplace el código existente por el siguiente fragmento de código.

     <mat-toolbar color="primary">
         <a class="title" href="/">{{ title }}</a>
         <div class="toolbar-spacer"></div>
         <a mat-button [routerLink]="['guarded']">Guarded Component</a>
         <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
         <button mat-raised-button color="accent" *ngIf="loginDisplay" (click)="logout()">Logout</button>
       </mat-toolbar>
       <div class="container">
         <!--This is to avoid reload during acquireTokenSilent() because of hidden iframe -->
         <router-outlet *ngIf="!isIframe"></router-outlet>
       </div>
       <footer *ngIf="loginDisplay">
         <mat-toolbar>
           <div class="footer-text"> How did we do? <a
               href="https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u"
               target="_blank"> Share your experience with us!</a>
           </div>
         </mat-toolbar>
       </footer>
   

   Este fragmento de código agrega una barra de navegación a la aplicación angular. La barra de navegación incluye un título y botones Inicio de sesión y Cierre de sesión que permiten a los usuarios iniciar sesión y salir de la aplicación.

2. Abra src/app/app.component.css y reemplace el código por el siguiente fragmento de código.

   .toolbar-spacer {
     flex: 1 1 auto;
   }
   
   a.title {
     color: white;
   }
   
   footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     color: white;
     text-align: center;
   }
   
   .footer-text {
     font-size: small;
     text-align: center;
     flex: 1 1 auto;
   }
   

   Este fragmento de código aplica estilos a la barra de navegación y al pie de página de la aplicación angular. Establece el color del título en blanco, alinea el texto del pie de página al centro y ajusta el tamaño del texto del pie de página.

3. Abra src/app/app-routing.module.ts y reemplace todo el contenido del archivo por el siguiente fragmento de código. Esto agregará rutas a los componentes home y guarded.

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { BrowserUtils } from '@azure/msal-browser';
   import { MsalGuard } from '@azure/msal-angular';
   
   import { HomeComponent } from './home/home.component';
   import { GuardedComponent } from './guarded/guarded.component';
   
   /**
    * MSAL Angular can protect routes in your application
       * using MsalGuard. For more info, visit:
       * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#secure-the-routes-in-your-application
       */
   const routes: Routes = [
       {
       path: 'guarded',
       component: GuardedComponent,
       canActivate: [
           MsalGuard
       ]
       },
       {
       path: '',
       component: HomeComponent,
       },
   ];
   
   @NgModule({
       imports: [
       RouterModule.forRoot(routes, {
           // Don't perform initial navigation in iframes or popups
           initialNavigation:
           !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
               ? 'enabledNonBlocking'
               : 'disabled', // Set to enabledBlocking to use Angular Universal
       }),
       ],
       exports: [RouterModule],
   })
   export class AppRoutingModule { }
   

4. Abra src/styles.css y reemplace el código existente por el siguiente fragmento de código.

   @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
   html, body { height: 100%; }
   body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   

   Este fragmento de código importa el tema precompilado de Angular Material y establece el alto de los elementos de cuerpo y HTML. Quita el margen predeterminado y establece la familia de fuentes.

5. Abra src/app/home/home.component.ts y reemplace el código existente por el siguiente fragmento de código.

   import { Component, Inject, OnInit } from '@angular/core';
   import { Subject } from 'rxjs';
   import { filter } from 'rxjs/operators';
   
   import { MsalBroadcastService, MsalGuardConfiguration, MsalService, MSAL_GUARD_CONFIG } from '@azure/msal-angular';
   import { AuthenticationResult, InteractionStatus, InteractionType } from '@azure/msal-browser';
   
   import { createClaimsTable } from '../claim-utils';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css'],
   })
   export class HomeComponent implements OnInit {
     loginDisplay = false;
     dataSource: any = [];
     displayedColumns: string[] = ['claim', 'value', 'description'];
   
     private readonly _destroying$ = new Subject<void>();
   
     constructor(
       @Inject(MSAL_GUARD_CONFIG)
       private msalGuardConfig: MsalGuardConfiguration,
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     ngOnInit(): void {
   
       this.msalBroadcastService.inProgress$
         .pipe(
           filter((status: InteractionStatus) => status === InteractionStatus.None)
         )
         .subscribe(() => {
           this.setLoginDisplay();
           this.getClaims(
             this.authService.instance.getActiveAccount()?.idTokenClaims
           );
         });
     }
   
     setLoginDisplay() {
       this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
     }
   
     getClaims(claims: any) {
       if (claims) {
         const claimsTable = createClaimsTable(claims);
         this.dataSource = [...claimsTable];
       }
     }
   
     signUp() {
       if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
         this.authService.loginPopup({
           scopes: [],
           prompt: 'create',
         })
           .subscribe((response: AuthenticationResult) => {
             this.authService.instance.setActiveAccount(response.account);
           });
       } else {
         this.authService.loginRedirect({
           scopes: [],
           prompt: 'create',
         });
       }
   
     }
   
     // unsubscribe to events when component is destroyed
     ngOnDestroy(): void {
       this._destroying$.next(undefined);
       this._destroying$.complete();
     }
   }
   

   Este fragmento de código define la HomeComponent clase , que es responsable de administrar la página principal de la aplicación angular. El componente se suscribe al inProgress$ observable desde MsalBroadcastService para supervisar el estado de autenticación de la aplicación. Cuando cambia el estado de autenticación, el componente actualiza la pantalla de inicio de sesión y recupera las reclamaciones del token ID de la cuenta activa. Se llama al método signUp() cuando el usuario hace clic en el botón Registrarse, iniciando el proceso de autenticación.

6. Abra src/app/home/home.component.html y reemplace el código existente por el siguiente fragmento de código. Este código define los elementos HTML de la página principal de la aplicación.

   <mat-card class="card-section" *ngIf="!loginDisplay">
     <mat-card-title>Angular single-page application built with MSAL Angular</mat-card-title>
     <mat-card-subtitle>Sign in with Microsoft Entra External ID</mat-card-subtitle>
     <mat-card-content>This sample demonstrates how to configure MSAL Angular to sign up, sign in and sign out with Microsoft Entra External ID</mat-card-content>
     <button mat-raised-button color="primary" (click)="signUp()">Sign up</button>
   </mat-card>
   <br>
   <p class="text-center" *ngIf="loginDisplay"> See below the claims in your <strong> ID token </strong>. For more
     information, visit: <span>
       <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#claims-in-an-id-token">
         docs.microsoft.com </a>
     </span>
   </p>
   <div id="table-container">
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="loginDisplay">
       <!-- 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>
       <!-- Value Column -->
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let element"> {{element.description}} </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
   

   Este fragmento de código define los elementos HTML de la página principal de la aplicación angular. Incluye una sección de tarjeta con un botón Registrarse para que los usuarios se autentiquen con el identificador externo de Microsoft Entra.

7. Abra src/app/home/home.component.css. Reemplace cualquier código existente por el siguiente fragmento de código.

   #table-container {
     height: '100vh';
     overflow: auto;
   }
   
   table {
     margin: 3% auto 1% auto;
     width: 70%;
   }
   
   .mat-row {
     height: auto;
   }
   
   .mat-cell {
     padding: 8px 8px 8px 0;
   }
   
   p {
     text-align: center;
   }
   
   .card-section {
     margin: 10%;
     padding: 5%;
   }
   

   Este fragmento de código aplica estilos a los elementos HTML de la página principal de la aplicación angular. Establece las propiedades de alto y desbordamiento del contenedor de tablas, ajusta el margen y el ancho de la tabla y alinea el texto en el elemento de párrafo.

Paso siguiente

Tutorial: Tutorial: Extracción de datos de usuario con una SPA de Angular