최근 Angular를 만지기 시작하고, AzureAD인증을 사용하고 싶었기 때문에 여러가지 조사해 보았습니다.
악전 고투하면서 움직이는 곳까지는 도착했습니다만, 나중에 잊을 것 같아서 메모입니다.

일단 움직이기 시작했지만 아마도 최적의 방법은 아닙니다.
주의해 주십시오.

※Visual Studio를 사용해 개발하고 있으므로, 다소 불규칙한 방법일지도 모릅니다.

전제

Visual Studio Community 2019 (Version16.4.4)

.NET Core (ASP.NET Core 3.1)

ASP.NET Core 웹 애플리케이션(Angular)

Angular 8.2.12

adal-angular8

절차

Step 0. 사전 준비

0-1. ASP.NET Core 웹 애플리케이션(Angular) 만들기

「새 프로젝트의 작성」에서 포치포치 진행해 나가면 할 수 있습니다.

비고

여기서 「인증의 변경」에서 「직장 또는 학교 어카운트(S)」가 선택 가능하면 편합니다만, 유감스럽게 선택할 수 없습니다.

0-2. 프로젝트 빌드

일단 프로젝트를 빌드하지 않으면 ClientApp 폴더 아래에 node_modules가 없으므로주의하십시오.node_modules 폴더가 없으면 Step 1.에서 곤란합니다.

Step 1. adal-angular8 설치

아래의 기사에서도 쓰고 있습니다만, クライアント側のライブラリ(L)... 를 추가라고 잘 되지 않았으므로, 커멘드 프롬프트로부터 인스톨 합니다.
Visual Studio 2019에서 Ant Design of Angular 사용

1-1. 개발자 명령 프롬프트 시작

ツール(T) > コマンドライン(L) > 開発者用コマンドプロンプト(C)

1-2. 명령 프롬프트에서 다음 명령 실행

cd <プロジェクト名>\ClientApp

npm i adal-angular8

참고 : adal-angular8 - npm

1-3. Visual Studio 재시작

명령 프롬프트에서 패키지를 설치하면 Visual Studio가 잘 인식하지 못할 수 있으므로 한 번 다시 시작합니다.

Step 2. Azure Active Directory 설정

2-1. Azure Active Directory 만들기

화면을 따라 포치포치 진행하면 등록할 수 있습니다.

2-2. 앱 등록

AzureAD 인증을 사용하려면 애플리케이션 등록이 필요합니다.
신규 등록을 하면 이런 화면이 표시될 것입니다.


빨간색 프레임 부분은 개발시 URL을 입력하면 디버깅이 쉽습니다.
프로덕션 환경에 배포할 때는 별도의 URL을 추가해야 합니다.

개발시의 URL은 https://localhost:<sslPort> 가 되어 있을 것입니다.
sslPort의 값은 lounchSettings.json에서 확인할 수 있습니다.

2-3. 인증 변경

아래 절차에 따라 인증에 대한 설정을 변경해야 합니다.
- "2-2. 앱 등록"에서 등록한 애플리케이션을 선택하여 관리 화면으로 이동
- 암시적 부여 아래의 'ID 토큰'에 체크를 넣는다

Visual Studio 템플릿에서 Angular 프로젝트를 만드는 경우 기본적으로 백엔드 구성 요소가 있습니다.
암묵의 부여로 「ID 토큰」에 체크를 넣는 것은 비추천인 생각도 합니다만, 이번은 편리하게 체크합니다.

Step 3. 소스 코드 변경

아래 사이트를 참고로 소스 코드를 변경했습니다.
Angular 및 Azure Active Directory 사용

3-1. app.module.ts 변경

템플릿에서 변경한 부분만 발췌

app.module.ts

import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Adal8Service, Adal8HTTPService } from "adal-angular8";

@NgModule({
  ...
    providers: [
      Adal8Service,
      {
        provide: Adal8HTTPService,
        useFactory: Adal8HTTPService.factory,
        deps: [HttpClient, Adal8Service]
      }
    ],
  ...
})

3-2. app.component.ts 변경

app.component.ts

import { Component, OnInit } from '@angular/core';

import { Adal8Service } from "adal-angular8";
import { adal } from "adal-angular";

const config: adal.Config = {
  tenant: '<登録したテナントID>',
  clientId: '<登録したアプリケーションID>'
}

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

export class AppComponent implements OnInit {
  username: string;

  constructor(private service: Adal8Service) {
    this.service.init(config);
  }

  ngOnInit() {
    this.service.handleWindowCallback();

    if (!this.service.userInfo.authenticated) {
      this.service.login();
    }

    this.username = this.service.userInfo.username;
    console.log('profile', this.service.userInfo.profile);
  }

  public logout() {
    this.service.logOut();
  }
}

<> 안의 값은 아래 이미지를 참고하십시오.

<등록한 테넌트 ID>는 파란색 부분의 Guid

<등록한 어플리케이션 ID>는 녹색 부분의 Guid

Step 4. 동작 확인

문제없이 설정이 되어 있으면 아래와 같이 로그인 화면이 표시됩니다.