albatrosary's blog

UI/UXとエンタープライズシステム

Angular と Azure Active Directory の利用

SPA で認証を行う一つの方法として Microsoft の Azure Active Directory(Azure AD) を利用する方法があります。Azure AD はリソースの保護を目的としたソリューションであり、ユーザー ID の管理とインテリジェンスに基づくアクセス ポリシーの作成に役立ちます。って書いてます。

azure.microsoft.com

ここでは Azure AD をセッティングして Angular を使って認証したいと思います。

Azure AD の設定

Azure AD を作る

事前に https://portal.azure.com に対してログイン出来るアカウントを作成 しておく。ADは「リソースの作成」から作ることができるので必要な項目を3つほど入力し作成します。だいぶ端折ってますが簡単です。

Azure AD へアプリケーションを登録

ADが作成されたら「アプリケーションの登録」を行います。今回はAngularでしかもlocalhostからのアクセスを行いますので次のようにしました。

f:id:albatrosary:20180423183741p:plain

ディレクトリは「ashirasad.onmicrosoft.com」としています。

Angular の設定

プロジェクトの生成とADモジュールの登録

いつものように Angular CLI でプロジェクトを作ります

ng new ng-ad-sample --prefix aa --routing

プロジェクトが出来たら cd ng-ad-sample 後 AD モジュールを登録します

yarn add adal-angular5 -S

あとはコードを書くだけ

認証コードを書く

サンプルなので app.component.ts に実装します。まずは app.module

app.module.ts

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

import { Adal5Service, Adal5HTTPService } from 'adal-angular5';
import { HttpClientModule, HttpClient } from '@angular/common/http';

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    Adal5Service,
    { 
      provide: Adal5HTTPService,
      useFactory: Adal5HTTPService.factory,
      deps: [HttpClient, Adal5Service]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

import { Adal5Service } from 'adal-angular5';
import { adal } from 'adal-angular';

const config: adal.Config = {                           
  tenant: 'ashirasad.onmicrosoft.com',                      
  clientId: 'a2cc7d32-da13-4c0a-8bf7-49346c7bea67'    
}                                     

@Component({
  selector: 'aa-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  username: string;

  constructor(private service: Adal5Service) {      
    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();
  }
}

app.component.html には title の代わりに username を表示させるよう変更しておきます。

よくわからなくなるのが app.component.ts

const config: adal.Config = {                           
  tenant: 'ashirasad.onmicrosoft.com',                      
  clientId: 'a2cc7d32-da13-4c0a-8bf7-49346c7bea67'    
} 

tenant はAzure ADに定義したディレクトリで、clientId は、アプリケーション IDということになります。あとは実行するだけ。

実行結果

ng serve --open で Angular の起動とブラウザの起動を行うとAngularアプリケーションが起動後、Azureのログイン画面へ遷移します。

f:id:albatrosary:20180423185726p:plain

f:id:albatrosary:20180423185745p:plain

f:id:albatrosary:20180423185804p:plain

最後に

adal-angular5 に 5って書かないで欲しいな。サンプルはこちら

https://github.com/albatrosary/ng-ad-sample