자습서: Angular 단일 페이지 애플리케이션에서 로그인 추가 및 로그아웃

적용 대상: 워크포스 테넌트 외부 테넌트(자세히 알아보기)

이 자습서는 Angular SPA(단일 페이지 애플리케이션)를 빌드하고 Microsoft ID 플랫폼을 사용하여 인증을 추가하는 방법을 보여 주는 시리즈의 2부입니다. 이 시리즈의 1부에서는 Angular SPA를 만들고 초기 구성을 추가했습니다.

이 자습서에서는 다음을 수행합니다.

• 로그인 및 로그아웃 추가

필수 조건

• 자습서의 필수 구성 요소 및 단계 완료 : Angular 단일 페이지 애플리케이션 만들기

앱에 로그인 및 로그아웃 기능 추가

이 섹션에서는 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 앱에서 탐색 모음을 구현합니다. 사용자 인증 상태에 따라 로그인 및 로그아웃 단추를 동적으로 표시하고 로그인한 사용자를 위한 프로필 보기 단추를 포함하여 애플리케이션의 사용자 인터페이스를 향상합니다. 단추를 선택하면 src/app/app.component.ts의 login() 및 logout() 메서드가 호출됩니다.

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 애플리케이션에서 라우팅을 구성합니다. 일치하지 않는 모든 경로가 홈 구성 요소로 리디렉션되는 동안 프로필 경로에 인증을 적용하는 데 사용됩니다MsalGuard.

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

   이 코드는 MSAL(Microsoft 인증 라이브러리)과 통합되는 Angular 구성 요소를 HomeComponent 설정합니다. ngOnInit 수명 주기 후크에서, 구성 요소는 MsalBroadcastService로부터 온 msalSubject$ 관찰 가능한 값을 구독하고, 로그인 성공 이벤트를 필터링합니다. 로그인 이벤트가 발생하면 인증 결과를 검색하고 활성 계정을 설정하여 애플리케이션이 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));
   

   코드 조각은 Angular의 플랫폼 브라우저 동적 모듈에서 platformBrowserDynamic을(를) 가져오고 애플리케이션의 모듈 파일에서 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 문자 인코딩으로 정의합니다. 제목을 "JavaScript용 MSAL - Angular SPA"로 설정합니다. 본문에는 구성 요소가 주 진입점으로 포함되고 <app-redirect> 리디렉션 기능에 대한 구성 요소가 포함 <app-root> 됩니다.

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 코드는 본문 글꼴을 최신 sans-serif 스택으로 설정하고, 기본 여백을 제거하고, 가독성을 높이기 위해 글꼴 다듬기를 적용하여 웹 페이지의 스타일을 지정합니다. 텍스트를 가운데에 배치하고 .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 애플리케이션의 홈페이지 관리를 담당하는 클래스를 정의합니다. 구성 요소는 애플리케이션의 인증 상태를 모니터링하기 위해 MsalBroadcastService에서 inProgress$ 옵저버블을 구독합니다. 인증 상태가 변경되면 구성 요소는 로그인 표시를 업데이트하고 활성 계정의 ID 토큰에서 클레임을 검색합니다. 이 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>
   

   이 코드 조각은 Angular 애플리케이션 홈페이지의 HTML 요소를 정의합니다. 여기에는 사용자가 Microsoft Entra 외부 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%;
   }
   

   이 코드 조각은 Angular 애플리케이션 홈페이지의 HTML 요소 스타일을 지정합니다. 표 컨테이너의 높이 및 오버플로 속성을 설정하고, 표의 여백과 너비를 조정하고, 단락 요소의 텍스트를 정렬합니다.

다음 단계

자습서: 자습서: Angular SPA를 사용하여 사용자 데이터 추출