Руководство: добавление функций входа и выхода в одностраничное приложение на Angular

Чтобы включить функции входа и выхода в приложение Angular, выполните следующие действия.

1. Откройте файл src/app/app.component.html и замените его содержимое следующим кодом.

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

   Код реализует панель навигации в приложении Angular. Он динамически отображает кнопки входа и выхода на основе состояния проверки подлинности пользователей и включает кнопку "Профиль просмотра" для пользователей, вошедшего в систему, повышая пользовательский интерфейс приложения. Методы login() и logout() в src/app/app.component.ts вызываются при выборе кнопок.

2. Откройте файл src/app/app-routing.module.ts и замените его содержимое следующим кодом.

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

   Фрагмент кода настраивает маршрутизацию в приложении Angular, устанавливая пути для компонентов Profile и Home . Используется MsalGuard для принудительной проверки подлинности на маршруте Профиль, а все пути, не совпадающие, перенаправляются на компонент Home.

3. Откройте файл src/app/home/home.component.ts и замените его содержимое следующим кодом.

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

   Код настраивает компонент Angular под названием HomeComponent, который интегрируется с библиотекой проверки подлинности Microsoft (MSAL). В перехватчике жизненного цикла ngOnInit компонент подписывается на наблюдаемый объект msalSubject$ из MsalBroadcastService, фильтруя события успешного входа. При возникновении события входа он извлекает результат проверки подлинности и задает активную учетную запись в приложении MsalServiceдля управления сеансами пользователей.

4. Откройте файл src/app/home/home.component.html и замените его содержимое следующим кодом.

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

   Код приветствует пользователей в приложении и предлагает им просмотреть данные Microsoft Graph, щелкнув ссылку Просмотр профиля.

5. Откройте файл src/main.ts и замените его содержимое следующим кодом.

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

   Фрагмент кода импортирует platformBrowserDynamic из динамического модуля платформы Angular для браузера и AppModule из файла модуля приложения. Затем он использует platformBrowserDynamic() для инициализации AppModule, запуская приложение Angular. Все ошибки, возникающие во время процесса начальной загрузки, перехватываются и регистрируются в консоли.

6. Откройте файл src/index.html и замените его содержимое следующим кодом.

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

   Фрагмент кода определяет html5-документ с английским языком и кодировкой символов UTF-8. Он устанавливает заголовок "MSAL For JavaScript - Angular SPA". Основная часть включает <app-root> компонент в качестве основной точки входа и <app-redirect> компонент для функций перенаправления.

7. Откройте файл src/styles.css и замените его содержимое следующим кодом.

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

   Код CSS стилизует веб-страницу, устанавливая стек современных шрифтов без засечек, удаляя стандартные отступы и применяя сглаживание шрифтов для улучшения читаемости. Он центрирует текст и добавляет заполнение в .appклассы .titleи .profile классы, в то время как .profileButton класс использует flexbox для центра его элементов.

1. Откройте src/app/app.component.html и замените существующий код следующим фрагментом кода.

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

   Этот фрагмент кода добавляет панель навигации в приложение Angular. Панель навигации включает кнопки заголовка и входа и выхода , которые позволяют пользователям входить в приложение и выйти из него.

2. Откройте src/app/app.component.css и замените код следующим фрагментом кода.

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

   Этот фрагмент кода стилизует панель навигации и нижний колонтитул приложения Angular. Он задает цвет заголовка белым, выравнивает текст нижнего колонтитула в центр и настраивает размер текста нижнего колонтитула.

3. Откройте src/app/app-routing.module.ts и замените все содержимое файла следующим фрагментом кода. При этом будут добавлены маршруты к home компонентам и 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. Откройте src/styles.css и замените существующий код следующим фрагментом кода.

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

   Этот фрагмент кода импортирует предварительно созданную тему Angular Material и задает высоту элементов HTML и текста. Он удаляет поле по умолчанию и задает семейство шрифтов.

5. Откройте src/app/home/home.component.ts и замените существующий код следующим фрагментом кода.

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

   Этот фрагмент кода определяет HomeComponent класс, который отвечает за управление домашней страницей приложения Angular. Компонент подписывается на наблюдаемый inProgress$ из MsalBroadcastService отслеживания состояния проверки подлинности приложения. При изменении состояния проверки подлинности компонент обновляет отображение входа и извлекает утверждения из маркера идентификатора активной учетной записи. Метод signUp() вызывается, когда пользователь нажимает кнопку регистрации , инициируя процесс проверки подлинности.

6. Откройте src/app/home/home.component.html и замените существующий код следующим фрагментом кода. Этот код определяет HTML-элементы домашней страницы приложения.

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

   Этот фрагмент кода определяет HTML-элементы домашней страницы приложения Angular. Он содержит раздел карточки с кнопкой регистрации для пользователей для проверки подлинности с помощью внешнего идентификатора Microsoft Entra External ID.

7. Откройте src/app/home/home.component.css. Замените существующий код следующим фрагментом кода.

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

   Этот фрагмент кода стили HTML-элементов домашней страницы приложения Angular. Он задает свойства высоты и переполнения контейнера таблицы, настраивает поля и ширину таблицы и выравнивает текст в элементе абзаца.