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

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

4216f4ebe69909923f8e36df5d054740?s=47 show
April 07, 2021

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

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

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

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

4216f4ebe69909923f8e36df5d054740?s=128

show

April 07, 2021
Tweet

Transcript

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

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

  3. @surumegohan smartmacchiato.life/ surumegohan@gmail.com surumegohan.hatenablog.com/ Twitter Blog Gmail Web 3 フリーランスエンジニア・投資家

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

    HarborSイベントパートナー show
  5. 最近よく見かけますね #HarborS 5 #yamamugi

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

  7. Copyright © 2021 Anti-Pattern Inc. All rights reserved. HarborSイベントパートナーに就任 HarborS運営会社がAWSエンジニ向けサービス「engineed」をリリース

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

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

  10. そろそろ 10 #yamamugi

  11. 静的ホスティングのWebページに利用してみた 11 #yamamugi Amazon Simple Storage Service (Amazon S3) Amazon

    Cognito Amazon Cognito Amazon DynamoDB html , javascript AWS Cloud ユーザープール IDプール 予め連携 本日の 登壇者とタイトル が格納されている
  12. まずは動いてるモノをみてみましょう 12 #yamamugi デモ

  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 などのサードパーティーを通じてサインインできます。
  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 などのサードパーティーを通じてサインインできます。
  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 を使用できます。
  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におまかせできるサービス
  17. 静的ホスティングのWebページに利用してみた 17 #yamamugi Amazon Simple Storage Service (Amazon S3) Amazon

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

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

    Cognito Amazon Cognito Amazon DynamoDB html , javascript AWS Cloud 1.ブラウザでWebページ閲覧 2.登録されているユーザーか確認 ユーザープール IDプール 予め連携 本日の 登壇者とタイトル が格納されている
  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プール 予め連携 本日の 登壇者とタイトル が格納されている
  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プール 予め連携 本日の 登壇者とタイトル が格納されている
  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プール 予め連携 本日の 登壇者とタイトル が格納されている
  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プール 予め連携 本日の 登壇者とタイトル が格納されている
  24. サインアップ(登録時) 24 #yamamugi 確認メールを受信 AWS関連の記載なし

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

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

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

  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
  29. 車輪の再発明は極力避けましょう 29 #yamamugi 合格体験記ブログ Amazonリンク