Angular 9のSPAにmsal-angularを使ってAzure Active Directory認証を実装する

備忘。adalを使った解説はよく見るけどMSALを使うサンプルはまだあんまりないのかな？

---

Azure ADにAppを登録する

New registrationをクリック

Nameを入力してRegister

登録したAppのOverview画面に表示される"Application( (client) ID"と"Directory {tenant) ID"をコピーしておきます。

client IDとtenant IDをコピー

AppにPlatformの設定を追加する

AppのAuthentication pageでPlatformを追加します。

Single-page applicationを選択する

Redirect URIにはlocalhostを設定。

Implicit grantのtokenはどちらもOnにしておきます

これでAD側の設定は終了。Angular側に認証処理を実装していきます。

Angular AppにMSALを使って認証処理を実装する

何はともあれまずnpm install。

npm install @azure/msal-angular msal

msal-angularとmsalをinstallしたらapp.module.tsに設定を記述します。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import {
  MsalModule, MsalInterceptor, MsalService
} from '@azure/msal-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule.forRoot({
      auth: {
        // 先ほどコピーしたClient Id
        clientId: environment.clientId,
        // 先ほどコピーしたtenant Id（tenant 単位で認証する場合）
        authority: 'https://login.microsoftonline.com/' + environment.tenantId,
        validateAuthority: true,
        // 認証後のリダイレクトするURI（localhost）
        redirectUri: environment.uiAddress,
        navigateToLoginRequestUrl: true,
      },
      cache: {
        cacheLocation: 'localStorage',
      },
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

次にapp.component.tsにAD認証処理を実装します。

import { Component, OnInit } from '@angular/core';
import { BroadcastService, MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'AdAuthTest';
  loggedIn = false;

  constructor(
    private broadcastService: BroadcastService,
    private authService: MsalService
  ) { }

  ngOnInit() {
    this.checkoutAccount();

    if (!this.loggedIn) {
      // login処理
      this.authService.loginRedirect();
    }

    this.broadcastService.subscribe('msal:loginSuccess', () => {
      this.checkoutAccount();
    });

    this.authService.handleRedirectCallback((authError, response) => {
      if (authError) {
        console.error('Redirect Error: ', authError.errorMessage);
        return;
      }
      console.log('Account:', this.authService.getAccount());
    });
  }

  checkoutAccount() {
    this.loggedIn = !!this.authService.getAccount();
  }
}

これで最低限のAzure AD認証ができるはずです。ng serveして動かしてみます。

login 画面が表示される

ユーザー情報を入力して・・・

無事AD認証してログインすることができました！
console.logしておいたAccount情報も確認することができます。

実運用するうえでは考えなくてはいけないことが色々ありますが、
シングルテナントでAAD認証をするだけならば簡単に実装できそうです。
いつだって大変なのは認可の方ですが……。

Microsoft公式のangular9-sample-appも参考になると思います。 github.com