cognitoを使ってログイン画面を作ってみた！ 〜ログイン画面作成〜（作業メモ）


[cognitoを使ってログイン画面を作ってみた！ 〜ユーザーの作成〜（作業メモ）](http://qiita.com/Yuki_BB3/items/4286545e8b889ec13088)で書ききらなかった続き。
例によって参考はこちらの記事：[AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IO](http://dev.classmethod.jp/cloud/aws/login-form-by-using-aws-sdk-for-javascript/)

---

### ディレクトリ構成

```bash:ディレクトリ構成
.
└── 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
```

### ログイン画面の作成
サンプルのレイアウトは[こちら](http://codepen.io/palimadra/pen/EKmnb)を利用しました。
cssも作成して置いておいて下さい。


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


```html: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」も合わせて準備します。
サンプルと同じ[この](https://codepen.io/Lewitje/pen/BNNJjo)レイアウトを当ててみます。
cssファイルも準備してください。
mypage.htmlはそのまんま使います（遷移先のマイページって書いてあるソース）。
cssの置き場とか違うので一応載せておきます

```html: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](https://qiita-image-store.s3.amazonaws.com/0/52141/bfd81514-d58c-676e-afd3-fee45bd128f6.png "スクリーンショット 2016-08-25 11.10.03.png")

成功すると

![スクリーンショット 2016-08-25 11.18.51.png](https://qiita-image-store.s3.amazonaws.com/0/52141/032b427b-1b38-da4f-3e8d-0f78c511f051.png "スクリーンショット 2016-08-25 11.18.51.png")

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

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

```javascript: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とかも挟んでヘッダー情報で弾いたりとかもできるし組み合わせていけば手軽ですねー

クラメソさんの記事はいつも本当に勉強になる。ｱﾘｶﾞﾀﾔｰ