cognitoを使ってログイン画面を作ってみた! 〜ログイン画面作成〜(作業メモ)

  • 17
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

cognitoを使ってログイン画面を作ってみた! 〜ユーザーの作成〜(作業メモ)で書ききらなかった続き。
例によって参考はこちらの記事:AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IO


ディレクトリ構成

ディレクトリ構成
.
└── www
    ├── js
    │   ├── amazon-cognito-identity.min.js
    │   ├── aws-cognito-sdk.min.js
    │   ├── jsbn.js
    │   ├── jsbn2.js
    │   ├── mypage.js
    │   └── sjcl.js
    ├── login.css
    ├── login.html
    ├── mypage.css
    ├── mypage.html
    └── signup.html

ログイン画面の作成

サンプルのレイアウトはこちらを利用しました。
cssも作成して置いておいて下さい。

サンプルのTHML情報をテンプレートに埋め込んだだけ。
前回取得したIdentity pool ID(loginAppって名前で作ったやつ)、cognito-identityで作成したApp client idを使用します

login.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" type="text/css" href="./login.css">
    <!-- aws sdk //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.8.min.js"></script>
    <!-- aws cognito sdk (public beta!!) //-->
    <script src="./js/jsbn.js"></script>
    <script src="./js/jsbn2.js"></script>
    <script src="./js/sjcl.js"></script>
    <script src="./js/moment.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.3.min.js"
            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></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>

<script type="text/javascript">
    AWS.config.region = 'ap-northeast-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '<loginAppのIdentity pool ID>'
    });
    // Initialize the Amazon Cognito credentials provider
    AWSCognito.config.region = 'ap-northeast-1'; // Region
    AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '<loginAppのIdentity pool ID>'
    });
    var data = { UserPoolId: '<作成したuser-identityのPool Id>',
        ClientId: '<cognito-identityのApp client id>',
        Paranoia : 7
    };

    var userPool;
    var cognitoUser;
</script>

<!-- header -->
<hgroup class="heading">
    <h1 class="major">Login Form </h1>
</hgroup>

<!-- form starts here -->
<form class="sign-up">
    <h1 class="sign-up-title">Sign up in seconds</h1>
    <input type="text" class="sign-up-input" id="name" placeholder="What's your username?" autofocus>
    <input type="password" class="sign-up-input" id="password" placeholder="Choose a password">
    <button type="submit" value="Log in" class="sign-up-button" id="login-button">Login</button>
</form>

<div class="about">
    <p class="about-links">
        <a href="http://www.cssflow.com/snippets/sign-up-form" target="_parent">View Article</a>
        <a href="http://www.cssflow.com/snippets/sign-up-form.zip" target="_parent">Download</a>
    </p>
    <p class="about-author">
        &copy; 2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
        <a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
        Original PSD by <a href="http://dribbble.com/shots/1037950-Sign-up-freebie" target="_blank">Dylan Opet</a>
    </p>
</div>

<script type="text/javascript">
    $("#login-button").click(function(event){
        event.preventDefault();
        var authenticationData = {
            Username : $('#name').val(),
            Password : $('#password').val()
        };
        var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
        userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
        var userData = {
            Username : $('#name').val(),
            Pool : userPool
        };
        cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
        cognitoUser.authenticateUser(authenticationDetails, {
            onSuccess: function (authresult) {
                //console.log('access token + ' + authresult.getIdToken().getJwtToken());

                var url = "mypage.html";

                $('form').fadeOut(700, function(){
                    $(location).attr("href", url);
                });
                $('.wrapper').addClass('form-success');

            },
            onFailure: function(err) {
                alert(err.message);
            },
        });
    });
</script>


</body>
</html>

ログイン後の遷移先「mypage.html」も合わせて準備します。
サンプルと同じこのレイアウトを当ててみます。
cssファイルも準備してください。
mypage.htmlはそのまんま使います(遷移先のマイページって書いてあるソース)。
cssの置き場とか違うので一応載せておきます

mypage.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MyPage</title>
    <link rel="stylesheet" type="text/css" href="./mypage.css">
</head>
<body>
<div class="wrapper">
    <div class="mypage">
        <h1>mypage</h1>
        <div id="username">Username: XXXXX</div>
        <div id="email">EMail: XXXXX</div>

    </div>
</div>
<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>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.5.2.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/mypage.js"></script>

</body>
</html>

両方準備したら前回作成したユーザーで試しにログインしてみます。

ログイン画面

スクリーンショット 2016-08-25 11.10.03.png

成功すると

スクリーンショット 2016-08-25 11.18.51.png

ログインが出来ました!!!

ログインセッション

あとは、記事で書かれているようにログインセッションを準備します
./www/js 配下にmypage.jsを準備することでログインセッションを用意できるようです。

mypage.js
AWS.config.region = 'ap-northeast-1'; // Region
AWSCognito.config.region = 'ap-northeast-1'; // Region

var data = { UserPoolId: '<作成したuser-identityのPool Id>',
    ClientId: '<cognito-identityのApp client id>'
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var cognitoUser = userPool.getCurrentUser();

if (cognitoUser != null) {
    cognitoUser.getSession(function(err, sessresult) {
        if (sessresult) {
            console.log('You are now logged in.');
            cognitoUser.getUserAttributes(function(err, attrresult) {
                if (err) {
                    alert(err);
                    return;
                }
                $("#username").html("Username: " + cognitoUser.username);

                for (i = 0; i < attrresult.length; i++) {
                    if (attrresult[i].getName()=="email"){
                        $("#email").html("EMail: " + attrresult[i].getValue());
                    }
                }

                // Add the User's Id Token to the Cognito credentials login map.
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                    IdentityPoolId: '<loginAppのIdentity pool ID>',
                    Logins: {
                        '<loginAppのIdentity pool IDのARN(cognito-identity:から末尾まで)>': sessresult.getIdToken().getJwtToken()
                    }
                });
            });
        } else {
            var url = "login.html";
            $(location).attr("href", url);
        }
    });
} else {
    var url = "login.html";
    $(location).attr("href", url);
}

コレを作成すると、ログインしていないとlogin画面に戻され、ログインすると画面内のユーザー名とメールアドレスの欄がユーザーのものになるようです。

cognitoよくわからなくて触れていなかったのですが、記事のおかげで触ることが出来ました。
記事に書いてあるようにS3と連携していろいろやっていきたい!

S3でBASIC認証かけたい的な話題もよく聞きますが、コレなら簡単に実装できて便利ですねー
ログイン失敗時も一瞬遷移先のページが見えていますが、そのへんは更にクッションページ挟んだりすることでなんとかなりそうWAFとかも挟んでヘッダー情報で弾いたりとかもできるし組み合わせていけば手軽ですねー

クラメソさんの記事はいつも本当に勉強になる。アリガタヤー