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
SPA×Auth0
Search
Haruna Oka
May 27, 2019
Technology
5
2k
SPA×Auth0
Angular&AWS&Auth0
Haruna Oka
May 27, 2019
Tweet
Share
More Decks by Haruna Oka
See All by Haruna Oka
AWS AppSyncと仲良くするためのTips
okaharuna
1
150
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
5.8k
re:Growth 2020 Serverless
okaharuna
2
1.3k
EventBridgeでAWSとShopifyの統合
okaharuna
2
6k
Serverless SPA development starting with Angular
okaharuna
0
3.3k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2.1k
Fargate_Super_Introduction.pdf
okaharuna
2
3.1k
Other Decks in Technology
See All in Technology
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
330
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
本が全く読めなかった過去の自分へ
genshun9
0
590
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
130
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
How Community Opened Global Doors
hiroramos4
PRO
1
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Wasm元年
askua
0
150
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
550
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
320
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Unsuck your backbone
ammeep
671
58k
Thoughts on Productivity
jonyablonski
69
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing for humans not robots
tammielis
253
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
SPA × Auth0 ~AWS & Angular7~
Haruna Oka Classmethod, Inc. Serverless Development Div. 2 @OkaHaruna
agenda • 41"ʹ͍ͭͯ • ͳΜͰ"VUI • 41"ͷೝূ • 0"VUI •
"VUIͷػೳ 3
41"ʹ͍ͭͯ 1
5 フレームワークの選定
6 Vue.js フレームワークの選定 Ø 学習コストが低く導入しやすい Ø 一つのファイルの中にHTML/JavaScript/CSSを 記述するので見通しがいい。 Ø 日本語の公式ドキュメントが充実
Ø v3.xからTypescriptで作られるらしい https://github.com/vuejs/roadmap Ø オリジナルのファイル形式(.vue)になる為、 エディタの使い勝手が悪い
7 フレームワークの選定 Ø 使っている人が多いので情報が豊富 Ø モバイル用プラットフォーム React Nativeが優秀 Ø 周辺ライブラリについての知識・調査が必要
Ø 環境作るのが大変 Ø 双方向バインディングできない React
8 フレームワークの選定 Angular Ø フルスタックフレームワーク Ø 実装はTypescript Ø rxjs標準 Ø
他のフレームワークと比べると学習コストが高 い
9 Angularを選んだ理由 l フルスタックなので本体だけでほぼ完結する l サーバーサイドの開発をやっているとなじみやすい l ngコマンドでアプリ作成、ビルド、テスト等ができる l テストサポートが充実
• JSテストフレームワーク:Jasmine • JSテストランナー:Karma • E2Eテスト:Protractor $ng e2e
ͳΜͰ"VUIʁ 2
11 ೝূج൫ΛҕͰ͖Δ ϕϯμʔϩοΫΠϯ͞Εͳ͍ 41"༻ͷυΩϡϝϯτ͕͔ͳΓॆ࣮
0"VUI Let’s start with the first set of slides 3
0"VUI )551ͰೝՄΛߦ͏ೝՄϑϨʔϜϫʔΫ
0"VUIͷೝূϑϩʔ https://auth0.com/docs/protocols/oauth2
0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password
Credentials Ø Client Credentials
0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password
Credentials Ø Client Credentials SPAはこれ
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶄ $SFEFOUJBMSFRVFTU
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶄ $SFEFOUJBMSFRVFTU
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ
$SFEFOUJBMSFRVFTU
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ
$SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ
$SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO ᶈ 3FRVFTU
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ
$SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO ᶈ 3FRVFTU
“ 24 0QFO*%$POOFDU 0*%$ 4
“ 25 0QFO*%$POOFDU 0*%$ = OAuth2 + 認証
Payload / ペイロード クレームと呼ばれるキーと値のペア の形式でユーザー情報が埋め込まれ たもの +TPO8FC5PLFOʢ+85ʣ Signature / 署名
署名を作成するにはヘッダーとペイ ロード、シークレットを使用します。 26 Header /ヘッダー トークンのの種類とハッシュアルゴ リズムが定義されたもの
ペイロードに含む予約済みのクレーム iss 発行者。アプリケーションやドメイン名を含む sub 誰を認証したか。エンドユーザを識別できるIDを含む aud 利用者。RPのクライアントIDを含む exp トークンの有効期限 iat
トークンの発行日時 nonce リプレイアタック防止用の文字列 27
τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 28
τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 29 *NQMJDJU'MPXͷ߹ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍
τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 30 ˠ "VUIͰϩάΠϯ͢Δͱηογϣϯ͕࡞͞Ε ͍ͯΔͷͰDIFDL4FTTJPOϝιουʢ-PDLWʣΛ ͬͯηογϣϯঢ়گΛ֬ೝͰ͖Δɻ *NQMJDJU'MPXͷ߹ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍
"VUIͷศརͳػೳ 5
"VUIͷศརͳػೳ l "VUI-PDL l )PPLT l ΧελϜ%# l ϩάػೳ
"VUIͷศརͳػೳ l "VUI-PDL l )PPLT l ΧελϜ%# l ϩάػೳ →
Dynamoも使える!
34 )PPLT l Beta版(2019.05.27現在) l Node.jsでAuth0の動作をカスタマイズできる l 拡張機能で外部のリポジトリからデプロイすることも できる。(Github、GitLab、Bitbucket)
35 ϩάػೳ l 管理アクションを含めた 全イベントを表示 l クエリで検索 l 拡張機能で外部サービス に出力
・SumoLogic ・Splunk
41"ͷࣗಈσϓϩΠʢ͓·͚ʣ 6
ߏਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush CodePipeline CodeBuild buildspec.yml pre_build commandͰ $ng build
build commandͰ $s3 sync ͱ $ cloudfront create-invalidation
ߏਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush stagingブランチにpush CodePipeline CodeBuild CodePipeline CodeBuild
ߏਤ(Amplify Console) AWS CodeCommit masterブランチにpush Amplify Console ɾ"$.ࣗಈͰ࡞ͯ͘͠ΕΔ ɾΧελϜυϝΠϯͰ͖Δ ビルドもテストもデプロイも
全部やってくれる!
"VUIͲΜͲΜ͍ͬͯ ͖·͠ΐ͏ 40
41 8&"3&)*3*/(" SERVERLESS ENGINEER!!!