Amazon Cognitoを使ったサインイン画面をつくってみる～サインアップ編～

同じ部署のメンバーとAWSのサービスを使ったWebアプリを開発することになったのですが、どうせやるならサーバーレスでやりたい！サーバーレスかっこいい！という満場一致の可決により、サーバーレスなWebアプリを開発することになりました。

Webアプリと言えば、やはり一番最初の入口はサインイン画面になるわけですが、はて、どうやったらかっこよくできるのか？と考えて調べた結果、どうやらAmazon Cognitoというものが使えそうだということに。画面はHTML/CSS/JavaScriptで開発しようと決めていたのですが、Amazon CognitoはJavaScriptからも使えるとのこと！

ということで、今回はJavaScriptからAmazon Cognitoを使ってみたいと思います。

Amazon Cognitoとは

そもそもAmazon Cognito（コグニート）とは何者なのか？ですが、AWSのサイトでは以下のように説明されています。

Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの認証、許可、ユーザー管理をサポートしています。ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、Facebook、Amazon、Google などのサードパーティーを通じてサインインできます。

さらに、Amazon CognitoにはユーザープールとIDプールという2つのプールがあり、

ユーザープールは、アプリユーザーのサインアップとサインインオプションを提供するユーザーディレクトリです。ID プールは、AWS の他のサービスに対するアクセスをユーザーに許可します。ID プールとユーザープールは別々に使用することも、一緒に使用することもできます。

とのことです。

私が個人的に気になるのはサインアップ(アカウント作成)ができるという点で、ユーザーの新規登録も簡単にできるかも！と、期待に胸が膨らみます。もちろんサインインもできますが、まずはサインアップを実装してみたいと思います。

ユーザープールの作成

まずはユーザープールを作成します。AWSコンソールにサインインし、サービスから「Cognito」を検索して開きます。開いたら、「ユーザープールの管理」ボタンをクリックします。

次に「ユーザープールを作成する」ボタンをクリックし、作成画面に遷移したら任意のプール名を入力し、「デフォルトを確認する」ボタンをクリックします。

左サイドメニューから「属性」を開き、ユーザープロファイルで管理したい属性を選択します。まずエンドユーザーをどのようにサインインさせるかについては、デフォルトだと「ユーザー名」が選択された状態になっています。今回はEメールアドレスをユーザー名としてアカウント管理したいので、「Eメールアドレスおよび電話番号」を選択し、さらに「Eメールアドレスを許可」を選択します。

これでEメールアドレスは必須項目となったわけですが、それ以外の属性も好きなように追加できます。今回は氏名も管理したいので、「family name」と「given name」を選択します。ちなみにユーザープールの作成後に属性を追加することはできないようなので、この時点で仕様を決めておく必要があります。追加したい属性を選択したら、「次のステップ」ボタンをクリックします。

次に、ポリシーを設定します。今回はパスワードの強度を少しだけ緩めに、特殊文字は要求しないようにしてみました。「変更の保存」ボタンをクリックし、設定を保存します。

次に、左サイドメニューから「アプリクライアント」を開き、「アプリクライアントの追加」リンクをクリックします。各項目に必要事項を入力し、「アプリクライアントの作成」ボタンをクリックします。設定時のポイントは以下2点です。「クライアントシークレットを生成」のチェックを外さないと、JavaScriptからAmazon Cognitoを使った認証をする際にうまくいかないようです。

クライアントシークレットを生成：　チェックを外す　
サーバーベースの認証でサインイン API を有効にする (ADMIN_NO_SRP_AUTH)：　チェックを入れる

必要な設定を終えたら、左サイドメニューから「確認」を開き、「プールの作成」ボタンをクリックします。プールが正常に作成されたら、プールIDが発行されるのでメモっておきます。

また、アプリクライアントIDも発行されているのでこちらもメモっておきます。アプリクライアントIDは、左サイドメニューの「アプリクライアント」を開くと確認できます。

これでユーザープール作成完了です！

IDプールの作成

ユーザープールができたら、次はIDプールを作成します。画面上部のヘッダに表示されているリンク「フェデレーティッドアイデンティティ」をクリックし、遷移先の画面で「新しいIDプールの作成」ボタンをクリックします。

IDプールの作成画面で、各項目に必要事項を入力します。

新しいIDプールの作成
- IDプール名：　任意の名前
認証されていないID
- 認証されていない ID に対してアクセスを有効にする：　チェックを入れる
認証プロバイダー
- Cognito
  - ユーザープールID：　作成したユーザープールのプールID
  - アプリクライアントID：　作成したアプリクライアントのアプリクライアントID

入力したら、「プールの作成」ボタンをクリックします。

次の画面で、「詳細を表示」リンクをクリックすると、作成されるロールの情報が表示されます。基本的にはデフォルトでOKで、そのまま「許可」ボタンをクリックします。

「許可」ボタンをクリックして遷移する画面で「IDプールのID」（IdentityPoolId）を確認できるので、これもメモっておきます。これでIDプール作成完了です！

クライアントアプリの作成

Amazon Cognitoの準備ができたので、クライアントアプリを実装したいと思います。まずはサインアップ画面を実装します。JavaScriptからAmazon Cognitoを使用するにあたり必要なJavaScriptライブラリは以下です。

RSA and ECC in JavaScript
- jsbn.js
- jsbn2.js
Stanford Javascript Crypto Library
- sjcl.js
AWS SDK for JavaScript
- aws-sdk.min.js
Amazon Cognito Identity SDK for JavaScript
- aws-cognito-sdk.min.js
- amazon-cognito-identity.min.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<script src="js/jsbn.js"></script>
<script src="js/jsbn2.js"></script>
<script src="js/sjcl.js"></script>
<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/jquery-3.3.1.min.js"></script>
<script src="js/signup.js"></script>

</head>
<body>
    
    <div id="signup">
      <h1>Sign Up</h1>
      <form name='form-signup'>
	      <span style="display: inline-block; width: 150px;">User ID(Email)</span>
          <input type="text" id="email" placeholder="Email Address">
          <br/>
          <span style="display: inline-block; width: 150px;">Last Name</span>
          <input type="text" id="lastName" placeholder="Last Name">
          <br/>
          <span style="display: inline-block; width: 150px;">First Name</span>
          <input type="text" id="firstName" placeholder="First Name">
          <br/>
          <span style="display: inline-block; width: 150px;">Password</span>
          <input type="password" id="password" placeholder="Password">
          <br/><br/>
        <input type="button" id="createAccount" value="Create Account">
	  </form>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span style="display: inline-block; width: 150px;">User ID(Email)</span>

<br/>

<br/>

<span style="display: inline-block; width: 150px;">First Name</span>

<br/>

<span style="display: inline-block; width: 150px;">Password</span>

</form>

</div>

</body>

</html>

とっても簡易的ですが、上記のHTMLをブラウザで開くと以下のような画面になります。

次に、サインアップ処理を行うJavaScriptを実装します。

// ユーザープールの設定
const poolData = {
    UserPoolId : [ユーザープールID],
    ClientId : [アプリクライアントID]
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var attributeList = [];

/**
 * 画面読み込み時の処理
 */
$(document).ready(function() {
		
	// Amazon Cognito 認証情報プロバイダーの初期化
	AWSCognito.config.region = 'ap-northeast-1'; // リージョン
	AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
	    IdentityPoolId: [IDプールのID]
	});
		    
	// 「Create Account」ボタン押下時
	$("#createAccount").click(function(event) {
	    signUp();
	});
});

/**
 * サインアップ処理。
 */
var signUp = function() {
			
	var username = $("#email").val();
	var lastName = $("#lastName").val();
	var firstName = $("#firstName").val();
	var password = $("#password").val();
			
	// 何か1つでも未入力の項目がある場合、処理終了
    if (!username | !lastName | !firstName | !password) { 
    	return false; 
    }
		    
    // ユーザ属性リストの生成
	var dataFamilyName = {
		Name : "family_name",
		Value : lastName
	}
	var dataGivenName = {
		Name : "given_name",
		Value : firstName
	}
	var attributeFamilyName = new AmazonCognitoIdentity.CognitoUserAttribute(dataFamilyName);
	var attributeGivenName = new AmazonCognitoIdentity.CognitoUserAttribute(dataGivenName);
			
    attributeList.push(attributeFamilyName);
    attributeList.push(attributeGivenName);
			
    // サインアップ処理
    userPool.signUp(username, password, attributeList, null, function(err, result){
	    if (err) {
	    	alert(err);
			return;
	    } else {
	      	// サインアップ成功の場合、アクティベーション画面に遷移する
	    }
    });
}

// ユーザープールの設定

const poolData = {

UserPoolId : [ユーザープールID],

ClientId : [アプリクライアントID]

};

const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var attributeList = [];

/**

* 画面読み込み時の処理

$(document).ready(function() {

// Amazon Cognito 認証情報プロバイダーの初期化

AWSCognito.config.region = 'ap-northeast-1'; // リージョン

AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({

IdentityPoolId: [IDプールのID]

});

// 「Create Account」ボタン押下時

$("#createAccount").click(function(event) {

signUp();

});

/**

* サインアップ処理。

var signUp = function() {

var username = $("#email").val();

var lastName = $("#lastName").val();

var firstName = $("#firstName").val();

var password = $("#password").val();

// 何か1つでも未入力の項目がある場合、処理終了

if (!username | !lastName | !firstName | !password) {

return false;

}

// ユーザ属性リストの生成

var dataFamilyName = {

Name : "family_name",

Value : lastName

}

var dataGivenName = {

Name : "given_name",

Value : firstName

}

var attributeFamilyName = new AmazonCognitoIdentity.CognitoUserAttribute(dataFamilyName);

var attributeGivenName = new AmazonCognitoIdentity.CognitoUserAttribute(dataGivenName);

attributeList.push(attributeFamilyName);

attributeList.push(attributeGivenName);

// サインアップ処理

userPool.signUp(username, password, attributeList, null, function(err, result){

if (err) {

alert(err);

return;

} else {

// サインアップ成功の場合、アクティベーション画面に遷移する

}

});

}

入力チェックもほとんど実装していませんが、これでサインアップできるようになりました。ユーザープールID、アプリクライアントID、IDプールのIDについては、それぞれユーザープールやIDプールを作成したときに発行されたIDを設定してください。

「Create Account」ボタンの押下時に呼び出される処理としてsignUp関数を実装しています。ユーザーID（Eメールアドレス）とパスワードに加え、ユーザープール作成時に追加した属性はユーザー属性リスト（attributeList）として指定してあげる必要があります。今回の場合、family_nameとgiven_nameから成る属性リストを生成しています。Name属性に指定する固定値（ここでいう「family_name」や「given_name」）については、こちらをご参考ください。

動作確認

それでは実際に動かしてみます。signup.htmlを開き、各項目を入力し、「Create Account」ボタンをクリックします。

現状のソースでは見た目上何も起こりませんが、ユーザープールの管理コンソール画面を開き、左サイドメニューから「ユーザーとグループ」を開くと…

ユーザーが作成されています！！

しかし、このユーザーのステータスは「UNCONFIRMED」となっており、今のままではまだこのユーザーは使用できません。このユーザーを使えるようにするには、アクティベーション処理を実装する必要があります。実は、ユーザーが作成されたタイミングで、登録したEメールアドレスに検証コードが書かれたメールが送信されており、この検証コードを使用してアクティベーションを行います。