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
600
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.2k
1人運用を支えるAmazon EKSノウハウ / Amazon EKS Know-How
hi1280
6
3.3k
ValidationMessageをいい感じにしようとした話
hi1280
1
630
Other Decks in Technology
See All in Technology
Node.js 2025: What's new and what's next
ruyadorno
0
840
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
250
AIフル活用で挑む!空間アプリ開発のリアル
taat
0
130
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
0
1.2k
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
490
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
140
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
120
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
260
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
770
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
11k
KATA
mclloyd
PRO
32
15k
Scaling GitHub
holman
463
140k
Done Done
chrislema
185
16k
Unsuck your backbone
ammeep
671
58k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Adaptive Systems
keathley
44
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Context Engineering - Making Every Token Count
addyosmani
7
280
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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
Ҏ্