Amazon Cognitoを使ってシンプルなログイン画面を作ってみる


AWS資格取得に向けて実際にAWSを利用してみるシリーズの投稿です。
今回はAWSを使って素早く簡単にユーザーのサインアップ/サインインおよびアクセスコントロールの機能を追加できるAmazon Cognitoを利用してみる編です。1時間程度でCognitoを利用したログイン機能が作成できます。
資格勉強的にはCognitoのユーザープール、IDプールの違いを確認しつつ、手っ取り早くログイン画面の作成するための手順になっています。
興味がある方は読んでみて下さい。

資格試験の勉強法は以下の記事を参照。

[AWS初心者がAWS 認定ソリューションアーキテクト – アソシエイト資格試験に合格した時の勉強法](https://qiita.com/fkooo/items/e5284a4ed3c3466ffd41 "AWS初心者がAWS 認定ソリューションアーキテクト – アソシエイト資格試験に合格した時の勉強法")
[AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法](https://qiita.com/fkooo/items/17fa401f4e46ecd00675 "AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法")

資格／技術を学ぶ前に仕事ができる人になるための良書は以下の記事を参照。
[【新人エンジニア向け】仕事で一人前になるためのおすすめ本](https://qiita.com/fkooo/items/ec4931e508fc445068f6 "【新人エンジニア向け】仕事で一人前になるためのおすすめ本")

## 想定読者
* AWSでログイン機能（認証・認可）ができるCognitoを使ってサクッとログイン画面を作りたい人
* Cognitoのユーザープール、IDプールをAWSコンソールで確認して理解を深めたい人

## 料金

無料利用枠が、Cognito ユーザープールに直接サインインするユーザーの場合は 50,000 MAU、SAML 2.0 ベースの ID プロバイダーを介してフェデレーションされるユーザーの場合は 50 MAU 分あるため、サクッと作って個人で試すだけなら無料で出来るようです。

公式ページ

https://aws.amazon.com/jp/cognito/pricing/

## 作業時間
約1時間

## 完成画面
こんなログイン画面ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/93f6bc2e-b615-eecc-5032-19991b88f153.png)
※今回は、Cognitoを試すことに目的にしているためデザインは一切ありません^^;
可能な限りシンプルなHTMLとJavaScriptで実現しています。

以下のページを参考にしていますが、さらにシンプルにしてみました。
https://www.tdi.co.jp/miso/amazon-cognito-activation-sign-in

メールアドレスをIDとして使用しており、画面のタイトルの一部に使っている**AuthenticateUser**は使用しているライブラリでログインするときに使うメソッド名になります。

**ログイン画面**に加えて、**ユーザ（メールアドレスとパスワード）登録画面**、**メールアドレスの確認（メールアドレス認証）画面**も作るので全部で３画面を作成します。

それぞれの画面使っている主要なライブラリメソッドは以下になります。

:::note info
主要なライブラリメソッド
* ログイン画面
    * AmazonCognitoIdentity.CognitoUser authenticateUser メソッド
* ユーザ登録画面
    * AmazonCognitoIdentity.CognitoUserPool signUp メソッド
* メールアドレス確認画面
    * AmazonCognitoIdentity.CognitoUser confirmRegistration メソッド
:::

ちなみに、ログインに成功するとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ee56babb-a2c5-3de8-8036-e441fe51fc6a.png)
ログイン後に各種AWSサービスにアクセスするために必要な **認証情報（IDトークン／アクセストークン／リフレッシュトークン）** をブラウザのコンソールに表示させています。

では、実際に手順に従ってやってみましょう。

## 参考書籍
Cognitoに特化した書籍はまだないのですが、以下の本はCognitoとAPIGatewayを連携させて認証に使用する解説とかがあって参考になりました。
特徴的なのが今回のような画面操作によってCognitoを使っておらず、**AWS CDK**を使ってCognitoを構築しているところがすごいです。画面操作だとどうしても画面メニューが変更されると再現性が下がるのですが、AWS CDKを使ってコードで定義しておくと再現性高く構築手順を維持できるのが便利です。
Cognitoに限らずAWSの様々なサービスを使ってアプリを作り上げているハンズオンが有益でサンプルコードも提供されている良い本なのでここで紹介です。

[AWSではじめる クラウド開発入門](https://amzn.to/3y5VVSK "AWSではじめる クラウド開発入門")
<a href="https://www.amazon.co.jp/dp/4839977607?tag=aws_cognito_001-22&linkCode=ogi&th=1&psc=1" target="_blank" rel="noopener"><img border="0" src="https://m.media-amazon.com/images/I/51r++W4JqaL._SL160_.jpg" ></a>

[【Kindle版】AWSではじめる クラウド開発入門](https://amzn.to/3vPXS2O "【Kindle版】AWSではじめる クラウド開発入門")
<a href="https://www.amazon.co.jp/dp/B09C7H6YHR?tag=aws_cognito_001-22&linkCode=ogi&th=1&psc=1" target="_blank" rel="noopener"><img border="0" src="https://m.media-amazon.com/images/I/51x6EpS0RCL._SL160_.jpg" ></a>


## 作業手順

作業手順は以下の５つの手順になります。
１、２は **AWSコンソール** で作成、３～５は **HTML/JavaScript実装** になります。

１．AWSコンソール Cognitoからユーザプールの作成
２．AWSコンソール CognitoからIDプールの作成
３．画面実装 ユーザ登録画面（サインアップ画面）作成
４．画面実装 ユーザID（メールアドレス）認証画面作成
５．画面実装 ログイン画面作成

## 事前準備

AWSアカウントは前提条件として割愛すると、以下を準備すれば事前準備完了です。簡単ですね。

* テキストエディタ／ブラウザ

今回はEclipseのようなIDEは不要なためテキストエディタで実装して、そのままブラウザで動かします。

* CognitoSDKダウンロード

Cognitoとのやり取りにはJavaScriptの以下のSDK(amazon-cognito-identity-js)を使用します。

https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js

以下の３つのユースケースをそのまま使っているところがあるのでこちらも参考にしてみてください。

:::note info
**Use case 1. サインアップ**
Use case 1. Registering a user with the application. One needs to create a CognitoUserPool object by providing a UserPoolId and a ClientId and signing up by using a username, password, attribute list, and validation data.
:::

:::note info
**Use case 2. ユーザID（メールアドレス）認証**
Use case 2. Confirming a registered, unauthenticated user using a confirmation code received via SMS.
:::

:::note info
**Use case 4. ログイン（ユーザ認証）**
Use case 4. Authenticating a user and establishing a user session with the Amazon Cognito Identity service.
:::

その他、２つのAWS SDKが必要になるので全部で３つダウンロードしておきましょう。

* [aws-sdk.min.js](https://raw.githubusercontent.com/aws/aws-sdk-js/master/dist/aws-sdk.min.js "aws-sdk.min.js")
* [aws-cognito-sdk.min.js](https://raw.githubusercontent.com/amazon-archives/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.min.js "aws-cognito-sdk.min.js")
* [amazon-cognito-identity.min.js](https://raw.githubusercontent.com/amazon-archives/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js "amazon-cognito-identity.min.js")

ダウンロードできたら次から手順に従って作業開始です。

### １．AWSコンソール Cognitoからユーザプールの作成

まずはAWSコンソールのCognitoのサービス画面からユーザープールの作成です。
基本的には画面の指示に従っていけば簡単にできます。
まずは、**ユーザープールの管理**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/dc2ef1f8-2af0-ad9a-97ad-52bad8b5af50.png)

**ユーザープールを作成する**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/5140b393-b478-1b5c-055d-45d7ba9ceb88.png)

好きな**プール名**を入力。
入力したら**デフォルトを確認する**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/6a2200de-1cb6-799d-268c-f3228eff2ffd.png)

デフォルト値で登録された設定内容の一覧が表示されます。
今回やりたいことを実現するために最低限、**エイリアス属性**、**アプリクライアント**の２つは変更する必要があります。
この後、画面が出てくればわかりますが、エイリアス属性は今回登録するユーザの属性設定、アプリクライアントはログイン画面を作成するプログラムを特定する設定になります。
では、まず**エイリアス属性の選択**をクリックし設定を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ced7deb5-69c7-6806-b1e1-7dd7270f00e5.png)

今回はメールアドレスを使用するので、**Eメールアドレスおよび電話番号**を選択。
メールアドレスしか使用しないため他の属性はチェックせず、そのまま**次のステップ**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/1194fa70-2503-7738-986c-483b83ef4ed8.png)

次に必須の設定となる**アプリクライアント**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/43156c2b-c9cd-48f7-1d5b-1dedd276d22c.png)

表示された画面で**アプリクライアントの追加**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/fc24fbd3-00a5-8ad0-d4ee-4f5797aa3501.png)

**アプリクライアント名**は好きな名前でOK。
今回、アプリクライアントの認証は実施しないため**クライアントシークレットを生成**のチェックを外します。
また、使用するSDKのライブラリはSRPプロトコルで認証しているため**SRP (セキュアリモートパスワード) プロトコルベースの認証を有効にする (ALLOW_USER_SRP_AUTH)**のチェックのみ残し後はチェックを外します。（「更新トークンベースの認証を有効にする」のチェックは外せません）
最後に**アプリクライアントの作成**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ed356334-44e2-c508-606a-19531b20a104.png)

必須登録が完了したので**確認**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/81df5498-8357-e81b-60c9-4ad7261e0065.png)

**プールの作成**をクリックすると、ユーザープールが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ac5f8b1e-5b5f-9afe-e3a3-c7a0fb1b4077.png)

問題がなれけば作成された旨のメッセージと作成されたユーザープールの固有情報（プールIDとプールARN）が表示されます。
**プールID**は次の手順のIDプール／実装するJavaScriptの中で指定する必要があるためメモしておきます。
加えて、アプリクライアントの情報も必要になるため**アプリクライアント**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/bd5170bb-f99f-f1c7-4da1-ba2c48f9b57d.png)

**アプリクライアントID**が次の手順のIDプール／実装するJavaScriptの中で指定する必要があるためこちらもメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/3b7af537-0570-2106-c0a3-84d0c4825fda.png)

ここまででユーザープールの作成が完了です。

### ２．AWSコンソール CognitoからIDプールの作成

そのまま続けてAWSコンソールでIDプールを作成します。
ユーザープールに比べるとサクッとできます。
まずは**IDプールの管理**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/6afb757e-cd67-f1a1-d45c-88dde0df0b4c.png)

**新しいIDプールの作成**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/2607b3d1-b964-cfac-68b6-c82fb1a52432.png)

**IDプール名**は好きな名前でOK。
今回、認証プロバイダーには前の手順で作成したユーザープールを使用するため、**Cognito**をクリック。
前の手順でメモした**ユーザープールID**と**アプリクライアントID**を入力します。
最後に**プールの作成**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ae09412a-1148-dfb8-de0d-236f78b4d3ef.png)


IDプールで使用するIAMが自動的に作成されるため、**許可**をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/071fe808-f7f9-ec1e-8366-41cd8e064083.png)

以上でIDプールの作成完了です。
今回はJavaScriptでクライアントを実装するため、表示された画面で**JavaScript**を選択し表示された認証情報から**IDプールのID**をメモしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/613d62c7-af11-cfa9-680c-126c085494da.png)


### ３．画面実装 ユーザ登録画面（サインアップ画面）作成
ここからはHTML/JavaScriptで画面の作成を行います。
３画面を３つのHTML、３つのJavaScriptで作成します。
事前準備でダウンロードした３つのSDKを含め、JavaScriptはjsフォルダに格納するのため完成後のフォルダ構成は以下になります。

```
WORK_FOLDER\signup.html
WORK_FOLDER\confirm.html
WORK_FOLDER\auth.html
WORK_FOLDER\js
WORK_FOLDER\js\signup.js
WORK_FOLDER\js\confirm.js
WORK_FOLDER\js\auth.js
WORK_FOLDER\js\aws-sdk.min.js
WORK_FOLDER\js\aws-cognito-sdk.min.js
WORK_FOLDER\js\amazon-cognito-identity.min.js
```
（WORK_FOLDERはどこでも大丈夫です）

では、画面作成に移りましょう。
ユーザ登録画面はこんな感じの画面を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/439df53d-3f4b-26c5-b377-c6e0289cbc35.png)

最初にHTMLです。以下をコピペしてテキストエディタで保存すればOKです。

```html:signup.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"></meta>
  <title>CognitoSignUp</title>
  <script src="js/aws-cognito-sdk.min.js"></script>
  <script src="js/amazon-cognito-identity.min.js"></script>
  <script src="js/signup.js"></script>
</head>
<body>
  <h1>CognitoSignUp</h1>
  <span style="display: inline-block; width: 100px;">Email</span>
  <input type="text" id="email" placeholder="Email Address">
  <br/>
  <span style="display: inline-block; width: 100px;">Password</span>
  <input type="password" id="password" placeholder="Password">
  <br/><br/>
  <input type="button" value="CognitoSignUp" onclick="OnCognitoSignUp();">
</body>
</html>
```

次はJavaScriptです。
このJavaScriptサンプルは事前準備のところでリンクを貼り付けた**amazon-cognito-identity-js**の**Use case 1**になります。
**XXX**部（ユーザープールIDとクライアントIDの２か所）、手順**１．AWSコンソール Cognitoからユーザプールの作成**でメモったIDに変えてください。

```javascript:signup.js
function OnCognitoSignUp() {

	var poolData = {
		UserPoolId: 'ap-northeast-1_XXXXXXXXX', // Your user pool id here
		ClientId: 'XXXXXXXXXXXXXXXXXX', // Your client id here
	};
	var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

	var username = document.getElementById("email").value;
	var password = document.getElementById("password").value;

	userPool.signUp(username, password, null, null, function(
		err,
		result
	) {
		if (err) {
			alert(err.message || JSON.stringify(err));
			return;
		}
		var cognitoUser = result.user;
		console.log('user name is ' + cognitoUser.getUsername());
	});
}
```
完成です！

では、signup.htmlにブラウザからアクセスしてみましょう。
うまく表示されたら有効なメールアドレスとパスワードを入力して**CognitoSignUp**ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/81d8a1b5-82e2-937a-c19e-cecbaf035bc6.png)


ブラウザのコンソールに以下が表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/58762aa5-7d74-e4a2-a996-423d38a28a24.png)

成功していれば入力したメールアドレスに以下のメールが届くので認証コードを控えます。（この認証コードを次の画面で使います）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/801afe04-8d82-5712-b40c-ab07d9e11671.png)

この状態になるとAWSコンソールからユーザープールにユーザが登録されたのが確認できます。
**有効**状態ではありますが、メールアドレスの認証が済んでいないので**UNCONFIRMED**状態であることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/e280990e-4c37-e263-44aa-cb12deaa783b.png)

確認できたら次の画面作成に進みましょう。


### ４．画面実装 ユーザID（メールアドレス）認証画面作成

引き続き、認証画面を作成します。完成後画面はこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/e65bec1b-0cfa-23cf-bcc0-b8c3abef872d.png)

まずはHTMLです。以下をコピペすればOKです。

```html:confirm.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"></meta>
  <title>CognitoConfirmRegistration</title>
  <script src="js/aws-cognito-sdk.min.js"></script>
  <script src="js/amazon-cognito-identity.min.js"></script>
  <script src="js/confirm.js"></script>
</head>
<body>
  <h1>CognitoConfirmRegistration</h1>
  <span style="display: inline-block; width: 100px;">Email</span>
  <input type="text" id="email" placeholder="Email Address">
  <br/>
  <span style="display: inline-block; width: 100px;">ConfirmCode</span>
  <input type="text" id="ConfirmCode" placeholder="Confirm Code">
  <br/><br/>
  <input type="button" value="CognitoConfirmRegistration" onclick="OnCognitoConfirmRegistration();">
</body>
</html>
```

JavaScriptです。
このサンプルは**amazon-cognito-identity-js**の**Use case 2**になります。
最初の画面と同じで**XXX**部（ユーザープールIDとクライアントIDの２か所）、手順**１．AWSコンソール Cognitoからユーザプールの作成**でメモったIDに変えてください。

```javascript:confirm.js
function OnCognitoConfirmRegistration() {

	var poolData = {
		UserPoolId: 'ap-northeast-1_XXXXXXXXX', // Your user pool id here
		ClientId: 'XXXXXXXXXXXXXXXXXX', // Your client id here
	};
	var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

	var username = document.getElementById("email").value;
	var code = document.getElementById("ConfirmCode").value;

	var userData = {
		Username: username,
		Pool: userPool,
	};

	var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
	cognitoUser.confirmRegistration(code, true, function(err, result) {
		if (err) {
			alert(err.message || JSON.stringify(err));
			return;
		}
		console.log('call result: ' + result);
	});
}
```

完成です！！

confirm.htmlをブラウザで開き、メールアドレスとメールで届いた認証コードを入力、
**CognitoConfirmRegistration**ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/1e1c8a79-8f87-9db6-c303-8a639239ebc4.png)

ブラウザのコンソールに以下が表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/4e9925b8-13c8-d69e-26d2-0cbc6abf9c3c.png)

AWSコンソールでも状態を確認してみましょう。
**CONFIRMED**状態であること、Eメールアドレスが**確認済み**であることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/b7d7259a-08ea-1af3-778b-89901a0fc482.png)


確認できたら最後の画面作成に進みましょう。

### ５．画面実装 ログイン画面作成

最後にログイン画面を作成します。完成後画面はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/93f6bc2e-b615-eecc-5032-19991b88f153.png)

HTMLです。前の手順のように以下をコピペすればOKですが、SDK(aws-sdk.min.js)が増えていることに注意しましょう。

```html:auth.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"></meta>
  <title>CognitoAuthenticateUser</title>
  <script src="js/aws-sdk.min.js"></script>
  <script src="js/aws-cognito-sdk.min.js"></script>
  <script src="js/amazon-cognito-identity.min.js"></script>
  <script src="js/auth.js"></script>
</head>
<body>
  <h1>CognitoAuthenticateUser</h1>
  <span style="display: inline-block; width: 100px;">Email</span>
  <input type="text" id="email" placeholder="Email Address">
  <br/>
  <span style="display: inline-block; width: 100px;">Password</span>
  <input type="password" id="password" placeholder="Password">
  <br/><br/>
  <input type="button" value="CognitoAuthenticateUser" onclick="OnCognitoAuthenticateUser();">
</body>
</html>
```

次にJavaScriptです。
このサンプルは**amazon-cognito-identity-js**の**Use case 4**になります。
今ままでと同じで**XXX**部（ユーザープールIDとクライアントIDの２か所）がありますが、それに加えてファイル中ほどに、IDプールのIDとユーザープールID（似てますが、ユーザープールARNではないです）を設定する箇所があり、**合計４か所**の変更点があるので注意してください。
初登場のIDプールのIDは、手順**２．AWSコンソール CognitoからIDプールの作成**でメモったIDになります。

```javascript:auth.js
function OnCognitoAuthenticateUser() {

	var username = document.getElementById("email").value;
	var password = document.getElementById("password").value;

	var authenticationData = {
		Username: username,
		Password: password,
	};

	var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
		authenticationData
	);
	var poolData = {
		UserPoolId: 'ap-northeast-1_XXXXXXXXX', // Your user pool id here
		ClientId: 'XXXXXXXXXXXXXXXXXX', // Your client id here
	};
	var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
	var userData = {
		Username: username,
		Pool: userPool,
	};

	var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
	cognitoUser.authenticateUser(authenticationDetails, {
		onSuccess: function(result) {
            var idToken = result.getIdToken().getJwtToken();          // IDトークン
			var accessToken = result.getAccessToken().getJwtToken();  // アクセストークン
            var refreshToken = result.getRefreshToken().getToken();   // 更新トークン
            
            console.log("idToken : " + idToken);
            console.log("accessToken : " + accessToken);
            console.log("refreshToken : " + refreshToken);

			//POTENTIAL: Region needs to be set if not already set previously elsewhere.
			AWS.config.region = 'ap-northeast-1';

			AWS.config.credentials = new AWS.CognitoIdentityCredentials({
				IdentityPoolId: 'ap-northeast-1:XXXXXXXXXXXXXXXXXX', // your identity pool id here
				Logins: {
					// Change the key below according to the specific region your user pool is in.
					'cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_XXXXXXXXX': result
						.getIdToken()
						.getJwtToken(),
				},
			});

			//refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
			AWS.config.credentials.refresh(error => {
				if (error) {
					console.error(error);
				} else {
					// Instantiate aws sdk service objects now that the credentials have been updated.
					// example: var s3 = new AWS.S3();
					console.log('Successfully logged!');
				}
			});
		},

		onFailure: function(err) {
			alert(err.message || JSON.stringify(err));
		},
	});
}
```

完成です！！！

auth.htmlをブラウザで開き、メールアドレスとユーザー登録画面で入力したパスワードを入力、
**CognitoAuthenticateUser**ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/37a2ac5a-41dc-9805-658c-600bc70511e3.png)

ブラウザのコンソールに以下が表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/ee56babb-a2c5-3de8-8036-e441fe51fc6a.png)


こちらもAWSコンソールで確認します。ただし、今回の確認先はIDプールになります。
ログインするとアクティブなユーザーが１になっていることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/4cd39b0b-5748-84c5-ccfe-4e888e0723b6.png)


今回は以上です！お疲れ様でした！！

## まとめ

AWSコンソールの操作と簡単なHTML/JavaScriptでログイン画面を作ることができました。
予想より簡単だったのではないでしょうか？
認証情報が払い出されたので、ここからは認証情報を使って様々なAWSリソースにアクセスができるようになります。（認証情報に対しIAMで適切な権限付与は必要です）
これはCognitoのほんの一部の機能なのでまだまだできることはたくさんあるようです。
それも機をみてできる限り投稿していこうと思います。

ここまで読んで頂き、ありがとうございました！

## 資格取得に向けてAWSサービスを実際に利用してみるシリーズの投稿一覧

[とりあえず30分でAWS利用料金の高額請求に備える～予算アラート設定・MFA・料金確認～](https://qiita.com/fkooo/items/67c53c997508e25605ea "とりあえず30分でAWS利用料金の高額請求に備える～予算アラート設定・MFA・料金確認～")
[AWS ECSでDocker環境を試してみる](https://qiita.com/fkooo/items/d7d98e16e91921508450 "AWS ECSでDocker環境を試してみる")
[Amazon Cognitoを使ってシンプルなログイン画面を作ってみる](https://qiita.com/fkooo/items/660cab0090a80861155b "Amazon Cognitoを使ってシンプルなログイン画面を作ってみる")（本記事）
[AWS NATゲートウェイを使ってプライベートサブネットからインターネットにアクセスする](https://qiita.com/fkooo/items/a474db0f3c2e72448d36 "AWS NATゲートウェイを使ってプライベートサブネットからインターネットにアクセスする")
[API GatewayをPrivateで作成してみる](https://qiita.com/fkooo/items/577831abd9803eb91b16 "API GatewayをPrivateで作成してみる")
[AWSのAI(Rekognition/Polly/Transcribe/Comprehend/Translate/Textract)サービスを試してみる](https://qiita.com/fkooo/items/10f75bafd08c60fc0a66 "AWSのAI(Rekognition/Polly/Transcribe/Comprehend/Translate/Textract)サービスを試してみる")
[AWS Lambda 同時実行数、エイリアス、環境変数とか実際の現場で使える機能を勉強してみる](https://qiita.com/fkooo/items/1b24e01252e145a378db "AWS Lambda 同時実行数、エイリアス、環境変数とか実際の現場で使える機能を勉強してみる")
[AWS Lambda SAMとは？～AWS SAMを使ってPythonのLambdaプログラムを簡単に作成する～](https://qiita.com/fkooo/items/2dc5ded5149379d7305a "AWS Lambda SAMとは？～AWS SAMを使ってPythonのLambdaプログラムを簡単に作成する～")
[Cloud9でAWS Amplifyの公式チュートリアルGetting startedをやってみる](https://qiita.com/fkooo/items/84f8f57e2317b0973496 "Cloud9でAWS Amplifyの公式チュートリアルGetting startedをやってみる")