JavaScript

【Amazon Cognito】JavaScriptでログイン処理を実装する方法

はじめに

JavaScript用のSDKでAmazon Cognitoのユーザープールを使いログイン処理を実装する方法を紹介します。

事前準備として、次のライブラリが必要となるので、npmコマンドでインストールします。

  • amazon-cognito-identity.min.js

スポンサーリンク

npm install amazon-cognito-identity-js

※npmコマンドはNode.jsをインストールすることで使うことができます。

関連記事

【JavaScript SDK】Amazon Cognito（ユーザープール）の使い方

ライブラリの読み込み

事前準備で取得したライブラリを読み込みます。※パスは環境に応じて変更してください。

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

ログイン処理

ユーザープールの情報（ユーザープールID、クライアントID）と画面で入力された認証情報（ユーザー名とパスワード）を使用してログイン処理を実装することができます。

ログインに成功すると、アクセストークンやIDトークンなどが取得できます。

function login() {
    var poolData = {
            UserPoolId : 'ユーザープールID',
            ClientId : 'クライアントID'
    };

    var username = "画面で入力されたユーザー名";
    var password = "画面で入力されたパスワード";

    var authenticationData = {
        Username : username,
        Password : password,
    };
    var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
    var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
    var userData = {
        Username : username,
        Pool : userPool
    };

    var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function (result) {
            alert("ログイン成功");

            // アクセストークン
            var accessToken = result.accessToken.jwtToken;
            // アクセストークの有効期限
            var exp = result.accessToken.payload.exp;
            // IDトークン
            var idToken = result.idToken.jwtToken;
            // 更新トークン
            var refreshToken = result.refreshToken.token;

            // ログイン時の処理を書く...

        },

        onFailure: function(err) {
            alert("ログイン失敗");

            // ログイン失敗時の処理を書く...
        },

        newPasswordRequired(userAttributes, requiredAttributes) {
           alert("ユーザーのステータスがFORCE_CHANGE_PASSWORD");
            
           // 仮パスワードを確定させる
           cognitoUser.completeNewPasswordChallenge(password, {}, this);
        }
    });
}

アクセストークンやIDトークンには有効期限（デフォルトの設定は1時間と短い）があり、有効期限が切れるとトークン情報は無効になってしまうので、更新トークン（refreshToken）を使い、トークン情報を再取得するようにしましょう。※JavaScriptのSDKでは「getSession」でトークン情報を再取得することができます。

詳細はこちら

 

また、ユーザーのステータスが「FORCE_CHANGE_PASSWORD」の時は、仮のパスワードなので、正式なパスワードを再度設定する必要があります。

ただ上記例では「cognitoUser.completeNewPasswordChallenge」を呼び出し、仮のパスワードをそのまま正式なパスワードとして確定させています。

ログアウト処理

「getCurrentUser」で使用中のユーザープールが取得できるので、使用中のユーザープールを取得した後、「signOut」でログアウトすることができます。

function logout() {
    var poolData = {
            UserPoolId : 'ユーザープールID',
            ClientId : 'クライアントID'
    };
    var userPool = AmazonCognitoIdentity.CognitoUserPool(poolData);
    var cognitoUser = userPool.getCurrentUser();

    if (cognitoUser) {
        // ログアウト
        cognitoUser.signOut();
    }

    // ログアウト時の処理を書く...

 }

終わりに

本記事では、JavaScript用のSDKでAmazon Cognitoのユーザープールを使いログイン処理を実装する方法を紹介しました。

次回は、getSessionでトークン情報を再取得する方法を紹介します。

[AWS 関連記事]

helpful