Esercitazione: Accedere all'utente in Un'applicazione a pagina singola Angular - Microsoft identity platform

Articolo
11/12/2024

Questa esercitazione è la parte 3 di una serie che illustra la creazione di un'app a pagina singola Angular che usa Microsoft Identity Platform per l'autenticazione. In questa esercitazione si aggiungeranno le esperienze di accesso e disconnesso all'applicazione a pagina singola angular.

Contenuto dell'esercitazione:

Aggiungere la funzionalità di accesso e di disconnessione all'app.

Prerequisiti

Esercitazione: Creare un'applicazione a pagina singola Angular

Per abilitare la funzionalità di accesso e disconnesso nell'applicazione Angular, seguire questa procedura:

Aprire il file src/app/app.component.html e sostituirne il contenuto con il codice seguente.

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

Il codice implementa una barra di spostamento in un'app Angular. Visualizza dinamicamente i pulsanti Accedi e Disconnetti in base allo stato di autenticazione utente e include un pulsante Visualizza profilo per gli utenti connessi, migliorando l'interfaccia utente dell'applicazione. I login() metodi e logout() in src/app/app.component.ts vengono chiamati quando vengono selezionati i pulsanti.

Aprire il file src/app/app-routing.module.ts e sostituirne il contenuto con il codice seguente.

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

Il frammento di codice configura il routing in un'applicazione Angular stabilendo i percorsi per i componenti Profilo e Home . MsalGuard Usa per applicare l'autenticazione sulla route del profilo, mentre tutti i percorsi non corrispondenti vengono reindirizzati al componente Home.

Aprire il file src/app/home/home.component.ts e sostituirne il contenuto con il codice seguente.

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

Il codice configura un componente Angular denominato HomeComponent che si integra con Microsoft Authentication Library (MSAL). Nell'hook del ngOnInit ciclo di vita, il componente sottoscrive l'osservabile da MsalBroadcastService, filtrando gli eventi di esito positivo dell'accessomsalSubject$. Quando si verifica un evento di accesso, recupera il risultato dell'autenticazione e imposta l'account attivo in MsalService, consentendo all'applicazione di gestire le sessioni utente.

Aprire il file src/app/home/home.component.html e sostituirne il contenuto con il codice seguente.
```
<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>
```
Il codice accoglie gli utenti nell'app e chiede loro di visualizzare i dati di Microsoft Graph facendo clic sul collegamento Visualizza profilo .
Aprire il file src/main.ts e sostituirne il contenuto con il codice seguente.
```
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
```
Il frammento di codice importa platformBrowserDynamic dal modulo dinamico del browser della piattaforma Angular e AppModule dal file del modulo dell'applicazione. Viene quindi usato platformBrowserDynamic() per eseguire il bootstrap dell'oggetto AppModule, inizializzando l'applicazione Angular. Tutti gli errori che si verificano durante il processo di bootstrap vengono rilevati e registrati nella console.
Aprire il file src/index.html e sostituirne il contenuto con il codice seguente.
```
<!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>
```
Il frammento di codice definisce un documento HTML5 con inglese come lingua e codifica dei caratteri UTF-8. Imposta il titolo su "MSAL For Javascript - Angular SPA". Il corpo include il <app-root> componente come punto di ingresso principale e il <app-redirect> componente per le funzionalità di reindirizzamento.

Aprire il file src/styles.css e sostituirne il contenuto con il codice seguente.

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

Il codice CSS stilizza la pagina Web impostando il tipo di carattere del corpo su uno stack sans-serif moderno, rimuovendo i margini predefiniti e applicando lo smussamento del carattere per migliorare la leggibilità. Centra il testo e aggiunge spaziatura interna alle .appclassi , .titlee .profile , mentre la .profileButton classe usa flexbox per centrarne gli elementi.

Passaggi successivi

Esercitazione: Chiamare un'API da un'app a pagina singola Angular

Condividi tramite

Prerequisiti

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Esercitazione: Aggiungere l'accesso e disconnettersi nell'applicazione a pagina singola Angular

Prerequisiti

Aggiungere la funzionalità di accesso e disconnesso all'app

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive