Angular+Auth0の話

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. Ҏ্