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

# やりたいこと
前回の記事（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/

# システム構成図

![システム構成図](https://d1.awsstatic.com/Test%20Images/Kate%20Test%20Images/Serverless_Web_App_LP_assets-03.1403870f0fabeb6a11d3e4116092aa6b19b6a924.png)

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

# 手順

## ユーザプールを準備する

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

### AWS Cognitoにログイン

1. AWS Consoleの検索欄に「cognito」と入力
1. 出てきたCognitoアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/4a8b5af5-b198-504a-fff0-6f919ade6473.png)

### ユーザプールを作成
1. 「ユーザープール」->「ユーザープールを作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/7380a7cc-3153-efef-26a0-6229eb665307.png)
1. 「サインインエクスペリエンスを設定」->「認証プロバイダー」->「Cognito ユーザープールのサインインオプション」で「Eメール」にチェックを入れる（他のチェックは外す）
1. 「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/ade6fc52-51b9-92ed-a6de-57b8734af499.png)
1. 「セキュリティ要件を設定」->「多要素認証」->「MFAなし」にチェックを入れる
（MFAを設定したい場合は他の選択肢を選べばよさそうです。自分はまだ試してません）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/b752754c-8c03-effc-3264-f9920353e9bc.png)
1. 他デフォルトのまま「次へ」をクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/e493a229-019c-b625-4ce8-61b0577dbd61.png)
1. 「サインアップエクスペリエンスを設定」はすべてデフォルトのまま「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/b49d6c92-740c-c793-be7b-32eaeb3e8c00.png)
1. 「メッセージ配信を設定」->「Eメール」->「Eメールプロバイダー」->「CognitoでEメールを送信」にチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/818b6e87-8e7b-bdfd-dada-cf9749993e28.png)
1. 「送信先のEメールアドレス」はデフォルトのままでOK（このメールアドレスから認証コードが飛んできます。メール受信拒否の設定をしている場合はご注意ください。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/f73fe469-137b-4f8c-06c6-56f28ad46eea.png)
1. 「アプリケーション統合」->「ユーザープール名」->「ユーザープール名」に任意の名前を入力（ここではWildRydesとします）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/941ad417-f5ce-8c7f-d6cf-23346438da61.png)
1. 「最初のアプリケーションクライアント」->「アプリケーションクライアント名」に任意の名前を入力（ここではWildRydesWebAppとします）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/65a30e00-1853-3132-c773-b441887fead9.png)
1. 他デフォルトのまま「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/1d699192-225a-7c50-edb0-453af39d5a03.png)
1. 「確認および作成」で大丈夫そうなら「ユーザープールを作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/f19514a7-59f8-c0ef-aa15-2284797d2d87.png)

ユーザプールができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/38b55de0-ae9c-fa03-4a70-030784f0a8d4.png)

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

### ユーザープールIDを確認
1. Cognitoにアクセスして「ユーザープール」のユーザープール名をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/81823407-4543-3c4d-eadf-42076cac32fb.png)

「ユーザープールの概要」にユーザープールIDがあるのでメモします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/2e7ad0a6-af54-8470-094a-c7ff55719332.png)
### ユーザープールクライアントIDを確認
1. タブの「アプリケーションの統合」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/abc6e21d-11c2-e952-cc5f-005ab02c66c6.png)

「アプリクライアントと分析」にユーザープールクライアントIDがあるのでメモします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/00e51c8e-d3fc-e282-b81c-b41fedfc2a32.png)

## ログイン機能を実装する

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

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

### AWS Cloud9にアクセス
1. AWS Consoleの検索欄で「cloud9」と入力
1. Cloud9のアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/a9a4cec0-7ac3-a929-027a-f1460a71e200.png)
1. 前回作成した環境の「Cloud9 IDE」を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/4b69f6e6-9bf5-18bd-68cd-159ddc831bfc.png)

### ソースコードを編集
1. wildryde-site/js/config.jsを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/63f9d046-05ba-fc55-ee5b-3cee94fbb57f.png)
1. cognitoテーブルのuserPoolIdに先ほどメモしたユーザープールIDを入力
1. cognitoテーブルのuserPoolClientIdに先ほどメモしたユーザープールクライアントIDを入力
1. 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」と入力
1. AWS Amplifyのロゴをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/39ca4ce1-6e13-f03b-b982-83b19a49925c.png)
1. 前回作成したアプリを選択して左下のURLからWebサイトにアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/fa863089-6466-bc5c-3c7f-81d16ce62e1a.png)
1. WebサイトのメニューのGIDDY UP!をクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/e897faf5-0af6-a0a9-2c0f-7c05abd53dce.png)
1. Eメールアドレスとパスワードを入力
1. 「Let’s RYDE」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/67961637-f13d-bd97-d83f-369c5e70e294.png)
1. メールで認証コードが飛んでくるのでコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/2d4d92ba-c35a-0297-8091-e9be5228b9e6.png)
1. Eメールと認証コードを入力
1. 「VERIFY」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/71012bd2-f16f-e67e-f58c-462ae2b68cbc.png)

サインイン画面が出てくるので登録したEメールとパスワードを入力してみましょう。サインインできたら成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/bda1da0f-86ef-5bbc-156c-40c8905c0a6c.png)
作成したユーザはCognitoの「ユーザープール」->「（ユーザープール名）」->「ユーザー」->「ユーザー名」で確認できます。またこの画面でユーザの削除などもできるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/5c4b6783-db1e-3158-559e-860c1fa05306.png)

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