Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular+Auth0の話

Ba617809127d7a39e59aeb3124974165?s=47 Hiroshi Oda
October 10, 2017

 Angular+Auth0の話

ng-japan meetup 2017 AutumnのLT資料

Ba617809127d7a39e59aeb3124974165?s=128

Hiroshi Oda

October 10, 2017
Tweet

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