必要なライブラリのインストール

あらかじめローカルにディレクトリを作成しておき、そのディレクトリ内でインストールする。

$ npm i amazon-cognito-identity-js

node_modules/amazon-cognito-identity-js/package.jsonや、node_modules/.package-lock.jsonからamazon-cognito-identity-jsのバージョンが確認できる。
今回は6.3.7。

インストールしたライブラリのうち、今回はnode_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.jsのファイルのみ利用する。

Install using separate JavaScript file
This method is simpler and does not require additional tools, but may have worse performance due to the browser having to download multiple files.
Download the amazon-cognito-identity-js package from npm and get amazon-cognito-identity.min.js file from the dist folder. Place it in your project.

kazu.o

Cognitoユーザープールの作成

基本デフォルト設定で作成。
サインインオプション：ユーザー名
MFA：なし
必須の属性：email

kazu.o

ソースコード

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Cognito Test</title>
        <script src="./node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js"></script>
    </head>
    <body>
        <input type="button" id="sign-up" value="Sign up" onclick="signUp()" />
        <script>
            var poolData = {
                UserPoolId: 'xxx', // Your user pool id here
                ClientId: 'xxx', // Your client id here
            };
            var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

            var attributeList = [];

            var dataEmail = {
                Name: 'email',
                Value: 'xxx', // Your email
            };

            var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);

            attributeList.push(attributeEmail);

            function signUp() {
                userPool.signUp('username', 'Password9/', attributeList, null, function(
                    err,
                    result
                ) {
                    if (err) {
                        alert(err.message || JSON.stringify(err));
                        return;
                    }
                    var cognitoUser = result.user;
                    console.log('user name is ' + cognitoUser.getUsername());
                });
            }
        </script>
    </body>
</html>

上記ソースコードのファイルをブラウザで開くと、SignUp というボタンが表示される。

上記の SignUp ボタンをクリックすると、以下のユーザーが Cognito ユーザープールに作成され、dataEmail.Value に入力したメールアドレス宛に確認コードが送信される。

ユーザー名：username
パスワード：Password9/
メールアドレス：<dataEmail.Value>に入力したメールアドレス

ただし、メールアドレスに確認コードが届いても、このソースコードでは確認コードの入力を促すフォームを設置していないため、ユーザープールに作成されたユーザーのステータスを確認済みにすることはできない。

kazu.o

ソースコード解説

全体的に GitHub の README.md から拝借

amazon-cognito-identity-js の読み込み

npm でインストールしたファイルを参照

<script src="./node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js"></script>

CognitoUserPool オブジェクトの作成

            var poolData = {
                UserPoolId: 'xxx', // Your user pool id here
                ClientId: 'xxx', // Your client id here
            };
            var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);でオブジェクト作成。
poolDataには、その他にもエンドポイントなど設定可能。

index.html では AmazonCognitoIdentity は定義していないが、amazon-cognito-identity.min.js で export している。
ソースコードの詳細は GitHub リポジトリの CognitoUserPool.js 参照。

属性の追加

            var attributeList = [];

            var dataEmail = {
                Name: 'email',
                Value: 'xxx', // Your email
            };

            var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
            attributeList.push(attributeEmail);

ユーザープールはemailが必須属性にあるので、属性にemailを追加している。

サインアップ

            function signUp() {
                userPool.signUp('username', 'Password9/', attributeList, null, function(
                    err,
                    result
                ) {
                    if (err) {
                        alert(err.message || JSON.stringify(err));
                        return;
                    }
                    var cognitoUser = result.user;
                    console.log('user name is ' + cognitoUser.getUsername());
                });
            }

上記ではユーザー名、パスワード、メールアドレスを固定しているが、本来であればフォームに入力した値を利用する

このスクラップは2024/02/13にクローズされました