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
590
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
620
Other Decks in Technology
See All in Technology
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
540
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
270
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
本当にわかりやすいAIエージェント入門
segavvy
10
5.9k
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
140
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
160
AI工学特論: MLOps・継続的評価
asei
10
1.6k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
146
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Scaling GitHub
holman
461
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
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
Ҏ্