자습서: Angular 애플리케이션 만들기 및 인증 준비

등록이 완료되면 Angular CLI(명령줄 인터페이스)를 사용하여 Angular 프로젝트를 만들 수 있습니다. 이 자습서에서는 Angular CLI를 사용하여 단일 페이지 Angular 애플리케이션을 만들고 인증 및 권한 부여에 필요한 파일을 만드는 방법을 보여 줍니다.

이 자습서에서:

• 새 Angular 프로젝트 만들기
• 애플리케이션에 대한 설정 구성
• 애플리케이션에 인증 코드 추가

필수 조건

• 자습서: 애플리케이션 등록의 필수 구성 요소 및 단계를 완료합니다.
• Agular CLI 설치
• Node.js 설치합니다.
• Visual Studio Code

새 Angular 프로젝트 만들기

Angular 프로젝트를 처음부터 빌드하려면 다음 단계를 수행합니다.

1. 터미널 창을 열고 다음 명령을 실행하여 새 Angular 프로젝트를 만듭니다.

   ng new msal-angular-tutorial --routing=true --style=css --strict=false
   

   이 명령은 라우팅을 사용하도록 설정된 새 Angular 프로젝트, 스타일을 지정하기 위한 CSS 및 strict 모드를 사용하지 않도록 설정한 새 msal-angular-tutorial Angular 프로젝트를 만듭니다.

2. 프로젝트 디렉터리로 변경합니다.

   cd msal-angular-tutorial
   

3. 앱 종속성 설치:

   npm install @azure/msal-browser @azure/msal-angular bootstrap
   

   이 명령은 npm install @azure/msal-browser @azure/msal-angular bootstrap Azure MSAL 브라우저, Azure MSAL Angular 및 부트스트랩 패키지를 설치합니다.

4. 부트스트랩의 CSS 경로를 열고 angular.json 배열에 styles 추가합니다.

   "styles": [
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

   이 코드는 부트스트랩 CSS를 파일의 스타일 배열에 angular.json 추가합니다.

5. 홈 및 프로필 구성 요소 생성:

   ng generate component home
   ng generate component profile
   

   이 명령은 Angular 프로젝트에서 홈 및 프로필 구성 요소를 생성합니다.

6. 프로젝트에서 불필요한 파일 및 코드를 제거합니다.

   rm src/app/app.component.css
   rm src/app/app.component.spec.ts
   rm src/app/home/home.component.css
   rm src/app/home/home.component.spec.ts
   rm src/app/profile/profile.component.css
   rm src/app/profile/profile.component.spec.ts
   

   명령은 프로젝트에서 불필요한 파일과 코드를 제거합니다.

7. Visual Studio Code를 app-routing.module.ts 사용하여 이름을 바꾸고 app.routes.ts 애플리케이션 전체의 app.routes.ts 모든 참조를 업데이트합니다.

8. Visual Studio Code를 app.module.ts 사용하여 이름을 바꾸고 app.config.ts 모든 참조를 app.config.ts 애플리케이션 전체에 업데이트합니다.

이러한 단계를 완료하면 프로젝트 구조가 다음과 같이 표시됩니다.

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   └── home.component.ts
│   │   └── profile
│   │       ├── profile.component.html
│   │       └── profile.component.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── tsconfig.app.json
└── tsconfig.json

애플리케이션에 대한 설정 구성

앱 등록 중에 기록된 값을 사용하여 인증을 위해 애플리케이션을 구성합니다. 다음 단계를 수행합니다.

1. src/app/app.module.ts 파일을 열고 콘텐츠를 다음 코드로 바꿉니다.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   이 코드는 사용자 인증 및 API 보호를 위해 MSAL을 설정합니다. 인증을 위한 주요 구성 요소 및 MsalInterceptor MsalGuard 서비스를 정의하면서 API 요청을 보호하고 경로를 보호하도록 앱을 구성합니다. 다음 값을 Microsoft Entra 관리 센터의 값으로 바꿉니다.

   • 앱 등록의 Application (client) ID 원본으로 바꿉다Enter_the_Application_Id_Here.
   • 앱 등록의 Directory (tenant) ID 원본으로 바꿉다Enter_the_Tenant_Info_Here.

2. 파일을 저장합니다.

애플리케이션에 인증 코드 추가

MSAL Angular를 사용하여 사용자 인증 및 세션 관리를 처리하려면 업데이트src/app/app.component.ts해야 합니다.

1. 파일을 열고 src/app/app.component.ts 내용을 다음 코드로 바꿉니다.

   // Required for Angular
   import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
   
   // Required for MSAL
   import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
   import { EventMessage, EventType, InteractionStatus, RedirectRequest } from '@azure/msal-browser';
   
   // Required for RJXS
   import { Subject } from 'rxjs';
   import { filter, takeUntil } from 'rxjs/operators';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements OnInit, OnDestroy {
     title = 'Angular - MSAL Example';
     loginDisplay = false;
     tokenExpiration: string = '';
     private readonly _destroying$ = new Subject<void>();
   
     constructor(
       @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     // On initialization of the page, display the page elements based on the user state
     ngOnInit(): void {
       this.msalBroadcastService.inProgress$
           .pipe(
           filter((status: InteractionStatus) => status === InteractionStatus.None),
           takeUntil(this._destroying$)
         )
         .subscribe(() => {
           this.setLoginDisplay();
         });
   
         // Used for storing and displaying token expiration
         this.msalBroadcastService.msalSubject$.pipe(filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)).subscribe(msg => {
         this.tokenExpiration=  (msg.payload as any).expiresOn;
         localStorage.setItem('tokenExpiration', this.tokenExpiration);
       });
     }
   
     // If the user is logged in, present the user with a "logged in" experience
     setLoginDisplay() {
       this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
     }
   
     // Log the user in and redirect them if MSAL provides a redirect URI otherwise go to the default URI
     login() {
       if (this.msalGuardConfig.authRequest) {
         this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
       } else {
         this.authService.loginRedirect();
       }
     }
   
     // Log the user out
     logout() {
       this.authService.logoutRedirect();
     }
   
     ngOnDestroy(): void {
       this._destroying$.next(undefined);
       this._destroying$.complete();
     }
   }
   

   이 코드는 MSAL을 Angular와 통합하여 사용자 인증을 관리합니다. 로그인 상태 변경을 수신 대기하고, 로그인 상태를 표시하고, 토큰 획득 이벤트를 처리하며, Microsoft Entra 구성에 따라 사용자를 로그인 또는 로그아웃하는 메서드를 제공합니다.

2. 파일을 저장합니다.

다음 단계

자습서: Angular 앱에서 로그인 및 로그아웃 기능 구성 요소 추가