SPA で認証を行う一つの方法として Microsoft の Azure Active Directory(Azure AD) を利用する方法があります。Azure AD はリソースの保護を目的としたソリューションであり、ユーザー ID の管理とインテリジェンスに基づくアクセス ポリシーの作成に役立ちます。って書いてます。
ここでは Azure AD をセッティングして Angular を使って認証したいと思います。
Azure AD の設定
Azure AD を作る
事前に https://portal.azure.com
に対してログイン出来るアカウントを作成 しておく。ADは「リソースの作成」から作ることができるので必要な項目を3つほど入力し作成します。だいぶ端折ってますが簡単です。
Azure AD へアプリケーションを登録
ADが作成されたら「アプリケーションの登録」を行います。今回はAngularでしかもlocalhostからのアクセスを行いますので次のようにしました。
ディレクトリは「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のログイン画面へ遷移します。
最後に
adal-angular5 に 5って書かないで欲しいな。サンプルはこちら