Tutorial: Menambahkan masuk dan keluar di aplikasi satu halaman Angular Anda

Berlaku untuk: Lingkaran Hijau penyewa Workforce Penyewa eksternal (pelajari selengkapnya)

Tutorial ini adalah bagian 2 dari seri yang menunjukkan pembuatan aplikasi satu halaman (SPA) Angular dan menambahkan autentikasi menggunakan platform identitas Microsoft. Di Bagian 1 dari seri ini, Anda membuat Angular SPA dan menambahkan konfigurasi awal.

Di tutorial ini, Anda akan:

• Menambahkan opsi masuk dan keluar

Prasyarat

• Penyelesaian prasyarat dan langkah-langkah dalam Tutorial: Membuat aplikasi satu halaman Angular

Menambahkan fungsionalitas masuk dan keluar ke aplikasi Anda

Di bagian ini Anda akan menambahkan komponen untuk mendukung fungsionalitas masuk dan keluar di aplikasi Angular Anda. Komponen-komponen ini memungkinkan pengguna untuk mengautentikasi dan mengelola sesi mereka. Anda akan menambahkan routing ke aplikasi untuk mengarahkan pengguna ke komponen yang sesuai berdasarkan status otentikasi mereka.

Pengguna tenaga kerja

Untuk mengaktifkan fungsionalitas masuk dan keluar di aplikasi Angular Anda, ikuti langkah-langkah berikut:

1. src/app/app.component.html Buka file dan ganti konten dengan kode berikut.

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

   Kode mengimplementasikan bilah navigasi di aplikasi Angular. Ini secara dinamis menampilkan tombol Masuk dan Keluar berdasarkan status autentikasi pengguna dan menyertakan tombol Lihat Profil untuk pengguna yang masuk, meningkatkan antarmuka pengguna aplikasi. Metode login() dan logout() di src/app/app.component.ts dipanggil ketika tombol dipilih.

2. src/app/app-routing.module.ts Buka file dan ganti konten dengan kode berikut.

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

   Cuplikan kode mengonfigurasi perutean dalam aplikasi Angular dengan membuat jalur untuk komponen Profil dan Rumah . Menggunakan MsalGuard untuk menerapkan autentikasi di rute Profil, sementara semua jalur yang tidak sesuai dialihkan ke Beranda komponen.

3. src/app/home/home.component.ts Buka file dan ganti konten dengan kode berikut.

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

   Kode menyiapkan komponen Angular yang disebut HomeComponent yang terintegrasi dengan Microsoft Authentication Library (MSAL). Dalam kait siklus hidup ngOnInit, komponen berlangganan ke observable msalSubject$ dari MsalBroadcastService, memfilter peristiwa ketika login berhasil. Ketika terjadi peristiwa masuk, hasil autentikasi diambil dan akun aktif di-setel di MsalService, memungkinkan aplikasi untuk mengelola sesi pengguna.

4. src/app/home/home.component.html Buka file dan ganti konten dengan kode berikut.

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

   Kode ini menyambut pengguna ke aplikasi dan meminta mereka untuk melihat data Microsoft Graph mereka dengan mengklik tautan Tampilkan Profil .

5. src/main.ts Buka file dan ganti konten dengan kode berikut.

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

   Cuplikan kode mengimpor platformBrowserDynamic dari modul dinamis browser platform Angular dan AppModule dari file modul aplikasi. Kemudian menggunakan platformBrowserDynamic() untuk bootstrap AppModule, menginisialisasi aplikasi Angular. Setiap kesalahan yang terjadi selama proses bootstrap ditangkap dan dicatat ke konsol.

6. src/index.html Buka file dan ganti konten dengan kode berikut.

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

   Cuplikan kode mendefinisikan dokumen HTML5 dengan bahasa Inggris sebagai bahasa dan pengodean karakter UTF-8. Ini mengatur judul ke "MSAL Untuk JavaScript - Angular SPA." Isi mencakup <app-root> komponen sebagai titik masuk utama dan <app-redirect> komponen untuk fungsionalitas pengalihan.

7. src/styles.css Buka file dan ganti konten dengan kode berikut.

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

   Kode CSS menata halaman web dengan mengatur font isi ke tumpukan sans-serif modern, menghapus margin default, dan menerapkan penghalusan font untuk keterbacaan yang ditingkatkan. Ini memusatkan teks dan menambahkan padding ke kelas .app, .title, dan .profile, sementara kelas .profileButton menggunakan flexbox untuk memusatkan elemennya.

Penyewa eksternal

1. Buka src/app/app.component.html dan ganti kode yang ada dengan cuplikan kode berikut.

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

   Cuplikan kode ini menambahkan bilah navigasi ke aplikasi Angular. Bilah navigasi menyertakan judul dan tombol Masuk dan Keluar yang memungkinkan pengguna untuk masuk dan keluar dari aplikasi.

2. Buka src/app/app.component.css dan ganti kode dengan cuplikan berikut.

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

   Cuplikan kode ini menata bilah navigasi dan footer aplikasi Angular. Ini mengatur warna judul menjadi putih, meratakan teks footer ke tengah, dan menyesuaikan ukuran teks footer.

3. Buka src/app/app-routing.module.ts dan ganti seluruh konten file dengan cuplikan berikut. Ini akan menambahkan rute ke home komponen dan 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. Buka src/styles.css dan ganti kode yang ada dengan cuplikan kode berikut.

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

   Cuplikan kode ini mengimpor tema bawaan Angular Material dan mengatur tinggi elemen HTML dan isi. Ini menghapus margin default dan mengatur keluarga font.

5. Buka src/app/home/home.component.ts dan ganti kode yang ada dengan cuplikan kode berikut.

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

   Cuplikan kode ini mendefinisikan HomeComponent kelas , yang bertanggung jawab untuk mengelola halaman beranda aplikasi Angular. Komponen berlangganan ke inProgress$ yang dapat diamati dari MsalBroadcastService untuk memantau status autentikasi aplikasi. Saat status autentikasi berubah, komponen memperbarui tampilan login dan mengambil klaim dari token ID akun aktif. Metode signUp() ini dipanggil ketika pengguna mengklik tombol Daftar , memulai proses autentikasi.

6. Buka src/app/home/home.component.html dan ganti kode yang ada dengan cuplikan kode berikut. Kode ini mendefinisikan elemen HTML dari beranda aplikasi.

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

   Cuplikan kode ini mendefinisikan elemen HTML dari halaman beranda aplikasi Angular. Ini termasuk bagian kartu dengan tombol Daftar bagi pengguna untuk mengautentikasi dengan ID Eksternal Microsoft Entra.

7. Buka src/app/home/home.component.css. Ganti kode yang ada dengan cuplikan kode berikut.

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

   Cuplikan kode ini menata elemen HTML dari halaman beranda aplikasi Angular. Ini mengatur properti tinggi dan luapan kontainer tabel, menyesuaikan margin dan lebar tabel, dan meratakan teks dalam elemen paragraf.

Langkah berikutnya

Tutorial: Mengekstrak data pengguna dengan Angular SPA