SPA×Auth0

Angular＆AWS＆Auth0

Transcript

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