Angular+Auth0の話

ng-japan meetup 2017 AutumnのLT資料

Transcript

1. Angular + Auth0ͷ࿩ খాത࢘ @hi1280 ng-japan meetup 2017 Autumn / 2017.10.10
2. খాത࢘(͓ͩͻΖ͠) @hi1280 • SE • Java • Angular
3. Auth0 • ೝূϓϥοτϑΥʔϜ • ֤छΞϓϦέʔγϣϯͱͷ࿈ܞ͕Մೳ(Angular ΋ରԠ) • Technology RadarͰ঺հ͞Ε͍ͯΔ
4. https://www.thoughtworks.com/radar/platforms
5. Angular + Auth0
6. ໨࣍ • ϩάΠϯ • Ϣʔβ৘ใऔಘ • API࣮ߦ • ೝՄ • Ϣʔβ؅ཧ
7. ϩάΠϯ
8. // ུ 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(); } } ೝূͷઃఆ ϩάΠϯը໘ىಈ
9. • Facebook • GitHub • Google • Twitter • MS Account ͳͲ Ϣʔβ໊+ύεϫʔυೝূ΋͋Δ IDϓϩόΠμʔ
10. ϩάΠϯೝূͷϑϩʔ (1)Auth0ͷϩάΠϯը໘͕ݺ͹ΕΔ (2)ίʔϧόοΫͷURL͕ݺ͹ΕΔ • Auth0ͷ؅ཧը໘ͰίʔϧόοΫURLͷڐՄ͕ඞཁ (3)ϧʔτίϯϙʔωϯτͷίϯετϥΫλ͕ݺ͹ΕΔ
11. ϩάΠϯೝূͷϑϩʔ (1)Auth0ͷϩάΠϯը໘͕ݺ͹ΕΔ (2)ίʔϧόοΫͷURL͕ݺ͹ΕΔ • Auth0ͷ؅ཧը໘ͰίʔϧόοΫURLͷڐՄ͕ඞཁ (3)ϧʔτίϯϙʔωϯτͷίϯετϥΫλ͕ݺ͹ΕΔ ৄ͘͠͸Quick Start Λݟ͍ͯͩ͘͞ https://auth0.com/docs/ quickstart/spa/angular2
12. Ϣʔβ৘ใऔಘ
13. 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); }); }
14. 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
15. API࣮ߦ
16. API࣮ߦ • JWTΛHTTPϦΫΤετʹؚΊΔϞδϡʔϧ • HttpClientͷInterceptorͱ࣮ͯ͠૷͞Ε͍ͯΔ
17. 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'); }
18. 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
19. ೝՄ
20. ೝՄ • RouterͷguardͰೝূࡁΈ͔Λ൑ఆ • Ϣʔβʹ෇༩͞ΕͨείʔϓͰΞΫηε੍ޚ • Auth0ͷRuleͰϢʔβͷείʔϓΛઃఆ
21. 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; } }
22. 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
23. Ϣʔβ؅ཧ
24. Ϣʔβ؅ཧ • ϥΠϒϥϦͷαϙʔτ͕ෆे෼ • Auth0ͷManagement APIΛ௚઀ݺͿ
25. Ϣʔβ؅ཧ • ϥΠϒϥϦͷαϙʔτ͕ෆे෼ • Auth0ͷManagement APIΛ௚઀ݺͿ ৄ͘͠͸Management APIͷ υΩϡϝϯτΛݟ͍ͯͩ͘͞ https://auth0.com/docs/ api/management/v2/ tokens
26. Ҏ্