Cognitoユーザープール構築手順

# 目次

- [はじめに](#はじめに)
- [本記事で扱う内容](#本記事で扱う内容)　
- [本記事で扱わない内容](#本記事で扱わない内容)
- [AWS Cognito　ユーザープールの構築手順](#1aws-cognito-ユーザープールの構築手順)
- [Hosted UIの動作確認方法](#2hosted-uiの動作確認方法)


# はじめに
会社でCognitoの技術検証を行ったので、備忘録として構築手順を書き留めます。

# 本記事で扱う内容

- AWS Cognito ユーザープールの構築手順

# 本記事で扱わない内容

- AWS アカウントの作り方
- Cognito ユーザープールの概要説明
- Cognito ユーザープール設定項目の詳細説明
- ログイン機能付きアプリケーションの構築方法 

# 1.　AWS Cognito ユーザープールの構築手順
詳細についてはAWSの公式ドキュメントを見ていただければと思います。
ここではメールアドレスとパスワードでユーザの認証を行うことを目的として、Cognito ユーザープールの設定をしていきます。


## 1-1.検索窓から「Cognito」を検索し、「ユーザープールを作成」を選択

「Cognito」選択後画面
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/394161bf-8041-5e2f-5b99-043b449d6427.png)

## 1-2.サインインエクスペリエンスを設定

- Googleでのログインを可能にするため、「フェデレーテッドアイデンティティプロパイダー」を選択し、「フェデレーテッドサインインのオプション」で「Google」を選択(必要なければ未選択でも大丈夫です)
- Eメールでもログイン可能にするため、「Cognito」ユーザープールのサインインオプション」にて「Eメール」を選択　(作成後変更不可能)

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/5b18ffc9-8b4b-61ad-fca6-cf355d271329.png)

## 1-3.セキュリティ要件を設定

- MFA(他要素認証)はお好みでつけてください。ここでは面倒だったため省略
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/248e663f-3835-95bf-defa-bfd0c974dc5e.png)

## 1-4.サインアップエクスペリエンスを設定

- デフォルトのまま変更なし
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/1829f908-1766-db69-496d-43bbc798121d.png)

## 1-5.メッセージ配信を設定

- 「Eメールプロパイダー」にて「CognitoでEメールを送信」を選択（検証のため）
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/251beeee-02de-557c-6e9f-4d2601b54894.png)

## 1-6.フェデレーテットアイデンティティプロパイダーを設定

- 後ほど設定するため一旦「後で」を選択

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/621ffba4-e122-336c-31a1-bb3eecb2148b.png)

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/f7a903f2-85e6-dae2-c53c-efdf46687d60.png)

## 1-7.アプリケーションを統合

- 「ユーザープール名」には好きなユーザープール名を入力
- Cognitoドメインにも好きなドメイン名を入力
    - 認証画面のURLになります
![8_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/406143f0-8ee4-9d7c-3d40-3b45c23480c6.png)

- 「クライアントのシークレット」にて、「クライアント」のシークレットを生成するを選択
- 「許可されているコールバックURL」には、サインイン後のリダイレクト先を入力

![8_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/ce5c4343-d437-e707-79c8-f56094c139f4.png)

※画像のURLはhttps://~~になっていますが、後ほど記事内で紹介するアプリケーションと紐づける場合、正しい値はhttp://~~です (サンプルアプリケーションを使わない場合は好きな値で大丈夫です)

## 1-8.確認および作成

- 内容に間違いがなければ、一番下までスクロールし「ユーザープールを作成」を選択

これにて基本設定完了です。

![9_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/b26203f1-ed29-6d9c-2ec6-852e70571c76.png)
![9_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/2b1ed33d-d701-5281-e045-9cca9d5e6ff3.png)

# 2.Hosted UIの動作確認方法

## 2-1.作成後のユーザープールを選択

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/4bc7da8a-b291-d2da-ae5c-af0b96eedfd8.png)


## 2-2.アプリケーションの統合を選択
![tougou.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/aa1d2e86-0028-ec2f-fe4d-1db34ad7b4ad.png)

## 2-3.「アプリクライアントと分析」から先ほど作ったアプリケーションクライアント名を選択

![スクリーンショット 2023-05-01 20.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/b8552110-ea6b-e1af-acc8-b6765d06fd56.png)

## 2-4.「ホストされたUIを表示」を選択
![check_hosted_ui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/74eea6cd-22e4-3edb-1efe-7b8aac5066d1.png)

## 2-5.確認

「sign up」を選択後、実際にユーザを作成してみます。
![Hosted_ui_standard_demo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/fbc4d9d7-bc93-1f9e-d742-50a85e642c14.png)

![スクリーンショット 2023-05-01 20.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/fb2949f7-efac-a538-7d8a-17a9fbf16252.png)

入力後認証コード入力画面になります。
![code_input.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/04fd9889-b12a-0504-9e81-1a61a3e004a7.png)


認証コードも無事送られてきました。
![send_code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/d2c57528-efa3-0073-ab82-1733329665f4.png)

その後、認証コード入力画面にて認証コードを入力してサインアップ完了です。
まだCognitoに対応するアプリケーションを作成していないので、ブラウザ上では以下のような画面になりますが、Cognitoにはユーザ情報が登録されていることが確認できます。


![first_sign_up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/de3baa0a-46d0-548e-e129-7660afff1efe.png)


![スクリーンショット 2023-05-01 20.12.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/c35676a1-338c-f321-3a7c-63d6531f482f.png)

## 2-6.Cognito検証用のアプリケーションの作成

正しくsign-inが行われているかをlocalhostで確認したい場合は以下の記事を参考にアプリケーションを構築してください。
この記事の内容は以下の記事でアプリケーションを構築していることを前提として作成しています。

【参考記事】
https://zenn.dev/strsbn/articles/79f5f970dc1529

ここでも簡単に構築手順に触れます

### 2-6-1.以下のコマンドを実行し初期セットアップ

- 実行環境
  - Ruby version 2.6.3
  - Rails versiont 5.2.5

```zsh
// PJのクローン
$git clone https://github.com/mheffner/rails-cognito-example.git


//PJセットアップ
$bundla install
$rails db:migrate
```

### 2-6-2. envファイルをPJディレクトリの直下に作成し、設定値を記載

```~/rails-cognito-example/.env

AWS_COGNITO_APP_CLIENT_ID=${クライアントID}
AWS_COGNITO_APP_CLIENT_SECRET=${クライアントのシークレット}
AWS_COGNITO_DOMAIN=${ドメイン(https://XXXXX.auth.ap-northeast-1.amazoncognito.comの「XXXXX」のみを記載)}
AWS_COGNITO_POOL_ID=${ユーザープールID}
AWS_COGNITO_REGION=${リージョン情報}

```

設定値は以下から参照

- AWS_COGNITO_APP_CLIENT_ID
- AWS_COGNITO_APP_CLIENT_SECRET
![client_id.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/d3609f4d-ce27-870b-9459-829bb6b065ad.png)

- AWS_COGNITO_DOMAIN
- AWS_COGNITO_POOL_ID
![user_pool_id.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/b20d78fa-b5cb-432a-93a8-86360d796ccf.png)

- AWS_COGNITO_REGION
    - 自身が設定しているリージョン情報を参照ください。おそらく上の画像のCognitoドメインの後ろの方にくっついていると思います

###  2-6-3. 動作確認

以下コマンドを実行後localhost:3000へアクセスし、各画面が表示されれば動作確認完了です。遷移先でエラーが出る場合は、envの値か1-7で設定している「許可されているコールバックURL」が間違っている可能性があります。
```zsh
$ rails s
```

![lcoal_3000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/4bab5244-15ef-747a-05c1-a0eabe654371.png)

先ほど作成したユーザでのサインインも無事に完了しました。
![スクリーンショット 2023-05-02 16.16.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/10aee142-a92e-305c-db48-004054e8606f.png)


# まとめ
以上Cognitoユーザープールの構築手順でした。
[こちらの記事](https://qiita.com/Naoki1126/items/2dbc8ac4eb07310adc0f)でGoogleログインの実装方法について書いているので、興味あればご覧ください。