SPA×Auth0

Transcript

1. 1.

   SPA × Auth0 ~AWS & Angular7~

2. 2.

   Haruna Oka Classmethod, Inc. Serverless Development Div. 2 @OkaHaruna

3. 3.

   agenda • 41"ʹ͍ͭͯ • ͳΜͰ"VUI • 41"ͷೝূ • 0"VUI •

   "VUIͷػೳ 3
4. 4.

   41"ʹ͍ͭͯ 1

5. 5.

   5 フレームワークの選定

6. 6.

   6 Vue.js フレームワークの選定 Ø 学習コストが低く導入しやすい Ø 一つのファイルの中にHTML/JavaScript/CSSを 記述するので見通しがいい。 Ø 日本語の公式ドキュメントが充実

   Ø v3.xからTypescriptで作られるらしい https://github.com/vuejs/roadmap Ø オリジナルのファイル形式（.vue）になる為、 エディタの使い勝手が悪い
7. 7.

   7 フレームワークの選定 Ø 使っている人が多いので情報が豊富 Ø モバイル用プラットフォーム React Nativeが優秀 Ø 周辺ライブラリについての知識・調査が必要

   Ø 環境作るのが大変 Ø 双方向バインディングできない React
8. 8.

   8 フレームワークの選定 Angular Ø フルスタックフレームワーク Ø 実装はTypescript Ø rxjs標準 Ø

   他のフレームワークと比べると学習コストが高 い
9. 9.

   9 Angularを選んだ理由 l フルスタックなので本体だけでほぼ完結する l サーバーサイドの開発をやっているとなじみやすい l ngコマンドでアプリ作成、ビルド、テスト等ができる l テストサポートが充実

   • JSテストフレームワーク：Jasmine • JSテストランナー：Karma • E2Eテスト：Protractor $ng e2e
10. 10.

    ͳΜͰ"VUIʁ 2

11. 11.

    11 ೝূج൫Λҕ೚Ͱ͖Δ ϕϯμʔϩοΫΠϯ͞Εͳ͍ 41"༻ͷυΩϡϝϯτ͕͔ͳΓॆ࣮

12. 12.

    0"VUI Let’s start with the first set of slides 3

13. 13.

    0"VUI )551ͰೝՄΛߦ͏ೝՄϑϨʔϜϫʔΫ

14. 14.

    0"VUIͷೝূϑϩʔ https://auth0.com/docs/protocols/oauth2

15. 15.

    0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password

    Credentials Ø Client Credentials
16. 16.

    0"VUIͷͭͷϑϩʔ Ø Authorization Code Ø Implicit Ø Resource Owner Password

    Credentials Ø Client Credentials SPAはこれ
17. 17.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL

18. 18.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶄ $SFEFOUJBM
    SFRVFTU

19. 19.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶅ 3FEJSFDU
    UP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶄ $SFEFOUJBM
    SFRVFTU

20. 20.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶅ 3FEJSFDU
    UP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶆ "VUIFUJDBUF
    BOE
    $POTFOU
    ᶄ

    $SFEFOUJBM
    SFRVFTU
21. 21.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶅ 3FEJSFDU
    UP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶆ "VUIFUJDBUF
    BOE
    $POTFOU
    ᶄ

    $SFEFOUJBM
    SFRVFTU ᶇ *%
    5PLFO
    BOEPS
    "DDFTT
    5PLFO
22. 22.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶅ 3FEJSFDU
    UP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶆ "VUIFUJDBUF
    BOE
    $POTFOU
    ᶄ

    $SFEFOUJBM
    SFRVFTU ᶇ *%
    5PLFO
    BOEPS
    "DDFTT
    5PLFO ᶈ 3FRVFTU
23. 23.

    41"ͷೝূϑϩʔʢ*NQMJDJUʣ ᶃ $MJDL
    MPHJO
    MJOL ᶅ 3FEJSFDU
    UP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶆ "VUIFUJDBUF
    BOE
    $POTFOU
    ᶄ

    $SFEFOUJBM
    SFRVFTU ᶇ *%
    5PLFO
    BOEPS
    "DDFTT
    5PLFO ᶈ 3FRVFTU
24. 24.

    “ 24 0QFO*%$POOFDU 0*%$ 4

25. 25.

    “ 25 0QFO*%$POOFDU 0*%$ = OAuth2 + 認証

26. 26.

    Payload / ペイロード クレームと呼ばれるキーと値のペア の形式でユーザー情報が埋め込まれ たもの +TPO
    8FC
    5PLFOʢ+85ʣ Signature / 署名

    署名を作成するにはヘッダーとペイ ロード、シークレットを使用します。 26 Header /ヘッダー トークンのの種類とハッシュアルゴ リズムが定義されたもの
27. 27.

    ペイロードに含む予約済みのクレーム iss 発行者。アプリケーションやドメイン名を含む sub 誰を認証したか。エンドユーザを識別できるIDを含む aud 利用者。RPのクライアントIDを含む exp トークンの有効期限 iat

    トークンの発行日時 nonce リプレイアタック防止用の文字列 27
28. 28.

    τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ௒͑ͨ৔߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 28

29. 29.

    τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ௒͑ͨ৔߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 29 *NQMJDJU
    'MPXͷ৔߹͸ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍

30. 30.

    τʔΫϯͷߋ৽ • τʔΫϯͷ༗ޮظݶΛ௒͑ͨ৔߹ϦϑϨογϡτʔΫϯΛ༻ ͍ͯΞΫηετʔΫϯˍ*%τʔΫϯΛ࠶औಘͰ͖Δɻ 30 ˠ "VUIͰϩάΠϯ͢Δͱηογϣϯ͕࡞੒͞Ε ͍ͯΔͷͰDIFDL4FTTJPO
    ϝιουʢ-PDL
    WʣΛ ࢖ͬͯηογϣϯঢ়گΛ֬ೝͰ͖Δɻ *NQMJDJU
    'MPXͷ৔߹͸ϦϑϨογϡτʔΫϯ͕ൃߦ͞Εͳ͍

31. 31.

    "VUIͷศརͳػೳ 5

32. 32.

    "VUIͷศརͳػೳ l "VUI
    -PDL l )PPLT l ΧελϜ%# l ϩάػೳ

33. 33.

    "VUIͷศརͳػೳ l "VUI
    -PDL l )PPLT l ΧελϜ%# l ϩάػೳ →

    Dynamoも使える！
34. 34.

    34 )PPLT l Beta版（2019.05.27現在） l Node.jsでAuth0の動作をカスタマイズできる l 拡張機能で外部のリポジトリからデプロイすることも できる。（Github、GitLab、Bitbucket）

35. 35.

    35 ϩάػೳ l 管理アクションを含めた 全イベントを表示 l クエリで検索 l 拡張機能で外部サービス に出力

    ・SumoLogic ・Splunk
36. 36.

    41"ͷࣗಈσϓϩΠʢ͓·͚ʣ 6

37. 37.

    ߏ੒ਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush CodePipeline CodeBuild buildspec.yml pre_build commandͰ $ng build

    build commandͰ $s3 sync ͱ $ cloudfront create-invalidation
38. 38.

    ߏ੒ਤʢࣗಈσϓϩΠʣ CodeCommit masterブランチにpush stagingブランチにpush CodePipeline CodeBuild CodePipeline CodeBuild

39. 39.

    ߏ੒ਤ（Amplify Console） AWS CodeCommit masterブランチにpush Amplify Console ɾ"$.΋ࣗಈͰ࡞੒ͯ͘͠ΕΔ ɾΧελϜυϝΠϯ΋Ͱ͖Δ ビルドもテストもデプロイも

    全部やってくれる！
40. 40.

    "VUIͲΜͲΜ࢖͍ͬͯ ͖·͠ΐ͏ 40

41. 41.

    41 8&
    "3&
    )*3*/(
    " SERVERLESS ENGINEER!!!