使用Angular实现Azure Active Directory认证

以下是关于如何在Angular中进行Azure Active Directory（AAD）身份验证的方法。

前提

Chinese Paraphrase:
基础条件
起点
假设条件
先决条件
条件

需确保已安装 adal-angular4: Angular 4/5/6/7 ADAL Wrapper

这个名字叫做Angular4，但它支持到Angular8。

环境.ts

export const environment = {
  tenant: '{AADのテナントId}',
  clientId: '{認証用AADアプリケーションのアプリケーションId}'
};

应用程序组件.ts

import { Component, OnInit } from '@angular/core';
import { AdalService } from 'adal-angular4';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private adalService: AdalService) {
    adalService.init(
      {
        tenant: environment.tenant,
        clientId: environment.clientId,
        redirectUri: window.location.origin + '/',
      }
    );
  }

  ngOnInit() {
    this.adalService.handleWindowCallback();
  }

}

app-router.module.ts文件

在路由模块中，进行访问控制。

我想要对需要通过验证的路径指定`canActivate: [LoggedInGuard]`。

通过这样做，在下面的例子中，首先执行LoggedInGuard，然后再加载HomeComponent，如果返回值为True，则进行加载。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../home/home.component';
import { CounterComponent } from '../counter/counter.component';
import { FetchDataComponent } from '../fetch-data/fetch-data.component';
import { LoginComponent } from '../page/login/login.component';
import { LoggedInGuard } from '../service/logged-in.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [LoggedInGuard]},
  { path: 'login', component: LoginComponent },
  { path: 'counter', component: CounterComponent },
  { path: 'fetch-data', component: FetchDataComponent },
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRouterModule { }

登入.保護.ts

创建一个Guard。

如果this.adalService.userInfo.authenticated不为true，则会跳转到登录页面(/login)。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AdalService } from 'adal-angular4';

@Injectable({
  providedIn: 'root'
})
export class LoggedInGuard implements CanActivate {
  constructor(
    private adalService: AdalService,
    private router: Router
    ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      if (this.adalService.userInfo.authenticated) {
        return true;
      }
      sessionStorage.setItem('redirect_url', window.location.href);
      this.router.navigate(['/login']);
      return false;
  }

}

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { AdalService } from 'adal-angular4';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  constructor(
    private adalService: AdalService,
    private router: Router,
  ) { }

  ngOnInit() {
    if (this.adalService.userInfo.authenticated) {
      this.router.navigate(['/']);
    } else {
      this.adalService.login(); // このメソッドが呼ばれると、MSの認証画面に
    }
  }

}