Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular+Auth0の話
Search
Hiroshi Oda
October 10, 2017
Technology
0
550
Angular+Auth0の話
ng-japan meetup 2017 AutumnのLT資料
Hiroshi Oda
October 10, 2017
Tweet
Share
More Decks by Hiroshi Oda
See All by Hiroshi Oda
グローバルIoTスタートアップにおける2年強に及ぶちょうど良いデータ基盤への歩み / Global IoT Startup Data Infrastructure
hi1280
0
1.1k
1人運用を支えるAmazon EKSノウハウ / Amazon EKS Know-How
hi1280
6
3.2k
ValidationMessageをいい感じにしようとした話
hi1280
1
610
Other Decks in Technology
See All in Technology
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
200
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
クラウド食堂とは?
hiyanger
0
130
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
210
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
100
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
900
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Building Adaptive Systems
keathley
40
2.4k
Optimizing for Happiness
mojombo
377
70k
How GitHub (no longer) Works
holman
314
140k
It's Worth the Effort
3n
184
28k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Designing Experiences People Love
moore
140
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How STYLIGHT went responsive
nonsquared
99
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
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
Ҏ্