Azure Active Directory B2C를 사용하여 자체 Angular 애플리케이션에서 인증 사용

이 문서에서는 Azure AD B2C(Azure Active Directory B2C) 인증을 자체 Angular SPA(단일 페이지 애플리케이션)에 추가하는 방법을 보여 줍니다. Angular용 MSAL 인증 라이브러리와 Angular 애플리케이션을 통합하는 방법을 알아봅니다.

샘플 Angular 단일 페이지 애플리케이션에서 인증 구성이라는 관련 문서와 함께 이 문서를 사용합니다. 샘플 Angular 앱을 고유한 Angular 앱으로 대체합니다. 이 문서의 단계를 완료하면 애플리케이션에서 Azure AD B2C를 통해 로그인을 수락합니다.

필수 조건

샘플 Angular 단일 페이지 애플리케이션 문서에서 인증 구성의 단계를 완료합니다.

Angular 앱 프로젝트 만들기

기존 Angular 앱 프로젝트를 사용하거나 새 Angular 앱 프로젝트를 만들 수 있습니다. 새 프로젝트를 만들려면 다음 명령을 실행합니다.

명령:

1. npm 패키지 관리자를 사용하여 Angular CLI 를 설치합니다.
2. 라우팅 모듈을 사용하여 Angular 작업 영역을 만듭니다. 앱 이름은 .입니다 msal-angular-tutorial. 예를 들어 contoso-car-service유효한 Angular 앱 이름으로 변경할 수 있습니다.
3. 앱 디렉터리 폴더로 변경합니다.

npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

종속성 설치

애플리케이션에 MSAL Browser 및 MSAL Angular 라이브러리를 설치하려면 명령 셸에서 다음 명령을 실행합니다.

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

Angular Material 구성 요소 라이브러리를 설치합니다(UI의 경우 선택 사항).

npm install @angular/material @angular/cdk

인증 구성 요소 추가

샘플 코드는 다음 구성 요소로 구성됩니다.

앱에 다음 구성 요소를 추가하려면 다음 Angular CLI 명령을 실행합니다. generate component 명령:

1. 각 구성 요소에 대한 폴더를 만듭니다. 폴더에는 TypeScript, HTML, CSS 및 테스트 파일이 포함됩니다.
2. app.module.ts 및 app-routing.module.ts 파일을 새 구성 요소에 대한 참조로 업데이트합니다.

ng generate component home
ng generate component profile
ng generate component webapi

앱 설정 추가

Azure AD B2C ID 공급자 및 웹 API에 대한 설정은 auth-config.ts 파일에 저장됩니다. src/app 폴더에서 다음 코드가 포함된 auth-config.ts 파일을 만듭니다. 그런 다음 3.1 Angular 샘플 구성에 설명된 대로 설정을 변경합니다.

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE, 
     },
     system: {
         loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-name.onmicrosoft.com/api/tasks.read"],
  },
}
export const loginRequest = {
  scopes: []
};

인증 라이브러리 시작

퍼블릭 클라이언트 애플리케이션은 애플리케이션 비밀을 안전하게 유지하기 위해 신뢰할 수 없으므로 클라이언트 비밀이 없습니다. src/app 폴더에서 app.module.ts 열고 다음을 변경합니다.

1. MSAL Angular 및 MSAL 브라우저 라이브러리를 가져옵니다.
2. Azure AD B2C 구성 모듈을 가져옵니다.
3. HttpClientModule을 가져옵니다. HTTP 클라이언트는 웹 API를 호출하는 데 사용됩니다.
4. Angular HTTP 인터셉터를 가져옵니다. MSAL은 인터셉터를 사용하여 전달자 토큰을 HTTP 권한 부여 헤더에 삽입합니다.
5. 필수 Angular 재질을 추가합니다.
6. 여러 계정 공용 클라이언트 애플리케이션 개체를 사용하여 MSAL을 인스턴스화합니다. MSAL 초기화에는 다음 항목 전달이 포함됩니다.
   1. auth-config.ts 구성 개체입니다.
   2. 라우팅 가드에 대한 구성 개체입니다.
   3. MSAL 인터셉터의 구성 개체입니다. 인터셉터 클래스는 알려진 보호된 리소스에 Angular HttpClient 클래스를 사용하는 나가는 요청에 대한 토큰을 자동으로 획득합니다.
7. HTTP_INTERCEPTORS 및 MsalGuardAngular 공급자를 구성합니다.
8. MsalRedirectComponent에 을 추가합니다.

src/app 폴더에서 app.module.ts 편집하고 다음 코드 조각에 표시된 수정을 수행합니다. 변경 내용에 "변경 내용이 여기에서 시작됨" 및 "변경 내용이 여기서 끝납니다"로 플래그가 지정됩니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

/* Changes start here. */
// Import MSAL and MSAL browser libraries. 
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

// Import the Azure AD B2C configuration 
import { msalConfig, protectedResources } from './auth-config';

// Import the Angular HTTP interceptor. 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { WebapiComponent } from './webapi/webapi.component';

// Add the essential Angular materials.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
/* Changes end here. */

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent,
    WebapiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* Changes start here. */
    // Import the following Angular materials. 
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatTableModule,
    // Import the HTTP client. 
    HttpClientModule,

    // Initiate the MSAL library with the MSAL configuration object
    MsalModule.forRoot(new PublicClientApplication(msalConfig),
      {
        // The routing guard configuration. 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: protectedResources.todoListApi.scopes
        }
      },
      {
        // MSAL interceptor configuration.
        // The protected resource mapping maps your web API with the corresponding app scopes. If your code needs to call another web API, add the URI mapping here.
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
        ])
      })
    /* Changes end here. */
  ],
  providers: [
    /* Changes start here. */
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalGuard
    /* Changes end here. */
  ],
  bootstrap: [
    AppComponent,
    /* Changes start here. */
    MsalRedirectComponent
    /* Changes end here. */
  ]
})
export class AppModule { }

경로 구성

이 섹션에서는 Angular 애플리케이션에 대한 경로를 구성합니다. 사용자가 단일 페이지 애플리케이션 내에서 이동할 페이지의 링크를 선택하거나 주소 표시줄에 URL을 입력하면 경로는 URL을 Angular 구성 요소에 매핑합니다. Angular 라우팅 canActivate 인터페이스는 MSAL Guard를 사용하여 사용자가 로그인되었는지 확인합니다. 사용자가 로그인하지 않은 경우 MSAL은 사용자를 Azure AD B2C로 이동하여 인증합니다.

src/app 폴더에서 편집 app-routing.module.ts 다음 코드 조각에 표시된 수정을 수행합니다. 변경 내용에 "변경 내용이 여기에서 시작됨" 및 "변경 내용이 여기서 끝납니다"로 플래그가 지정됩니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { WebapiComponent } from './webapi/webapi.component';

const routes: Routes = [
  /* Changes start here. */
  {
    path: 'profile',
    component: ProfileComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    // The home component allows anonymous access
    path: '',
    component: HomeComponent
  }
  /* Changes end here. */
];


@NgModule({
  /* Changes start here. */
  // Replace the following line with the next one
  //imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation:'enabled'
  })],
  /* Changes end here. */
  exports: [RouterModule]
})
export class AppRoutingModule { }

로그인 및 로그아웃 단추 추가

이 섹션에서는 앱 구성 요소에 로그인 및 로그아웃 단추를 추가합니다. src/app 폴더에서 app.component.ts 파일을 열고 다음을 변경합니다.

1. 필요한 구성 요소를 가져옵니다.

2. OnInit 메서드를 구현하도록 클래스를 변경합니다. 이 메서드는 OnInitMSAL MsalBroadcastServiceinProgress$ 관찰 가능한 이벤트를 구독합니다. 이 이벤트를 사용하여 사용자 상호 작용의 상태를 파악하고, 특히 상호 작용이 완료되었는지 확인합니다.

   MSAL 계정 개체와 상호 작용하기 전에 속성이 InteractionStatus 반환 InteractionStatus.None되는지 확인합니다. 이 subscribe 이벤트는 메서드를 setLoginDisplay 호출하여 사용자가 인증되었는지 확인합니다.

3. 클래스 변수를 추가합니다.

4. login 권한 부여 흐름을 시작하는 메서드를 추가합니다.

5. logout 사용자를 로그아웃하는 메서드를 추가합니다.

6. setLoginDisplay 사용자가 인증되었는지 확인하는 메서드를 추가합니다.

7. ngOnDestroy 메서드를 추가하여 구독 이벤트를 정리 inProgress$ 합니다.

변경 후 코드는 다음 코드 조각과 같이 표시됩니다.

import { Component, OnInit, Inject } from '@angular/core';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus, RedirectRequest } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

/* Changes start here. */
export class AppComponent implements OnInit{
  title = 'msal-angular-tutorial';
  loginDisplay = false;
  private readonly _destroying$ = new Subject<void>();

  constructor(@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration, private broadcastService: MsalBroadcastService, private authService: MsalService) { }

  ngOnInit() {

    this.broadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.setLoginDisplay();
    })
  }

  login() {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  logout() { 
    this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  /* Changes end here. */
}

src/app 폴더에서 app.component.html 편집하고 다음을 변경합니다.

1. 프로필 및 웹 API 구성 요소에 대한 링크를 추가합니다.
2. login() 메서드로 클릭 이벤트 특성이 설정된 로그인 버튼을 추가합니다. 클래스 변수 loginDisplay일 때만 이 false 단추가 나타납니다.
3. 클릭 이벤트 특성이 메서드로 설정된 logout() 로그아웃 단추를 추가합니다. 클래스 변수 loginDisplay일 때만 이 true 단추가 나타납니다.
4. 라우터 콘센트 요소를 추가합니다.

변경 후 코드는 다음 코드 조각과 같이 표시됩니다.

<mat-toolbar color="primary">
  <a class="title" href="/">{{ title }}</a>

  <div class="toolbar-spacer"></div>

  <a mat-button [routerLink]="['profile']">Profile</a>
  <a mat-button [routerLink]="['webapi']">Web API</a>

  <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
  <button mat-raised-button *ngIf="loginDisplay" (click)="logout()">Logout</button>

</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

필요에 따라 다음 CSS 코드 조각을 사용하여 app.component.css 파일을 업데이트합니다.

.toolbar-spacer {
    flex: 1 1 auto;
  }

  a.title {
    color: white;
  }

앱 리디렉션 처리

MSAL에서 리디렉션을 사용하는 경우 앱 리디렉션 지시문을 index.html에 추가해야 합니다. src 폴더에서 다음 코드 조각과 같이 index.html 편집합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MsalAngularTutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- Changes start here -->
  <app-redirect></app-redirect>
  <!-- Changes end here -->
</body>
</html>

앱 CSS 설정(선택 사항)

/src 폴더에서 다음 CSS 코드 조각으로 styles.css 파일을 업데이트합니다.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.container { margin: 1%; }

사용자가 인증되었는지 확인

home.component 파일은 사용자가 인증되었는지 확인하는 방법을 보여 줍니다. src/app/home 폴더에서 다음 코드 조각을 사용하여 home.component.ts 업데이트합니다.

코드:

1. MSAL MsalBroadcastServicemsalSubject$ 및 inProgress$ 관찰 가능한 이벤트를 구독합니다.
2. 이벤트가 브라우저 콘솔에 msalSubject$ 인증 결과를 기록하도록 합니다.
3. inProgress$ 이벤트가 사용자가 인증되었는지 확인합니다. 메서드는 getAllAccounts() 하나 이상의 개체를 반환합니다.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loginDisplay = false;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe((result: EventMessage) => {
        console.log(result);
      });

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      })
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
}

src/app/home 폴더에서 다음 HTML 코드 조각을 사용하여home.component.html 업데이트합니다. *ngIf 지시문은 클래스 변수를 loginDisplay 검사하여 환영 메시지를 표시하거나 숨깁니다.

<div *ngIf="!loginDisplay">
    <p>Please sign-in to see your profile information.</p>
</div>

<div *ngIf="loginDisplay">
    <p>Login successful!</p>
    <p>Request your profile information by clicking Profile above.</p>
</div>

ID 토큰 클레임 읽기

profile.component 파일은 사용자의 ID 토큰 클레임에 액세스하는 방법을 보여 줍니다. src/app/profile 폴더에서 다음 코드 조각을 사용하여 profile.component.ts 업데이트합니다.

코드:

1. 필요한 구성 요소를 가져옵니다.
2. MSAL MsalBroadcastServiceinProgress$ 관찰 가능한 이벤트를 구독합니다. 이 이벤트는 계정을 로드하고 ID 토큰 클레임을 읽습니다.
3. 해당 메서드가 checkAndSetActiveAccount 활성 계정을 확인하고 설정하도록 보장합니다. 이 작업은 앱이 여러 Azure AD B2C 사용자 흐름 또는 사용자 지정 정책과 상호 작용하는 경우에 일반적입니다.
4. 메서드가 getClaims 활성 MSAL 계정 개체에서 ID 토큰 클레임을 가져오는지 확인합니다. 그런 다음, 메서드는 배열에 클레임을 추가합니다 dataSource . 배열은 구성 요소의 템플릿 바인딩을 사용하여 사용자에게 렌더링됩니다.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
  displayedColumns: string[] = ['claim', 'value'];
  dataSource: Claim[] = [];
  private readonly _destroying$ = new Subject<void>();
  
  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) =>  status === InteractionStatus.None || status === InteractionStatus.HandleRedirect),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      })
  }

  checkAndSetActiveAccount() {

    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  getClaims(claims: any) {

    let list: Claim[]  =  new Array<Claim>();

    Object.keys(claims).forEach(function(k, v){
      
      let c = new Claim()
      c.id = v;
      c.claim = k;
      c.value =  claims ? claims[k]: null;
      list.push(c);
    });
    this.dataSource = list;

  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

export class Claim {
  id: number;
  claim: string;
  value: string;
}

src/app/profile 폴더에서 다음 HTML 코드 조각을 사용하여profile.component.html 업데이트합니다.

<h1>ID token claims:</h1>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

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

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

웹 API 호출

토큰 기반 권한 부여 웹 API를 호출하려면 앱에 유효한 액세스 토큰이 있어야 합니다. MsalInterceptor 공급자는 알려진 보호된 리소스에 Angular HttpClient 클래스를 사용하는 나가는 요청에 대한 토큰을 자동으로 획득합니다.

HttpClient 개체가 웹 API를 호출하는 경우 MsalInterceptor 공급자는 다음 단계를 수행합니다.

1. 웹 API 엔드포인트에 필요한 권한(범위)을 사용하여 액세스 토큰을 획득합니다.

2. 다음 형식을 사용하여 HTTP 요청의 권한 부여 헤더에서 액세스 토큰을 전달자 토큰으로 전달합니다.

   Authorization: Bearer <access-token>
   

webapi.component 파일은 웹 API를 호출하는 방법을 보여 줍니다. src/app/webapi 폴더에서 다음 코드 조각을 사용하여 webapi.component.ts 업데이트합니다.

코드:

1. Angular HttpClient 클래스를 사용하여 웹 API를 호출합니다.
2. 클래스의 auth-configprotectedResources.todoListApi.endpoint 요소를 읽습니다. 이 요소는 웹 API URI를 지정합니다. 웹 API URI에 따라 MSAL 인터셉터가 해당 범위에 대한 액세스 토큰을 가져옵니다.
3. 웹 API에서 프로필을 가져오고 클래스 변수를 profile 설정합니다.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { protectedResources } from '../auth-config';

type ProfileType = {
  name?: string
};

@Component({
  selector: 'app-webapi',
  templateUrl: './webapi.component.html',
  styleUrls: ['./webapi.component.css']
})
export class WebapiComponent implements OnInit {
  todoListEndpoint: string = protectedResources.todoListApi.endpoint;
  profile!: ProfileType;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(this.todoListEndpoint)
      .subscribe(profile => {
        this.profile = profile;
      });
  }
}

src/app/webapi 폴더에서 다음 HTML 코드 조각을 사용하여webapi.component.html 업데이트합니다. 구성 요소의 템플릿은 웹 API가 반환하는 이름을 렌더링합니다. 페이지 아래쪽에서 템플릿은 웹 API 주소를 렌더링합니다.

<h1>The web API returns:</h1>
<div>
    <p><strong>Name: </strong> {{profile?.name}}</p>
</div>

<div class="footer-text">
    Web API: {{todoListEndpoint}}
</div>

필요에 따라 다음 CSS 코드 조각을 사용하여 webapi.component.css 파일을 업데이트합니다.

.footer-text {
    position: absolute;
    bottom: 50px;
    color: gray;
}

Angular 애플리케이션 실행

다음 명령을 실행합니다.

npm start

콘솔 창에는 애플리케이션이 호스트되는 포트 수가 표시됩니다.

Listening on port 4200...

브라우저에서 http://localhost:4200으로 이동하여 애플리케이션을 확인합니다.

다음 단계

• Azure AD B2C를 사용하여 자체 Angular 애플리케이션에서 인증 옵션 구성
• 고유 웹 API에서 인증 사용