Help us understand the problem. What is going on with this article?

AngularでAzureAD認証を使ってログインする

最近Angularを触り始めて、AzureAD認証を使いたかったので色々調べてみました。
悪戦苦闘しながら動くところまではたどり着きましたが、後で忘れそうなのでメモです。

とりあえず動くようにはなりましたが、おそらく最適な方法ではありません。
ご注意ください。

※Visual Studioを使って開発しているので、多少イレギュラーな方法かもしれません。

前提

  • Visual Studio Community 2019 (Version16.4.4)
  • .NET Core (ASP.NET Core 3.1)
  • ASP.NET Core Webアプリケーション(Angular)
  • Angular 8.2.12
  • adal-angular8

手順

Step 0. 事前準備

0-1. ASP.NET Core Webアプリケーション(Angular)を作成

「新しいプロジェクトの作成」からポチポチ進んでいくとできます。

備考

ここで「認証の変更」から「職場または学校アカウント(S)」が選択可能だと楽なのですが、残念ながら選べません。
職場または学校アカウントは選択できない.PNG

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認証を使うには、アプリケーションの登録が必要になります。
新規登録をすると、こんな画面が表示されるはずです。
アプリケーションの登録.PNG

赤枠部分は開発時のURLを入力するとデバッグが楽です。
本番環境にデプロイするときは、別途URLを追加してあげる必要があります。

開発時のURLはhttps://localhost:<sslPort>になっているはずです。
sslPortの値については、lounchSettings.jsonで確認可能です。
sslPortの値.PNG

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 テナントとアプリ.PNG

Step 4. 動作を確認

問題なく設定ができていれば、下記のようにログイン画面が表示されます。
ログイン.PNG

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした