Tutorial: Adicionar login e logout na sua aplicação em uma única página com o Angular

Aplica-se a: Locatários da força de trabalho Locatários externos (saiba mais)

Este tutorial é a parte 2 de uma série que demonstra a criação de um SPA (aplicativo de página única) Angular e a adição de autenticação usando a plataforma de identidade da Microsoft. Na Parte 1 desta série, você criou um SPA Angular e adicionou configurações iniciais.

Neste tutorial, você:

• Adicionar entrada e saída

Pré-requisitos

• Conclusão dos pré-requisitos e etapas no Tutorial: Criar um aplicativo de página única angular

Adicionar funcionalidade de entrada e saída ao seu aplicativo

Nesta seção, você adicionará componentes para dar suporte à funcionalidade de entrada e saída em seu aplicativo Angular. Esses componentes permitem que os usuários autentiquem e gerenciem suas sessões. Você adicionará o roteamento ao aplicativo para direcionar os usuários aos componentes apropriados com base em seu status de autenticação.

Locatário de força de trabalho

Para habilitar a funcionalidade de entrada e saída em seu aplicativo Angular, siga estas etapas:

1. Abra o arquivo src/app/app.component.html e substitua o conteúdo pelo código a seguir.

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

   O código implementa uma barra de navegação em um aplicativo Angular. Ele exibe dinamicamente os botões Entrar e Sair com base no status de autenticação do usuário e inclui um botão Exibir Perfil para usuários conectados, aprimorando a interface do usuário do aplicativo. Os métodos login() e logout() no src/app/app.component.ts são chamados quando os botões são selecionados.

2. Abra o arquivo src/app/app-routing.module.ts e substitua o conteúdo pelo código a seguir.

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

   O trecho de código configura o roteamento em um aplicativo Angular estabelecendo caminhos para os componentes Perfil e Página Inicial. Ele usa MsalGuard para impor a autenticação na rota Perfil, enquanto todos os caminhos incompatíveis são redirecionados para o componente Página Inicial.

3. Abra o arquivo src/app/home/home.component.ts e substitua o conteúdo pelo código a seguir.

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

   O código configura um componente Angular chamado HomeComponent que se integra à MSAL (Biblioteca de Autenticação da Microsoft). No gancho de ciclo de vida ngOnInit, o componente assina o observável msalSubject$ de MsalBroadcastService, filtrando eventos de logon bem-sucedido. Quando ocorre um evento de logon, ele recupera o resultado da autenticação e define a conta ativa no MsalService, permitindo que o aplicativo gerencie sessões de usuário.

4. Abra o arquivo src/app/home/home.component.html e substitua o conteúdo pelo código a seguir.

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

   O código recebe os usuários no aplicativo e solicita que eles exibam seus dados do Microsoft Graph clicando no link Exibir Perfil.

5. Abra o arquivo src/main.ts e substitua o conteúdo pelo código a seguir.

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

   O trecho de código importa platformBrowserDynamic do módulo dinâmico do navegador de plataforma do Angular e AppModule do arquivo de módulo do aplicativo. Em seguida, ele usa platformBrowserDynamic() para inicializar o AppModule, inicializando o aplicativo Angular. Todos os erros que ocorrem durante o processo de inicialização são capturados e registrados no console.

6. Abra o arquivo src/index.html e substitua o conteúdo pelo código a seguir.

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

   O trecho de código define um documento HTML5 com inglês como idioma e codificação de caracteres UTF-8. Ele define o título como "MSAL For JavaScript – Angular SPA". O corpo inclui o <app-root> componente como o ponto de entrada principal e o <app-redirect> componente para funcionalidades de redirecionamento.

7. Abra o arquivo src/styles.css e substitua o conteúdo pelo código a seguir.

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

   O código CSS define a página da Web definindo a fonte do corpo como uma pilha sans-serif moderna, removendo margens padrão e aplicando suavização de fonte para maior legibilidade. Ele centraliza o texto e adiciona preenchimento às classes .app, .title e .profile, enquanto a classe .profileButton usa flexbox para centralizar seus elementos.

Locatário externo

1. Abra src/app/app.component.html e substitua o código existente pelo snippet de código a seguir.

     <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 snippet de código adiciona uma barra de navegação ao aplicativo Angular. A barra de navegação inclui um título e os botões Logon e Logoff, que permitem aos usuários fazer logon e logoff do aplicativo.

2. Abra src/app/app.component.css e substitua o código pelo snippet a seguir.

   .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 trecho de código estiliza a barra de navegação e o rodapé do aplicativo Angular. Ele define a cor do título como branco, alinha o texto do rodapé ao centro e ajusta o tamanho do texto do rodapé.

3. Abra src/app/app-routing.module.ts e substitua todo o conteúdo do arquivo pelo snippet a seguir. Isso adicionará rotas aos componentes home e 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 e substitua o código existente pelo snippet de código a seguir.

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

   Este trecho de código importa o tema predefinido do Angular Material e define a altura dos elementos HTML e body. Ele remove a margem padrão e define a família de fontes.

5. Abra src/app/home/home.component.ts e substitua o código existente pelo snippet de código a seguir.

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

   Esse snippet de código define a HomeComponent classe, que é responsável por gerenciar a home page do aplicativo Angular. O componente se inscreve no observável inProgress$ de MsalBroadcastService para monitorar o status de autenticação do aplicativo. Quando o status de autenticação é alterado, o componente atualiza a exibição de logon e recupera as reivindicações do token de ID da conta ativa. O signUp() método é chamado quando o usuário clica no botão Inscrever-se , iniciando o processo de autenticação.

6. Abra src/app/home/home.component.html e substitua o código existente pelo snippet de código a seguir. Esse código define os elementos HTML da home page do aplicativo.

   <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 snippet de código define os elementos HTML da home page do aplicativo Angular. Ele inclui uma seção de cartão com um botão Inscrever-se para que os usuários se autentiquem com a ID Externa do Microsoft Entra.

7. Abrir src/app/home/home.component.css. Substitua qualquer código existente pelo snippet de código a seguir.

   #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 trecho de código estiliza os elementos HTML da página inicial da aplicação Angular. Define as propriedades de altura e estouro do contêiner da tabela, ajusta a margem e a largura da tabela e alinha o texto no elemento de parágrafo.

Próxima etapa

Tutorial: Tutorial: Extrair dados do usuário com um SPA Angular