Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SPA×Auth0

 SPA×Auth0

Angular&AWS&Auth0

C48e299db326cf1bf10cf2d0ab399f10?s=128

Haruna Oka

May 27, 2019
Tweet

More Decks by Haruna Oka

Other Decks in Technology

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ʣ ᶃ $MJDLMPHJOMJOL

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

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

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

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

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

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

    $SFEFOUJBMSFRVFTU ᶇ *%5PLFOBOEPS "DDFTT5PLFO ᶈ 3FRVFTU
  24. “ 24 0QFO*%$POOFDU 0*%$ 4

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

  26. Payload / ペイロード クレームと呼ばれるキーと値のペア の形式でユーザー情報が埋め込まれ たもの +TPO8FC5PLFOʢ+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ϝιουʢ-PDLWʣΛ ࢖ͬͯηογϣϯঢ়گΛ֬ೝͰ͖Δɻ *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!!!