Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Amazon Cognito UserPools を JavaScript から使ってみる

More than 3 years have passed since last update.

0.はじめに

AWS がサーバーレスで推奨しているサービスを、色々と使ってみます。
今回は、Amazon Cognito User Pools を JavaScript から使ってみます。

1.Amazon Cognito User Pool を作成する

Amazon Cognito の User Pool を作成する。

  1. Getting started - Amazon Cognito - Amazon Web Services へ遷移し、「Manage your User Pools」ボタンを押下
     
    • スクリーンショット 2017-03-28 16.25.38.png  
  2. 「Create User Pool」ボタンを押下
     
    • スクリーンショット 2017-03-28 16.25.46.png  
  3. 以下の項目を設定し、「Review defaults」ボタンを押下
    • Pool name : SmapleUserPool
       
    • スクリーンショット 2017-03-28 16.26.28.png  
  4. 左側ペインから「Attributes」を選択後、以下の項目を設定し、「Save Changes」ボタンを押下
    • email :  Required : □ Alias : ☑︎
    • phone number :  Required : □ Alias : ☑︎
    • ※メールでも電話番号でもログイン出来る様にしたかったので、この設定に。
       
    • スクリーンショット 2017-03-28 16.29.25.png  
  5. 左側ペインから「Verification」を選択後、以下の項目を設定し、「Create Role」ボタンを押下
    • Do you want to enable Multi-Factor Authentication (MFA)?
      • ◉ Optional
         
    • スクリーンショット 2017-03-28 16.29.54.png  
  6. SMS用のロールが作成されるので、「Save Changes」ボタンを押下
     
    • 67b3a54d-84f1-8969-aac1-bd81fb7d872b.png  
  7. 左側ペインから「Apps」を選択後、「Add an app」リンクをクリック
     
    • スクリーンショット 2017-03-28 16.30.29.png  
  8. 以下の項目を設定し、「Create app」ボタンを押下
    • App name : Cognito
    • Refresh token expiration (days) : 30 ※デフォルト
    • Generate client secret : □
      • ※JavaScript からの認証の際にあると邪魔みたいなので。
    • Enable sign-in API for server-based authentication (ADMIN_NO_SRP_AUTH) : ☑︎
    • Only allow Custom Authentication (CUSTOM_AUTH_FLOW_ONLY) : □
       
    • スクリーンショット 2017-03-28 16.30.42.png  
  9. App が作成されるので、「Save Changes」ボタンを押下
     
    • スクリーンショット 2017-03-28 16.30.51.png  
  10. 「Create Pool」ボタンを押下
     
    • スクリーンショット 2017-03-28 16.31.17.png

2.Amazon Cognito Identity Pool を作成する

Amazon Cognito の Identity Pool を作成する。

  1. Getting started - Amazon Cognito - Amazon Web Services へ遷移し、「Manage Federated Identities」ボタンを押下
     
    • スクリーンショット 2017-03-29 13.12.01.jpg  
  2. 「Create new identity pool」ボタンを押下
     
    • スクリーンショット 2017-03-29 13.12.11.jpg  
  3. 以下の項目を設定し、「Create Pool」ボタンを押下
    • Identity pool name : SampleIdentityPool
    • Unauthenticated identities
      • Enable access to unauthenticated identities : ☑︎
    • Authentication providers
      • Cognito
        • User Pool ID : [Amazon Cognito User Pool の Pool Id]
        • App Client ID : [Amazon Cognito User Pool の App Client Id]
           
    • スクリーンショット 2017-03-29 13.13.29.jpg  
  4. 以下の項目を設定し、「許可」ボタンを押下
     
    • スクリーンショット 2017-03-29 13.15.06.jpg  
    • スクリーンショット 2017-03-29 13.15.52.jpg

3.S3 に静的ウェブサイトを構築する。

  1. 以下のサイトを参考に、S3 に静的ウェブサイトを構築する。

4.JavaScript からのサインアップ

  1. 「3.S3 に静的ウェブサイトを構築する。」で構築した S3 上に js フォルダを作成し、そこに以下の js ファイルを格納する。
  2. 以下の html ファイルを、「3.S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
    • 36,38 行目の [Amazon S3 Bucket Name]
    • 45 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
    • 48 行目の [Amazon Cognito User Pool の Pool Id]
    • 49 行目の [Amazon Cognito User Pool の App Client Id]
signup.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Sign Up</title>
    <!-- AWS SDK //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
    <!-- Amazon Cognito //-->
    <script src="js/jsbn.js"></script>
    <script src="js/jsbn2.js"></script>
    <script src="js/sjcl.js"></script>
    <script src="js/aws-cognito-sdk.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- bootstrap3 //-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <form class="form-signup">
            <h2 class="form-signup-heading">Sign Up</h2>
            <div id="message" class="alert" style="display:none;"></div>
            <label id="labelUsername">UserID</label><br>
            <input type="text" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
            <label id="labelEmail">Email</label><br>
            <input type="text" id="inputEmail" class="form-control" placeholder="Email" required autofocus></input>
            <label id="labelPassword">Password</label><br>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
            <p></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_up_btn" value="Sign Up"></input>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signin.html" target="_blank">SignIn</a>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/activation.html" target="_blank">Activation & Forget Password</a>
        </form>
    </div>
    <script>
        // Initialize the Amazon Cognito credentials provider
        AWSCognito.config.region = "ap-northeast-1";
        AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
        });
        var data = {
            UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
            ClientId: "[Amazon Cognito User Pool の App Client Id]"
        };
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
        var attributeList = [];
        var cognitoUser;

        function uuid() {
            var uuid = "", i, random;
            for (i = 0; i < 32; i++) {
                random = Math.random() * 16 | 0;
                if (i == 8 || i == 12 || i == 16 || i == 20) {
                    uuid += "-"
                }
                uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
            }
            return uuid;
        }

        $("#sign_up_btn").click(function() {
            username = $("#inputUsername").val();
            //username = uuid();
            email = $("#inputEmail").val();
            password = $("#inputPassword").val();
            if(!username) {
                $("#message").text("Input UserID !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!email) {
                $("#message").text("Input Email !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!password) {
                $("#message").text("Input Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            var dataEmail = {
                Name : "email",
                Value : email
            };
            var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
            attributeList.push(attributeEmail);
            //var dataPhoneNumber = {
            //    Name : "phone_number",
            //    Value : '+81' + email
            //};
            //var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
            //attributeList.push(attributePhoneNumber);
            userPool.signUp(username, password, attributeList, null, function(err, result){
                if (err) {
                    console.log(err);
                    $("#message").text(err);
                    $("#message").addClass("alert-danger");
                    $("#message").show();
                } else {
                     var url = "activation.html";
                     $("form").fadeOut(100, function(){
                        $(location).attr("href", url);
                     });
                     $(".wrapper").addClass("form-success");
                }
            });
        });

    </script>
</body>
</html>

 
3. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Sign Up」ボタンを押下
 
スクリーンショット 2017-03-29 14.40.11.jpg
 
4. 入力したメールアドレスへ、アクティベーションコードが送られてくる。

5.JavaScript からのアクティベーション

  1. 以下の html ファイルを、「3.S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
    • 36,38 行目の [Amazon S3 Bucket Name]
    • 45 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
    • 48 行目の [Amazon Cognito User Pool の Pool Id]
    • 49 行目の [Amazon Cognito User Pool の App Client Id]
activation.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Activation & Forget Password</title>
    <!-- AWS SDK //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
    <!-- Amazon Cognito //-->
    <script src="js/jsbn.js"></script>
    <script src="js/jsbn2.js"></script>
    <script src="js/sjcl.js"></script>
    <script src="js/aws-cognito-sdk.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- bootstrap3 //-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <form class="form-activation">
            <h2 class="form-activation-heading">Activation</h2>
            <div id="message" class="alert" style="display:none;"></div>
            <label id="labelUsername">UserID</label><br>
            <input type="text" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
            <label id="labelActivationKey">Activation Key</label><br>
            <input type="activationkey" id="inputActivationKey" class="form-control" placeholder="Activation Key" required></input>
            <p></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="activate_btn" value="Activate"></input>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="send_key_btn" value="Re:Send Activation Key"></input>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="forget_password_btn" value="Forget Password"></input>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signin.html" target="_blank">SignIn</a>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signup.html" target="_blank">SignUp</a>
        </form>
    </div>
    <script>
        // Initialize the Amazon Cognito credentials provider
        AWSCognito.config.region = "ap-northeast-1";
        AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
        });
        var data = {
            UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
            ClientId: "[Amazon Cognito User Pool の App Client Id]"
        };
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
        var attributeList = [];
        var cognitoUser;

        $("#activate_btn").click(function() {
            username = $("#inputUsername").val();
            activationkey = $("#inputActivationKey").val();
            if(!username) {
                $("#message").text("Input UserID !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!activationkey) {
                $("#message").text("Input Activation Key !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            var userData = {
                Username : username,
                Pool : userPool
               };
            cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
            cognitoUser.confirmRegistration(activationkey, true, function(err, result){
                if (err) {
                    console.log(err);
                    message_text = err;
                    message_class = "alert-danger";
                    $("#message").text(message_text);
                    $("#message").addClass(message_class);
                    $("#message").show();
                } else {
                     var url = "signin.html";
                     $("form").fadeOut(100, function(){
                        $(location).attr("href", url);
                     });
                     $(".wrapper").addClass("form-success"); 
                }
            });
        });

        $("#send_key_btn").click(function() {
            username = $("#inputUsername").val();
            if(!username) {
                $("#message").text("Input UserName !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            var userData = {
                Username : username,
                Pool : userPool
               };
            cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
            cognitoUser.resendConfirmationCode(function(err, result) {
                if (err) {
                    console.log(err);
                    $("#message").text(err);
                    $("#message").addClass("alert-danger");
                    $("#message").show();
                } else {
                    $("#message").text("Send Activation Key.");
                    $("#message").addClass("alert-success");
                    $("#message").show();
                }
            });
        });

        $("#forget_password_btn").click(function() {
            username = $("#inputUsername").val();
            if(!username) {
                $("#message").text("Input UserID or Email !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            var userData = {
                Username : username,
                Pool : userPool
               };
            cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
            cognitoUser.forgotPassword({
                onSuccess: function (result) {
                    console.log("call result: " + result);
                },
                onFailure: function(err) {
                    alert(err);
                },
                inputVerificationCode() {
                    var verificationCode = prompt("Please input verification code ", "");
                    var newPassword = prompt("Enter new password ", "");
                    cognitoUser.confirmPassword(verificationCode, newPassword, this);
                }
            });
        });

    </script>
</body>
</html>

 
2. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Activate」ボタンを押下
 
スクリーンショット 2017-03-29 14.40.23.jpg
 
3. アクティベーションが完了する。

6.JavaScript からのサインインとユーザー情報の取得

  1. 以下の html ファイルを、「3.S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
    • 34,36 行目の [Amazon S3 Bucket Name]
    • 43,87 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
    • 46,89 行目の [Amazon Cognito User Pool の Pool Id]
    • 47 行目の [Amazon Cognito User Pool の App Client Id]
signin.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Sign In</title>
    <!-- AWS SDK //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
    <!-- Amazon Cognito //-->
    <script src="js/jsbn.js"></script>
    <script src="js/jsbn2.js"></script>
    <script src="js/sjcl.js"></script>
    <script src="js/aws-cognito-sdk.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- bootstrap3 //-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <form class="form-signin">
            <h2 class="form-signup-heading">Sign In</h2>
            <div id="message" class="alert" style="display:none;"></div>
            <label id="labelUsername">UserID or Email</label><br>
            <input type="text" id="inputUsername" class="form-control" placeholder="UserID or Email" required autofocus></input>
            <label id="labelPassword">Password</label><br>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
            <p></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_in_btn" value="Sign In"></input>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signup.html" target="_blank">SignUp</a>
            <p></p>
            <a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/activation.html" target="_blank">Activation & Forget Password</a>
        </form>
    </div>
    <script>
        // Initialize the Amazon Cognito credentials provider
        AWSCognito.config.region = "ap-northeast-1";
        AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
        });
        var poolData = {
            UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
            ClientId: "[Amazon Cognito User Pool の App Client Id]"
        };
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
        var attributeList = [];
        var cognitoUser;

        $("#sign_in_btn").click(function() {
            username = $("#inputUsername").val();
            password = $("#inputPassword").val();
            if(!username) {
                $("#message").text("Input UserID or Email !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!password) {
                $("#message").text("Input Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            //event.preventDefault();
            var authenticationData = {
                Username : username,
                Password : password
            };
            var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
            var userData = {
                Username : username,
                Pool : userPool
                };
            cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
            console.log(cognitoUser);
            cognitoUser.authenticateUser(authenticationDetails, {
                onSuccess: function (result) {
                    console.log("Id      Token + " + result.getIdToken().getJwtToken());
                    console.log("Access  Token + " + result.getAccessToken().getJwtToken());
                    console.log("Refresh Token + " + result.refreshToken.token);
                    AWS.config.region = "ap-northeast-1";
                    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                        IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]",
                        Logins: {
                            "cognito-idp.ap-northeast-1.amazonaws.com/[Amazon Cognito User Pool の Pool Id]" : result.getIdToken().getJwtToken()
                        }
                    });
                    AWS.config.credentials.get(function(err) {
                        if (!err) {
                            console.log("accessKeyId     + " + AWS.config.credentials.accessKeyId);
                            console.log("secretAccessKey + " + AWS.config.credentials.secretAccessKey);
                            console.log("sessionToken    + " + AWS.config.credentials.sessionToken);
                        }else{
                                log("Error : " + err);
                        }
                    });
                    var url = "mypage.html";
                    $("form").fadeOut(700, function(){
                        $(location).attr("href", url);
                    });
                    $(".wrapper").addClass("form-success"); 
                },
                onFailure: function(err) {
                    alert(err);
                },
                //mfaRequired: function(codeDeliveryDetails) {
                //    var verificationCode = prompt('Please input verification code' ,'');
                //    cognitoUser.sendMFACode(verificationCode, this);
                //}
            });
        });

    </script>
</body>
</html>

 
2. 以下の html ファイルを、「3.S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
* 54,197 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
* 57,199 行目の [Amazon Cognito User Pool の Pool Id]
* 58 行目の [Amazon Cognito User Pool の App Client Id]

mypage.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>My Page</title>
    <!-- AWS SDK //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
    <!-- Amazon Cognito //-->
    <script src="js/jsbn.js"></script>
    <script src="js/jsbn2.js"></script>
    <script src="js/sjcl.js"></script>
    <script src="js/aws-cognito-sdk.min.js"></script>
    <script src="js/amazon-cognito.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- IE //-->
    <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
    <!-- bootstrap3 //-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body onLoad="loadHello()" onUnload="unloadBye()">
    <div class="container">
        <form class="form-mypage" name="form1">
            <h2 class="form-mypage-heading">My Page</h2>
            <div id="message" class="alert" style="display:none;"></div>
            <label id="labelUsername">UserID : </label><br>
            <input type="hidden" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
            <label id="labelEmail">Email : </label><br>
            <input type="hidden" id="inputEmail" class="form-control" placeholder="Email" required autofocus></input>
            <input type="text" id="inputNewEmail" class="form-control" placeholder="New Email" required autofocus></input>
            <p></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="update_btn" value="Update"></input>
            <p><br/></p>
            <label id="labelPassword">Old Password</label><br>
            <input type="password" id="inputPassword" class="form-control" placeholder="Old Password" required></input>
            <label id="labelNewPassword">New Password</label><br>
            <input type="password" id="inputNewPassword" class="form-control" placeholder="New Password" required></input>
            <label id="labelRetypeNewPassword">Retype New Password</label><br>
            <input type="password" id="inputRetypeNewPassword" class="form-control" placeholder="Retype New Password" required></input>
            <p></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="change_password_btn" value="Change Password"></input>
            <p><br/></p>
            <input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_out_btn" value="Sign Out"></input>
        </form>
    </div>
    <script>
        // Amazon Cognito
        AWSCognito.config.region = "ap-northeast-1";
        AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id ]"
        });
        var data = {
            UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
            ClientId: "[Amazon Cognito User Pool の App Client Id]"
        };
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
        var attributeList = [];
        var cognitoUser;

        $("#update_btn").click(function() {
            email = $("#inputEmail").val();
            newemail = $("#inputNewEmail").val();
            if(!newemail) {
                $("#message").text("Input New Email !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            var attributeList = [];
            var attribute = {
                Name : "email",
                Value : newemail
            };
            var attribute = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(attribute);
            attributeList.push(attribute);
            cognitoUser = userPool.getCurrentUser();
            console.log("cognitoUser : ");
            console.log(cognitoUser);
            if (cognitoUser != null) {
                cognitoUser.getSession(function(err, result) {
                    if (result) {
                        cognitoUser.updateAttributes(attributeList, function(err, result) {
                            if (err) {
                                console.log(err);
                                console.log(result);
                                $("#message").text(err);
                                $("#message").addClass("alert-danger");
                                $("#message").show();
                            } else {
                                $("#message").text("Update.");
                                $("#message").addClass("alert-success");
                                $("#message").show();
                            }
                        });
                    } else {
                        var url = "signin.html";
                        $(location).attr("href", url);
                    }
                });
            } else {
              var url = "signin.html";
              $(location).attr("href", url);
            }
        });

        $("#change_password_btn").click(function() {
            password = $("#inputPassword").val();
            newpassword = $("#inputNewPassword").val();
            retypenewpassword = $("#inputRetypeNewPassword").val();
            if(!password) {
                $("#message").text("Input Old Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!newpassword) {
                $("#message").text("Input New Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(!retypenewpassword) {
                $("#message").text("Input Retype New Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            if(newpassword != retypenewpassword) {
                $("#message").text("Wrong Retype New Password !!");
                $("#message").addClass("alert-danger");
                $("#message").show();
                return false;
            }
            cognitoUser = userPool.getCurrentUser();
            console.log("cognitoUser : ");
            console.log(cognitoUser);
            if (cognitoUser != null) {
                cognitoUser.getSession(function(err, result) {
                    if (result) {
                        cognitoUser.changePassword(password, newpassword, function(err, result) {
                            if (err) {
                                console.log(err);
                                console.log(result);
                                $("#message").text(err);
                                $("#message").addClass("alert-danger");
                                $("#message").show();
                            } else {
                                $("#message").text("Change Password.");
                                $("#message").addClass("alert-success");
                                $("#message").show();
                            }
                        });
                    } else {
                        var url = "signin.html";
                        $(location).attr("href", url);
                    }
                });
            } else {
                var url = "signin.html";
                $(location).attr("href", url);
            }
        });

        $("#sign_out_btn").click(function() {
            cognitoUser = userPool.getCurrentUser();
            console.log("cognitoUser : ");
            console.log(cognitoUser);
            if (cognitoUser != null) {
                console.log(cognitoUser);
                cognitoUser.signOut();
            }
            var url = "signin.html";
            $(location).attr("href", url);
        });

        function loadHello() {
            console.log("userPool : ");
            console.log(userPool);
            cognitoUser = userPool.getCurrentUser();
            console.log("cognitoUser : ");
            console.log(cognitoUser);
            if (cognitoUser != null) {
                console.log("cognitoUser is not null.");
                cognitoUser.getSession(function(err, result) {
                    if (result) {
                        console.log("Id      Token + " + result.getIdToken().getJwtToken());
                        console.log("Access  Token + " + result.getAccessToken().getJwtToken());
                        console.log("Refresh Token + " + result.refreshToken.token);
                        console.log(result);
                        // Common
                        AWS.config.region = "ap-northeast-1";
                        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                            IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id ]",
                            Logins: {
                                "cognito-idp.ap-northeast-1.amazonaws.com/[Amazon Cognito User Pool の Pool Id]" : result.getIdToken().getJwtToken()
                            }
                        });
                        //
                        AWS.config.credentials.get(function(err) {
                            if (!err) {
                                console.log("accessKeyId     + " + AWS.config.credentials.accessKeyId);
                                console.log("secretAccessKey + " + AWS.config.credentials.secretAccessKey);
                                console.log("sessionToken    + " + AWS.config.credentials.sessionToken);
                            }else{
                                    log("Error : " + err);
                            }
                        });
                        cognitoUser.getUserAttributes(function(err, attrresult) {
                            if (err) {
                                alert(err);
                                return;
                            }
                            console.log(attrresult);
                            console.log(cognitoUser);
                            console.log(cognitoUser.username);
                            $("#labelUsername").html("UserID : " + cognitoUser.username);
                            document.getElementById("inputUsername").value = cognitoUser.username;
                            for (i = 0; i < attrresult.length; i++) {
                                if (attrresult[i].getName()=="email") {
                                    $("#labelEmail").html("Email : " + attrresult[i].getValue());
                                    document.getElementById("inputEmail").value = attrresult[i].getValue();
                                }
                            }
                            console.log(AWSCognito.config);
                            console.log(AWSCognito.config.credentials);
                            console.log("Cognito Identity Id: " + AWSCognito.config.credentials.identityId);
                        });
                    } else {
                        console.log("cognitoUser.getSession - Error.");
                        //var url = "signin.html";
                        //$(location).attr("href", url);
                    }
                });
            } else {
                console.log("cognitoUser is null.");
                //var url = "signin.html";
                //$(location).attr("href", url);
            }
        }

        function unloadBye() {
            console.log(AWS.config);
            //alert("Bye!");
        }

    </script>
</body>
</html>

 
3. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Sign In」ボタンを押下

スクリーンショット 2017-03-29 14.40.31.jpg
 
4. マイページが表示される。

スクリーンショット 2017-03-29 16.47.11.jpg

99.ハマりポイント

  • サインアップやアクティベートはすんなり行きましたが、サインインとユーザー情報の取得のところで躓きました。AWS.config.region = "ap-northeast-1"; この1行が無い所為で、全然認証が通らず。かなり困りました…。

XX.まとめ

色々なサイトを参考にさせてもらって、一通り確認することが出来ました。
本当は、参考元を記載しなければいけないところではあるんですが、
すいません、忘れてしまいました…。

次は、iOSから認証を確認しようかと思います。

kusokamayarou
鹿児島市の企業に勤めて、枕崎でテレワークしてる IT エンジニアです。 最近、自分で事業をしようとちょっとずつ動き始めました。
http://kusokamayarou.hatenablog.com/
genbasupport
建設業を支えるコミュニケーション&マネジメントのサービスを開発・運営するエンジニアチーム
http://www.genbasupport.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away