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

SPA×Auth0

 SPA×Auth0

Angular&AWS&Auth0

Haruna Oka

May 27, 2019
Tweet

More Decks by Haruna Oka

Other Decks in Technology

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