LoginSignup
3
2
@mkttks

AWS CognitoでWebサイトにログイン機能を実装してみる

Last updated at Posted at 2023-07-02

やりたいこと

前回の記事（https://qiita.com/mkttks/items/b0f7d4b2b6756e7ed3c8 ）で作ったWebサイトにログイン機能を実装します。AWS Cognitoを使えばログイン機能が実装できます。

内容は引き続き下記の公式チュートリアルに沿ったものです。
https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

システム構成図

システム構成図

公式チュートリアルから引っ張ってきた図だとこんな感じです。

手順

ユーザプールを準備する

Cognitoでユーザプールを作成します。
ユーザプールとはユーザのIDやパスワードを覚えておくセットみたいなものです（たぶん）。

AWS Cognitoにログイン

  1. AWS Consoleの検索欄に「cognito」と入力
  2. 出てきたCognitoアイコンをクリック
    image.png

ユーザプールを作成

  1. 「ユーザープール」->「ユーザープールを作成」をクリック
    image.png
  2. 「サインインエクスペリエンスを設定」->「認証プロバイダー」->「Cognito ユーザープールのサインインオプション」で「Eメール」にチェックを入れる（他のチェックは外す）
  3. 「次へ」をクリック
    image.png
  4. 「セキュリティ要件を設定」->「多要素認証」->「MFAなし」にチェックを入れる
    （MFAを設定したい場合は他の選択肢を選べばよさそうです。自分はまだ試してません）
    image.png
  5. 他デフォルトのまま「次へ」をクリック
    image.png
  6. 「サインアップエクスペリエンスを設定」はすべてデフォルトのまま「次へ」をクリック
    image.png
  7. 「メッセージ配信を設定」->「Eメール」->「Eメールプロバイダー」->「CognitoでEメールを送信」にチェックを入れる
    image.png
  8. 「送信先のEメールアドレス」はデフォルトのままでOK（このメールアドレスから認証コードが飛んできます。メール受信拒否の設定をしている場合はご注意ください。）
    image.png
  9. 「アプリケーション統合」->「ユーザープール名」->「ユーザープール名」に任意の名前を入力（ここではWildRydesとします）
    image.png
  10. 「最初のアプリケーションクライアント」->「アプリケーションクライアント名」に任意の名前を入力（ここではWildRydesWebAppとします）
    image.png
  11. 他デフォルトのまま「次へ」をクリック
    image.png
  12. 「確認および作成」で大丈夫そうなら「ユーザープールを作成」をクリック
    image.png

ユーザプールができました。
image.png

ユーザプールのIDを確認する

後で必要になるユーザプールIDとユーザプールクライアントIDをメモします。

ユーザープールIDを確認

  1. Cognitoにアクセスして「ユーザープール」のユーザープール名をクリック
    image.png

「ユーザープールの概要」にユーザープールIDがあるのでメモします。
image.png

ユーザープールクライアントIDを確認

  1. タブの「アプリケーションの統合」をクリック
    image.png

「アプリクライアントと分析」にユーザープールクライアントIDがあるのでメモします。
image.png

ログイン機能を実装する

それではユーザプールを使ってログイン機能を実装します。サンプルコードにはユーザプールの情報以外はあらかじめ実装されています。

あらためてサンプルコードを取得したい方はこちらからどうぞ
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

AWS Cloud9にアクセス

  1. AWS Consoleの検索欄で「cloud9」と入力
  2. Cloud9のアイコンをクリック
    image.png
  3. 前回作成した環境の「Cloud9 IDE」を開く
    image.png

ソースコードを編集

  1. wildryde-site/js/config.jsを開く
    image.png
  2. cognitoテーブルのuserPoolIdに先ほどメモしたユーザープールIDを入力
  3. cognitoテーブルのuserPoolClientIdに先ほどメモしたユーザープールクライアントIDを入力
  4. cognitoテーブルのregionにリージョンを入力（東京リージョンで作業している場合はap-northeast-1）
window._config = {
    cognito: {
        userPoolId: '｛ユーザープールID｝', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '｛ユーザープールクライアントID｝', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: '｛リージョン名｝' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};

変更を反映

変更したファイルを保存してCodeCommitのGitrリポジトリに反映します。

  1. Cloud9のターミナルで以下のコマンドを入力
$ git add .
$ git commit -m "new_config"
$ git push

動作確認

Webサイトにアクセスしてログイン機能が使えるか試してみましょう。

  1. AWS Consoleの検索欄に「amplify」と入力
  2. AWS Amplifyのロゴをクリック
    image.png
  3. 前回作成したアプリを選択して左下のURLからWebサイトにアクセスします。
    image.png
  4. WebサイトのメニューのGIDDY UP!をクリック
    image.png
  5. Eメールアドレスとパスワードを入力
  6. 「Let’s RYDE」をクリック
    image.png
  7. メールで認証コードが飛んでくるのでコピーする
    image.png
  8. Eメールと認証コードを入力
  9. 「VERIFY」をクリック
    image.png

サインイン画面が出てくるので登録したEメールとパスワードを入力してみましょう。サインインできたら成功です！
image.png
作成したユーザはCognitoの「ユーザープール」->「（ユーザープール名）」->「ユーザー」->「ユーザー名」で確認できます。またこの画面でユーザの削除などもできるようです。
image.png

まとめ

今回はAWS Cognitoを使ってWebサイトにログイン機能を実装しました。
次回（ https://qiita.com/mkttks/items/c30e993adb520869dbb4 ）はAWS Lambda と Amazon DynamoDB を使用してバックエンドの処理を実装していきます。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2