Angular + Auth0ͷ࿩ খాത࢘ @hi1280 ng-japan meetup 2017 Autumn / 2017.10.10 

খాത࢘(͓ͩͻΖ͠) @hi1280 • SE • Java • Angular 

Auth0 • ೝূϓϥοτϑΥʔϜ • ֤छΞϓϦέʔγϣϯͱͷ࿈ܞ͕Մೳ(Angular ΋ରԠ) • Technology RadarͰ঺հ͞Ε͍ͯΔ 

https://www.thoughtworks.com/radar/platforms 

Angular + Auth0 

໨࣍ • ϩάΠϯ • Ϣʔβ৘ใऔಘ • API࣮ߦ • ೝՄ • Ϣʔβ؅ཧ 

ϩάΠϯ 

// ུ import * as auth0 from 'auth0-js'; @Injectable() export class AuthService { auth0 = new auth0.WebAuth({ clientID: AUTH_CONFIG.clientID, domain: AUTH_CONFIG.domain, responseType: 'token id_token’, audience: AUTH_CONFIG.apiUrl, redirectUri: AUTH_CONFIG.callbackURL, scope: 'openid' }); public login(): void { this.auth0.authorize(); } } ೝূͷઃఆ ϩάΠϯը໘ىಈ 

• Facebook • GitHub • Google • Twitter • MS Account ͳͲ Ϣʔβ໊+ύεϫʔυೝূ΋͋Δ IDϓϩόΠμʔ 

ϩάΠϯೝূͷϑϩʔ (1)Auth0ͷϩάΠϯը໘͕ݺ͹ΕΔ (2)ίʔϧόοΫͷURL͕ݺ͹ΕΔ • Auth0ͷ؅ཧը໘ͰίʔϧόοΫURLͷڐՄ͕ඞཁ (3)ϧʔτίϯϙʔωϯτͷίϯετϥΫλ͕ݺ͹ΕΔ 

ϩάΠϯೝূͷϑϩʔ (1)Auth0ͷϩάΠϯը໘͕ݺ͹ΕΔ (2)ίʔϧόοΫͷURL͕ݺ͹ΕΔ • Auth0ͷ؅ཧը໘ͰίʔϧόοΫURLͷڐՄ͕ඞཁ (3)ϧʔτίϯϙʔωϯτͷίϯετϥΫλ͕ݺ͹ΕΔ ৄ͘͠͸Quick Start Λݟ͍ͯͩ͘͞ https://auth0.com/docs/ quickstart/spa/angular2 

Ϣʔβ৘ใऔಘ 

public getProfile(cb): void { const accessToken = localStorage.getItem('access_token'); if (!accessToken) { throw new Error('Access token must exist to fetch profile'); } const self = this; this.auth0.client.userInfo(accessToken, (err, profile) => { if (profile) { self.userProfile = profile; } cb(err, profile); }); } 

public getProfile(cb): void { const accessToken = localStorage.getItem('access_token'); if (!accessToken) { throw new Error('Access token must exist to fetch profile'); } const self = this; this.auth0.client.userInfo(accessToken, (err, profile) => { if (profile) { self.userProfile = profile; } cb(err, profile); }); } ৄ͘͠͸Quick Start Λݟ͍ͯͩ͘͞ https://auth0.com/docs/ quickstart/spa/angular2 

API࣮ߦ 

API࣮ߦ • JWTΛHTTPϦΫΤετʹؚΊΔϞδϡʔϧ • HttpClientͷInterceptorͱ࣮ͯ͠૷͞Ε͍ͯΔ 

import { JwtModule } from '@auth0/angular-jwt'; // ུ @NgModule({ // ུ imports: [ // ུ JwtModule.forRoot({ config: { tokenGetter: getAccessToken, whitelistedDomains: ['localhost:3001'] } }) ], // ུ bootstrap: [AppComponent] }) export class AppModule { } export function getAccessToken() { return localStorage.getItem('access_token'); } 

import { JwtModule } from '@auth0/angular-jwt'; // ུ @NgModule({ // ུ imports: [ // ུ JwtModule.forRoot({ config: { tokenGetter: getAccessToken, whitelistedDomains: ['localhost:3001'] } }) ], // ུ bootstrap: [AppComponent] }) export class AppModule { } export function getAccessToken() { return localStorage.getItem('access_token'); } ৄ͘͠͸Quick Start Λݟ͍ͯͩ͘͞ https://auth0.com/docs/ quickstart/spa/angular2 ͱ @auth0/angular-jwt https://github.com/auth0/ angular2-jwt/tree/v1.0 

ೝՄ 

ೝՄ • RouterͷguardͰೝূࡁΈ͔Λ൑ఆ • Ϣʔβʹ෇༩͞ΕͨείʔϓͰΞΫηε੍ޚ • Auth0ͷRuleͰϢʔβͷείʔϓΛઃఆ 

import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class ScopeGuardService implements CanActivate { constructor(public auth: AuthService, public router: Router) { } canActivate(route: ActivatedRouteSnapshot): boolean { const scopes = (route.data as any).expectedScopes; if (!this.auth.isAuthenticated() || !this.auth.userHasScopes(scopes)) { this.router.navigate(['']); return false; } return true; } } 

import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class ScopeGuardService implements CanActivate { constructor(public auth: AuthService, public router: Router) { } canActivate(route: ActivatedRouteSnapshot): boolean { const scopes = (route.data as any).expectedScopes; if (!this.auth.isAuthenticated() || !this.auth.userHasScopes(scopes)) { this.router.navigate(['']); return false; } return true; } } ৄ͘͠͸Quick Start Λݟ͍ͯͩ͘͞ https://auth0.com/docs/ quickstart/spa/angular2 

Ϣʔβ؅ཧ 

Ϣʔβ؅ཧ • ϥΠϒϥϦͷαϙʔτ͕ෆे෼ • Auth0ͷManagement APIΛ௚઀ݺͿ 

Ϣʔβ؅ཧ • ϥΠϒϥϦͷαϙʔτ͕ෆे෼ • Auth0ͷManagement APIΛ௚઀ݺͿ ৄ͘͠͸Management APIͷ υΩϡϝϯτΛݟ͍ͯͩ͘͞ https://auth0.com/docs/ api/management/v2/ tokens 

Ҏ্