SPA×Auth0
by
Haruna Oka
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
SPA × Auth0 ~AWS & Angular7~
Slide 2
Slide 2 text
Haruna Oka Classmethod, Inc. Serverless Development Div. 2 @OkaHaruna
Slide 3
Slide 3 text
agenda ● 41"ʹ͍ͭͯ ● ͳΜͰ"VUI ● 41"ͷೝূ ● 0"VUI ● "VUIͷػೳ 3
Slide 4
Slide 4 text
41"ʹ͍ͭͯ 1
Slide 5
Slide 5 text
5 フレームワークの選定
Slide 6
Slide 6 text
6 Vue.js フレームワークの選定 Ø 学習コストが低く導入しやすい Ø 一つのファイルの中にHTML/JavaScript/CSSを 記述するので見通しがいい。 Ø 日本語の公式ドキュメントが充実 Ø v3.xからTypescriptで作られるらしい https://github.com/vuejs/roadmap Ø オリジナルのファイル形式(.vue)になる為、 エディタの使い勝手が悪い
Slide 7
Slide 7 text
7 フレームワークの選定 Ø 使っている人が多いので情報が豊富 Ø モバイル用プラットフォーム React Nativeが優秀 Ø 周辺ライブラリについての知識・調査が必要 Ø 環境作るのが大変 Ø 双方向バインディングできない React
Slide 8
Slide 8 text
8 フレームワークの選定 Angular Ø フルスタックフレームワーク Ø 実装はTypescript Ø rxjs標準 Ø 他のフレームワークと比べると学習コストが高 い
Slide 9
Slide 9 text
9 Angularを選んだ理由 l フルスタックなので本体だけでほぼ完結する l サーバーサイドの開発をやっているとなじみやすい l ngコマンドでアプリ作成、ビルド、テスト等ができる l テストサポートが充実 • JSテストフレームワーク:Jasmine • JSテストランナー:Karma • E2Eテスト:Protractor $ng e2e
Slide 10
Slide 10 text
ͳΜͰ"VUIʁ 2
Slide 11
Slide 11 text
11 ೝূج൫ΛҕͰ͖Δ ϕϯμʔϩοΫΠϯ͞Εͳ͍ 41"༻ͷυΩϡϝϯτ͕͔ͳΓॆ࣮
Slide 12
Slide 12 text
0"VUI Let’s start with the first set of slides 3
Slide 13
Slide 13 text
0"VUI )551ͰೝՄΛߦ͏ೝՄϑϨʔϜϫʔΫ
Slide 14
Slide 14 text
0"VUIͷೝূϑϩʔ https://auth0.com/docs/protocols/oauth2
Slide 15
Slide 15 text
0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password Credentials Ø Client Credentials
Slide 16
Slide 16 text
0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password Credentials Ø Client Credentials SPAはこれ
Slide 17
Slide 17 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL
Slide 18
Slide 18 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶄ $SFEFOUJBMSFRVFTU
Slide 19
Slide 19 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶄ $SFEFOUJBMSFRVFTU
Slide 20
Slide 20 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ $SFEFOUJBMSFRVFTU
Slide 21
Slide 21 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ $SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO
Slide 22
Slide 22 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ $SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO ᶈ 3FRVFTU
Slide 23
Slide 23 text
41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDLMPHJOMJOL ᶅ 3FEJSFDUUP MPHJO"VUIPSJ[BUJPO QSPNQU ᶆ "VUIFUJDBUFBOE$POTFOU ᶄ $SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO ᶈ 3FRVFTU
Slide 24
Slide 24 text
“ 24 0QFO*%$POOFDU 0*%$ 4
Slide 25
Slide 25 text
“ 25 0QFO*%$POOFDU 0*%$ = OAuth2 + 認証
Slide 26
Slide 26 text
Payload / ペイロード クレームと呼ばれるキーと値のペア の形式でユーザー情報が埋め込まれ たもの +TPO8FC5PLFOʢ+85ʣ Signature / 署名 署名を作成するにはヘッダーとペイ ロード、シークレットを使用します。 26 Header /ヘッダー トークンのの種類とハッシュアルゴ リズムが定義されたもの
Slide 27
Slide 27 text
ペイロードに含む予約済みのクレーム iss 発行者。アプリケーションやドメイン名を含む sub 誰を認証したか。エンドユーザを識別できるIDを含む aud 利用者。RPのクライアントIDを含む exp トークンの有効期限 iat トークンの発行日時 nonce リプレイアタック防止用の文字列 27
Slide 28
Slide 28 text
τʔΫϯͷߋ৽ ● τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 28
Slide 29
Slide 29 text
τʔΫϯͷߋ৽ ● τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 29 *NQMJDJU'MPXͷ߹ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍
Slide 30
Slide 30 text
τʔΫϯͷߋ৽ ● τʔΫϯͷ༗ޮظݶΛ͑ͨ߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 30 ˠ "VUIͰϩάΠϯ͢Δͱηογϣϯ͕࡞͞Ε ͍ͯΔͷͰDIFDL4FTTJPOϝιουʢ-PDLWʣΛ ͬͯηογϣϯঢ়گΛ֬ೝͰ͖Δɻ *NQMJDJU'MPXͷ߹ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍
Slide 31
Slide 31 text
"VUIͷศརͳػೳ 5
Slide 32
Slide 32 text
"VUIͷศརͳػೳ l "VUI-PDL l )PPLT l ΧελϜ%# l ϩάػೳ
Slide 33
Slide 33 text
"VUIͷศརͳػೳ l "VUI-PDL l )PPLT l ΧελϜ%# l ϩάػೳ → Dynamoも使える!
Slide 34
Slide 34 text
34 )PPLT l Beta版(2019.05.27現在) l Node.jsでAuth0の動作をカスタマイズできる l 拡張機能で外部のリポジトリからデプロイすることも できる。(Github、GitLab、Bitbucket)
Slide 35
Slide 35 text
35 ϩάػೳ l 管理アクションを含めた 全イベントを表示 l クエリで検索 l 拡張機能で外部サービス に出力 ・SumoLogic ・Splunk
Slide 36
Slide 36 text
41"ͷࣗಈσϓϩΠʢ͓·͚ʣ 6
Slide 37
Slide 37 text
ߏਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush CodePipeline CodeBuild buildspec.yml pre_build commandͰ $ng build build commandͰ $s3 sync ͱ $ cloudfront create-invalidation
Slide 38
Slide 38 text
ߏਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush stagingブランチにpush CodePipeline CodeBuild CodePipeline CodeBuild
Slide 39
Slide 39 text
ߏਤ(Amplify Console) AWS CodeCommit masterブランチにpush Amplify Console ɾ"$.ࣗಈͰ࡞ͯ͘͠ΕΔ ɾΧελϜυϝΠϯͰ͖Δ ビルドもテストもデプロイも 全部やってくれる!
Slide 40
Slide 40 text
"VUIͲΜͲΜ͍ͬͯ ͖·͠ΐ͏ 40
Slide 41
Slide 41 text
41 8&"3&)*3*/(" SERVERLESS ENGINEER!!!