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
1.9k
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
110
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
5.3k
re:Growth 2020 Serverless
okaharuna
2
1.3k
EventBridgeでAWSとShopifyの統合
okaharuna
2
5.6k
Serverless SPA development starting with Angular
okaharuna
0
3.2k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2k
Fargate_Super_Introduction.pdf
okaharuna
2
3k
Other Decks in Technology
See All in Technology
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
初心者に Vue.js を 教えるには
tsukuha
5
390
Forget efficiency – Become more productive without the stress
ufried
0
140
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
4.1k
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
YesSQL, Process and Tooling at Scale
rocio
167
14k
For a Future-Friendly Web
brad_frost
175
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Fireside Chat
paigeccino
32
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Adopting Sorbet at Scale
ufuk
73
9k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
KATA
mclloyd
29
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Building Adaptive Systems
keathley
38
2.2k
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!!!