AWS Cognitoを導入し、認証画面を作成してみた！

## はじめに
社内アプリを社外からでも接続できるようにしたいと要望があり、工数をあまり掛けず、簡単にAWSのサービスで認証画面を導入した際の手順を紹介します。

## 環境
Amazon Cognito
>Amazon Cognito は、ウェブおよびモバイルアプリの認証、承認、およびユーザー管理機能を提供します。ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、Facebook、Amazon、Google、Apple などのサードパーティーを通じてサインインできます。

## 前提条件
ALBとEC2を構築済み

## 手順
**1.Cognitoのコンソールを開き、「ユーザープールを作成」を押下します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/2a48e661-7c36-17ae-e9bf-924063dc5b4a.png)

**2.Step1：サインインエクスペリエンスを設定**
Cognito ユーザープールのサインインオプションの「Eメール」にチェックを入れ、「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/9afd1ba0-bd04-ec4b-1151-4d86337a7d34.png)

**3.Step2：セキュリティ要件を設定**
パスワードポリシーモードはデフォルトを使用します。もっと強固にするならカスタムで設定可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/8f8b93bd-7aae-8af5-56e4-54615007d1d3.png)

MFAを有効にすると、セキュリティを向上できますが、今回はオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/cd23b7ae-8c56-aabe-48bc-de9a32ed2184.png)

パスワードを忘れてしまった場合の対応方法です。
「Eメールのみ」を選択し、「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/981dfb73-d885-c2a7-20ba-8fcdec22a65c.png)

**4.Step3：サインアップエクスペリエンスを設定**
オンにするとサインアップ画面で誰でもユーザーを作成することができるようになります。今回は管理者のみにするため、自己登録はオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/1e978fe1-e77c-9549-1052-a8e89bacc840.png)

新しいユーザーにアカウントを検証するためのメッセージを自動的に送信します。また、管理者によって作成されたユーザーにも、検証メッセージが送信されます。このプロセスにより、ユーザープールでアカウントが不正に作成されるのを防ぐことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/8b657e00-96c7-1dfc-fcba-dc7567456062.png)

有効にするとEメールアドレスまたは電話番号属性を更新した際、検証を保留中でも更新前のE メールアドレスまたは電話番号でメールの受信やサインインができます。有効のままで「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/f46e5ad7-62ea-2cbb-7213-089fc920bf7a.png)

**5.Step4：メッセージ配信を設定**
Eメールの送信方法は「CognitoでEメールを送信」を選択します。
送信元Eメールアドレスはデフォルトにし、返信先Eメールアドレスに送信したいメールアドレスを入力して「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/ce732684-3153-2fe4-348f-8ae7d3a418bd.png)

**6.Step5：アプリケーションを統合**
ユーザープールを入力します。作成すると、変更できなくなるので注意しましょう。
「CognitoのホストされたUIを使用」にチェックを入れます。
チェックを入れるとCognitoで認証画面が作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/e65afe33-c903-47d2-e7a3-9fa483d9d863.png)

「Cognitoドメインを使用する」を選択し、認証画面のドメインを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/51878468-bd75-2f91-8b4e-2631357600f4.png)

アプリケーションクライアント名は分かりやすい名前にしましょう。
ALBがCognito連携できるようにクライアントシークレットを発行します。ALBはシークレットキーを利用し、Cognitoにアクセスします。
コールバックURLには https://[ALBに設定するドメイン]/oauth2/idpresponse を入力します。
高度なアプリケーションクライアントの設定はデフォルトで問題ないので、「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/992d5040-700d-7cf3-e480-30a1b04e7a74.png)

**6.Step6：確認および作成**
内容に間違いがなければ、「ユーザープールを作成」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/727e2268-4232-0fde-5c00-f1d717d30e1f.png)

**7.メッセージテンプレート編集**
検証メールや招待メールの件名と内容を変更する手順です。
作成したユーザープールを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/92aed070-7043-cca8-3cee-354901baf02c.png)

タブの「メッセージング」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/c5b3e16d-9196-848f-e87a-d2a6aaaee433.png)

メッセージテンプレートの「検証メッセージ」を選択し、「編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/5f442d00-1871-31c3-2522-03c3a4c08485.png)

件名と内容を変更して「変更を保存」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/e13a5fa0-03d1-409b-8e90-c98be6b342c7.png)

同じように「招待メッセージ」を選択し、「編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/3149b6c3-b297-03b1-c4cb-a26bee4bb35e.png)

件名と内容を変更して「変更を保存」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/368c9bd0-a45d-6573-6301-b7d59c952cb6.png)

**8.ユーザー作成**
タブの「ユーザー」を選択し、「ユーザーを作成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/da949fff-025b-202e-fa8b-809103e8bfd5.png)

Eメールで招待を送信を選択後、送信したいメールアドレスを入力し、「ユーザーを作成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/2067963b-1896-12da-6213-2ebb568e5b01.png)

ユーザーを作成すると、招待メールが送信されます。
これでCognito側の設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/679365ae-e289-3bbe-fa3f-6ec8c2ce0f10.png)

**9.ALBとの紐づけ**
ALBのリスナーから「ルールの表示/編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/e05fe54e-ba76-c4fe-22a7-99d99f08312d.png)

「アクションの追加」から「認証」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/d596fc82-2a58-8d65-9e27-22c91633913c.png)

Cognitoのユーザープールとアプリクライアントを選択し、「更新」を押下します。
AWSコンソールからの操作は以上になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/601224bd-896f-5ee9-6690-a0c508eb3fcd.png)

**10.WEBへアクセス**
サイトのURLに遷移し、認証画面が表示されたら完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078172/641eedde-ecc7-1cef-54f9-72b27b809d7b.png)

### おわりに
設定手順が多かったですが、いかがだったでしょうか？
プログラムで認証画面を作成するよりは簡単かと思いますので、この記事を参考にしていただければ幸いです。

次はGoogleアカウントで認証する方法に挑戦してみたいと思います。
導入しましたら、また記事に残します。
### 参考資料
参考にしたサイトです。
Cognitoの設定画面は旧コンソールとなります。
・インフラエンジニアが一切コードを書かずにWebサーバーに認証機能を実装した話(最終閲覧日：2022年9月15日)

https://dev.classmethod.jp/articles/alb-cognito-user-pool/