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
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リンク