SPA×Auth0 - Speaker Deck

SPA×Auth0

by Haruna Oka

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 ɾ"$.΋ࣗಈͰ࡞੒ͯ͘͠ΕΔ ɾΧελϜυϝΠϯ΋Ͱ͖Δ ビルドもテストもデプロイも全部やってくれる！