S3にて静的ホスティングしているWebページにCognitoでログイン機能をつけてみた

S3にて静的ホスティングしているWebページにCognitoでログイン機能をつけてみた

2021/04/07
AWS認定 デベロッパーアソシエイトの試験に出るかもなデモ見せあいっこ(ヤマムギvol.12)

https://yamamugi.connpass.com/event/206801/

Transcript

1. 2021/04/07 AWS認定 デベロッパーアソシエイトの試験に出るかもなデモ見せあいっこ(ヤマムギvol.12)
   S3にて静的ホスティングしているWebページ
   にCognitoでログイン機能をつけてみた
   1
   

   View Slide

2. 発表の前に
   2
   ・この資料は後日公開予定です。写真撮影もOKです。
   ・メモるよりは
   #yamamugi
   でツイート！
   ・セッション内容のシステムは今後変更される可能性が大い
   にあります。
   #yamamugi
   

   View Slide

3. @surumegohan smartmacchiato.life/
   surumegohan@gmail.com
   surumegohan.hatenablog.com/
   Twitter Blog Gmail Web
   3
   フリーランスエンジニア・投資家
   HarborSイベントパートナー
   宮崎 翔平
   

   View Slide

4. @surumegohan smartmacchiato.life/
   surumegohan@gmail.com
   surumegohan.hatenablog.com/
   Twitter Blog Gmail Web
   4
   フリーランスエンジニア・投資家
   HarborSイベントパートナー
   show
   

   View Slide

5. 最近よく見かけますね #HarborS
   5
   #yamamugi
   

   View Slide

6. おしゃれなコワーキングスペース
   6
   #yamamugi
   

   View Slide

7. Copyright © 2021 Anti-Pattern Inc. All rights reserved.
   HarborSイベントパートナーに就任
   HarborS運営会社がAWSエンジニ向けサービス「engineed」をリリース
   7
   株式会社アンチパターン 主要事業
   エンジニア特化型コミュニティスペース
   • ソフトウェアエンジニアに必要なサービスを提供
   • エンジニア向けセミナーなども実施
   ハイスペックエンジニア特化型マッチングサービス
   • 優秀なエンジニアと、高付加価値/高単価な案件を依頼
   したい企業のマッチングサービス
   初学者エンジニア育成プログラム
   • 初学者エンジニアにベテランのメンターがつき、
   オンライン/オフラインで相談可能な仕組みを提供
   • 大学生向けプログラミング学習コミュニティ
   Gateway
   ソフトウェア開発支援
   • 様々な企業に対するソフトウェア開発の支援事業
   - 特にWebサービス開発に強み
   HarborSのイベントパートナー
   エンジニアコミュニティHarborS
   は、勉強会やイベントが多数開催
   されており、ドロップインでの利
   用も可能なコワーキングスペース
   です。皆様もHarborS表参道にお
   越しください。
   AWS公式資格取得者限定プラットフォーム
   資格取得したらすぐに登録！
   ユーザ登録するだけでオファーを
   獲得。副業やフリーランスや転職
   のオファーを獲得しよう！
   実務レベルの実技試験も提供して
   おり、腕試しも可能！
   ユーザ登録（無料）受付中→
   

   View Slide

8. おととい
   AWS認定デベロッパーアソシエイトに合格しました
   8
   #yamamugi
   

   View Slide

9. おととい
   AWS認定デベロッパーアソシエイトに合格しました
   9
   合格体験記ブログ Amazonリンク
   #yamamugi
   

   View Slide

10. そろそろ
    10
    #yamamugi
    

    View Slide

11. 静的ホスティングのWebページに利用してみた
    11
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

12. まずは動いてるモノをみてみましょう
    12
    #yamamugi
    デモ
    

    View Slide

13. Amazon Cognitoとは
    13
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.htmlから引用
    #yamamugi
    Amazon Cognito
    Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの
    認証、許可、ユーザー管理をサポートしています。
    ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、
    Facebook、Amazon、Google、Apple などのサードパーティーを通じてサインインできます。
    

    View Slide

14. Amazon Cognitoとは
    14
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.htmlから引用
    #yamamugi
    Amazon Cognito
    Amazon Cognito の主な 2 つのコンポーネントは、ユーザープールと ID プールです。
    ユーザープールは、アプリユーザーのサインアップとサインインオプションを提供するユーザー
    ディレクトリです。
    ID プールは、AWS の他のサービスに対するアクセスをユーザーに許可します。ID プールとユー
    ザープールは別々に使用することも、一緒に使用することもできます。
    Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの
    認証、許可、ユーザー管理をサポートしています。
    ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、
    Facebook、Amazon、Google、Apple などのサードパーティーを通じてサインインできます。
    

    View Slide

15. Amazon Cognitoとは
    15
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.htmlから引用
    #yamamugi
    Amazon Cognito
    Amazon Cognito の主な 2 つのコンポーネントは、ユーザープールと ID プールです。
    ユーザープールは、アプリユーザーのサインアップとサインインオプションを提供するユーザー
    ディレクトリです。
    ID プールは、AWS の他のサービスに対するアクセスをユーザーに許可します。ID プールとユー
    ザープールは別々に使用することも、一緒に使用することもできます。
    Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの
    認証、許可、ユーザー管理をサポートしています。
    ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、
    Facebook、Amazon、Google、Apple などのサードパーティーを通じてサインインできます。
    /oauth2/authorize エンドポイントは HTTPS のみをサポートします。
    ユーザープールクライアントは通常、このリクエストをブラウザ経由で行います。
    ウェブブラウザは、Chrome または Firefox を使用できます。
    

    View Slide

16. Amazon Cognitoとは
    16
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.htmlから引用
    #yamamugi
    Amazon Cognito
    Amazon Cognito の主な 2 つのコンポーネントは、ユーザープールと ID プールです。
    ユーザープールは、アプリユーザーのサインアップとサインインオプションを提供するユーザー
    ディレクトリです。
    ID プールは、AWS の他のサービスに対するアクセスをユーザーに許可します。ID プールとユー
    ザープールは別々に使用することも、一緒に使用することもできます。
    Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの
    認証、許可、ユーザー管理をサポートしています。
    ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、
    Facebook、Amazon、Google、Apple などのサードパーティーを通じてサインインできます。
    要するに認証・認可を
    AWSにおまかせできるサービス
    

    View Slide

17. 静的ホスティングのWebページに利用してみた
    17
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

18. 静的ホスティングのWebページに利用してみた
    18
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

19. 静的ホスティングのWebページに利用してみた
    19
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    2.登録されているユーザーか確認
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

20. 静的ホスティングのWebページに利用してみた
    20
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    2.登録されているユーザーか確認
    3.トークン取得
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

21. 静的ホスティングのWebページに利用してみた
    21
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    2.登録されているユーザーか確認
    3.トークン取得
    4.トークンにて
    AWS認証許可
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

22. 静的ホスティングのWebページに利用してみた
    22
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    2.登録されているユーザーか確認
    3.トークン取得
    4.トークンにて
    AWS認証許可
    5.AWS認証が通ったのでS3からDynamoDB
    へアクセスして必要な情報を取得
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

23. 静的ホスティングのWebページに利用してみた
    23
    #yamamugi
    Amazon Simple Storage
    Service (Amazon S3)
    Amazon Cognito
    Amazon Cognito
    Amazon DynamoDB
    html , javascript
    AWS Cloud
    1.ブラウザでWebページ閲覧
    2.登録されているユーザーか確認
    3.トークン取得
    4.トークンにて
    AWS認証許可
    5.AWS認証が通ったのでS3からDynamoDB
    へアクセスして必要な情報を取得
    6.ログイン後の機能(DynamoDB)を
    用いたWebページを利用可能
    ユーザープール
    IDプール
    予め連携
    本日の
    登壇者とタイトル
    が格納されている
    

    View Slide

24. サインアップ（登録時）
    24
    #yamamugi
    確認メールを受信
    AWS関連の記載なし
    

    View Slide

25. ログイン画面にロゴ追加
    25
    #yamamugi
    ログイン画面が味気ない・・・
    企業ロゴを追加してみよう
    

    View Slide

26. やってみよう
    26
    #yamamugi
    デモ
    

    View Slide

27. Cognitoでログインシステムができました
    27
    #yamamugi
    コーディングを最小限に
    ログイン（サインアップ・サインイン）機能が作成できました
    静的ホスティングと合わせて、
    今回のCognitoの機能は資格試験範囲です
    

    View Slide

28. 参考サイト
    28
    #yamamugi
    ■Amazon Cognitoとは
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.html
    ■チュートリアル: Amazon S3 での静的ウェブサイトの設定
    https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html
    ■Amazon Cognito 開発者ガイド - Amazon Cognito ユーザープール
    https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pool-as-user-directory.html
    ■はじめてのCognito! CognitoのログインUIを使って認証システムを実装したまとめ
    https://bit.ly/2Q6ymoD
    ■Amazon Cognito のホストされたウェブの UI を設定する方法を教えてください。
    https://aws.amazon.com/jp/premiumsupport/knowledge-center/cognito-hosted-web-ui/
    ■AWSJavaScriptSDK
    https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html
    

    View Slide

29. 車輪の再発明は極力避けましょう
    29
    #yamamugi
    合格体験記ブログ Amazonリンク
    

    View Slide