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