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

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

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

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

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

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

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

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

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

そろそろ 10 #yamamugi

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

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

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 などのサードパーティーを通じてサインインできます。

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 などのサードパーティーを通じてサインインできます。

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 を使用できます。

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におまかせできるサービス

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

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

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

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

静的ホスティングの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プール 予め連携 本日の 登壇者とタイトル が格納されている

静的ホスティングの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プール 予め連携 本日の 登壇者とタイトル が格納されている

静的ホスティングの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 #yamamugi 確認メールを受信 AWS関連の記載なし

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

やってみよう 26 #yamamugi デモ

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

参考サイト 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 #yamamugi 合格体験記ブログ Amazonリンク