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
170
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
6k
re:Growth 2020 Serverless
okaharuna
2
1.4k
EventBridgeでAWSとShopifyの統合
okaharuna
2
6.1k
Serverless SPA development starting with Angular
okaharuna
0
3.3k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2.1k
Fargate_Super_Introduction.pdf
okaharuna
2
3.2k
Other Decks in Technology
See All in Technology
映像エッジAIにおけるNode-RED活用事例
emirmatsui
0
130
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
150
Building a cloud native business on open source
lizrice
0
170
OCIjp_Oracle AI World_Recap
shinpy
1
160
旅で応援する✈️ NEWTが目指すコミュニティ支援とあたらしい旅行 / New Travel: Supporting by NEWT on Your Journey
mii3king
0
140
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
210
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
240
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
390
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Gamification - CAS2011
davidbonilla
81
5.5k
Facilitating Awesome Meetings
lara
57
6.6k
Optimizing for Happiness
mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Building Adaptive Systems
keathley
44
2.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!!!