SPA×Auth0

Angular＆AWS＆Auth0

Transcript

1. SPA × Auth0
   ~AWS & Angular7~
   

   View Slide

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

   View Slide

3. agenda
   ● 41"ʹ͍ͭͯ
   ● ͳΜͰ"VUI
   ● 41"ͷೝূ
   ● 0"VUI
   ● "VUIͷػೳ
   3
   

   View Slide

4. 41"ʹ͍ͭͯ
   1
   

   View Slide

5. 5
   フレームワークの選定
   

   View Slide

6. 6
   Vue.js
   フレームワークの選定
   Ø 学習コストが低く導入しやすい
   Ø 一つのファイルの中にHTML/JavaScript/CSSを
   記述するので見通しがいい。
   Ø 日本語の公式ドキュメントが充実
   Ø v3.xからTypescriptで作られるらしい
   https://github.com/vuejs/roadmap
   Ø オリジナルのファイル形式（.vue）になる為、
   エディタの使い勝手が悪い
   

   View Slide

7. 7
   フレームワークの選定
   Ø 使っている人が多いので情報が豊富
   Ø モバイル用プラットフォーム React
   Nativeが優秀
   Ø 周辺ライブラリについての知識・調査が必要
   Ø 環境作るのが大変
   Ø 双方向バインディングできない
   React
   

   View Slide

8. 8
   フレームワークの選定
   Angular Ø フルスタックフレームワーク
   Ø 実装はTypescript
   Ø rxjs標準
   Ø 他のフレームワークと比べると学習コストが高
   い
   

   View Slide

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

   View Slide

10. ͳΜͰ"VUIʁ
    2
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 0"VUIͷͭͷϑϩʔ
    Ø Authorization Code
    Ø Implicit
    Ø Resource Owner Password Credentials
    Ø Client Credentials
    

    View Slide

16. 0"VUIͷͭͷϑϩʔ
    Ø Authorization Code
    Ø Implicit
    Ø Resource Owner Password Credentials
    Ø Client Credentials
    SPAはこれ
    

    View Slide

17. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    

    View Slide

18. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶄ $SFEFOUJBMSFRVFTU
    

    View Slide

19. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶅ 3FEJSFDUUP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU ᶄ $SFEFOUJBMSFRVFTU
    

    View Slide

20. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶅ 3FEJSFDUUP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU
    ᶆ "VUIFUJDBUFBOE$POTFOU
    ᶄ $SFEFOUJBMSFRVFTU
    

    View Slide

21. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶅ 3FEJSFDUUP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU
    ᶆ "VUIFUJDBUFBOE$POTFOU
    ᶄ $SFEFOUJBMSFRVFTU
    ᶇ *%5PLFOBOEPS
    "DDFTT5PLFO
    

    View Slide

22. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶅ 3FEJSFDUUP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU
    ᶆ "VUIFUJDBUFBOE$POTFOU
    ᶄ $SFEFOUJBMSFRVFTU
    ᶇ *%5PLFOBOEPS
    "DDFTT5PLFO
    ᶈ 3FRVFTU
    
    

    View Slide

23. 41"ͷೝূϑϩʔʢ*NQMJDJUʣ
    ᶃ $MJDLMPHJOMJOL
    ᶅ 3FEJSFDUUP
    MPHJO"VUIPSJ[BUJPO
    QSPNQU
    ᶆ "VUIFUJDBUFBOE$POTFOU
    ᶄ $SFEFOUJBMSFRVFTU
    ᶇ *%5PLFOBOEPS
    "DDFTT5PLFO
    ᶈ 3FRVFTU
    
    

    View Slide

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

    View Slide

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

    View Slide

26. Payload / ペイロード
    クレームと呼ばれるキーと値のペア
    の形式でユーザー情報が埋め込まれ
    たもの
    +TPO8FC5PLFOʢ+85ʣ
    Signature / 署名
    署名を作成するにはヘッダーとペイ
    ロード、シークレットを使用します。
    26
    Header /ヘッダー
    トークンのの種類とハッシュアルゴ
    リズムが定義されたもの
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. "VUIͷศརͳػೳ
    5
    

    View Slide

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

    View Slide

33. "VUIͷศརͳػೳ
    l "VUI-PDL
    l )PPLT
    l ΧελϜ%#
    l ϩάػೳ
    → Dynamoも使える！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. ߏ੒ਤʢࣗಈσϓϩΠʣ
    CodeCommit
    masterブランチにpush
    CodePipeline CodeBuild
    buildspec.yml
    pre_build commandͰ $ng build
    build commandͰ $s3 sync ͱ $ cloudfront create-invalidation
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide