Tutorial: Inicio de sesión del usuario en la aplicación de página única de Angular - Microsoft identity platform

Artículo
11/12/2024

Este tutorial es la parte 3 de una serie que muestra la creación de una aplicación de página única (SPA) de Angular, que usa la plataforma de identidad de Microsoft para la autenticación. En este tutorial, agregará experiencias de inicio de sesión y cierre de sesión a su SPA de Angular.

En este tutorial:

Agregue la funcionalidad de inicio de sesión y cierre de sesión a la aplicación.

Requisitos previos

Tutorial: Creación de una aplicación de página única de Angular

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

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.

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.

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.

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.
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.
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 el componente <app-root> como punto de entrada principal y el componente <app-redirect> para las funcionalidades de redirección.

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.

Pasos siguientes

Tutorial: Llamada a una API desde una aplicación de página única de Angular

Compartir vía

Requisitos previos

Pasos siguientes

Comentarios

Recursos adicionales

Compartir vía

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

Requisitos previos

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

Pasos siguientes

Comentarios

Recursos adicionales