자습서: Angular 단일 페이지 애플리케이션에서 로그인 추가 및 로그아웃
이 자습서는 인증에 Microsoft ID 플랫폼 사용하는 Angular SPA(단일 페이지 앱) 빌드를 보여 주는 시리즈의 3부입니다. 이 자습서에서는 Angular SPA에 로그인 및 로그아웃 환경을 추가합니다.
이 자습서에서:
- 앱에 로그인 및 로그아웃 기능을 추가합니다.
필수 조건
앱에 로그인 및 로그아웃 기능 추가
Angular 애플리케이션에서 로그인 및 로그아웃 기능을 사용하도록 설정하려면 다음 단계를 수행합니다.
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
가 호출됩니다.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
.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
사용자 세션을 관리할 수 있도록 합니다.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 데이터를 보라는 메시지를 표시합니다.
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의 플랫폼 브라우저 동적 모듈 및
AppModule
애플리케이션의 모듈 파일에서 가져옵니다platformBrowserDynamic
. 그런 다음, Angular 애플리케이션을AppModule
초기화하여 부트스트랩하는 데 사용합니다platformBrowserDynamic()
. 부트스트랩 프로세스 중에 발생하는 모든 오류가 Catch되어 콘솔에 기록됩니다.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>
됩니다.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 스택으로 설정하고, 기본 여백을 제거하고, 가독성을 높이기 위해 글꼴 다듬기를 적용하여 웹 페이지의 스타일을 지정합니다. 텍스트를 가운데에 배치하고 , 및
.profile
클래스에.app
안쪽 여백을 추가하는 반면, 클래스는.profileButton
flexbox를 사용하여 요소의 가운데를 지정.title
합니다.