다음을 통해 공유


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

이 자습서는 인증에 Microsoft ID 플랫폼 사용하는 Angular SPA(단일 페이지 앱) 빌드를 보여 주는 시리즈의 3부입니다. 이 자습서에서는 Angular SPA에 로그인 및 로그아웃 환경을 추가합니다.

이 자습서에서:

  • 앱에 로그인 및 로그아웃 기능을 추가합니다.

필수 조건

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

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 애플리케이션에서 라우팅을 구성합니다. 일치하지 않는 모든 경로가 홈 구성 요소로 리디렉션되는 동안 프로필 경로에 인증을 적용하는 데 사용됩니다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의 플랫폼 브라우저 동적 모듈 및 AppModule 애플리케이션의 모듈 파일에서 가져옵니다platformBrowserDynamic. 그런 다음, Angular 애플리케이션을 AppModule초기화하여 부트스트랩하는 데 사용합니다platformBrowserDynamic(). 부트스트랩 프로세스 중에 발생하는 모든 오류가 Catch되어 콘솔에 기록됩니다.

  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 스택으로 설정하고, 기본 여백을 제거하고, 가독성을 높이기 위해 글꼴 다듬기를 적용하여 웹 페이지의 스타일을 지정합니다. 텍스트를 가운데에 배치하고 , 및 .profile 클래스에 .app안쪽 여백을 추가하는 반면, 클래스는 .profileButton flexbox를 사용하여 요소의 가운데를 지정.title합니다.

다음 단계