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


### ユーザー認証作成の作業メモ
参考：[AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IO](http://dev.classmethod.jp/cloud/aws/login-form-by-using-aws-sdk-for-javascript/)を参考に認証画面を作ってみました。基本は後追いですが、そこそこハマりました。
次に同じのを作るときにまたハマると思うので作業メモです。
ユーザー作成画面まで

### cognitoを触ってみる
今回初めてcognitoを触ります。
イマイチ挙動を理解しきれていないのですが、ゆっくり覚えていきたいです。

### 環境
ローカルで記述したHTMLファイルをブラウザで開いてテストします。
サーバーを用意したり等はしません。ローカル環境でのCognitoとの疎通確認が目的です。

### Cognito:UserPoolの作成
![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/2dad7687-474f-6d85-3a36-47a61a13a5d8.jpeg "001.jpg")


右上の青いCreateを押下

```:UserPool名
Pool name:user-identity
```
デフォルト値で作成し、必要なところを修正します。

最終的にはこうします

![スクリーンショット 2016-08-24 18.17.26.png](https://qiita-image-store.s3.amazonaws.com/0/52141/749a348e-7ec4-964f-085f-c3505f2d7486.png "スクリーンショット 2016-08-24 18.17.26.png")

__作成時に面倒なのでパスワードポリシを緩くします___

![スクリーンショット 2016-08-24 18.14.52.png](https://qiita-image-store.s3.amazonaws.com/0/52141/b8f30903-45c2-11ac-42a3-8dab4da593ff.png "スクリーンショット 2016-08-24 18.14.52.png")

__Appsを登録します（2種類）__

```:app_1
App name:create-user
```

```:app_2
App name:cognito-identity

```

__両方共に"Generate client secret"はオフにします__
オンになっていると紹介されているJavaScriptを書いた時にエラーを起こします

![スクリーンショット_2016-08-24_18_17_13.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/8d93de35-92ea-a083-39ec-d3bf409ce7c9.jpeg "スクリーンショット_2016-08-24_18_17_13.jpg")

## Cognito:identity poolの作成
![スクリーンショット_2016-08-24_18_27_21.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/54a7cbf4-661f-e8fc-70f5-0340f90a559b.jpeg "スクリーンショット_2016-08-24_18_27_21.jpg")

```:IdentityPool
Identity pool name: loginApp
Enable access to unauthenticated identities: チェックON

```

ここで先ほど作成したUserPoolの情報を入力します
App client idとPool Idを使用します

##### Pool Idの確認
![スクリーンショット_2016-08-24_18_34_00.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/ba7bdd2f-8914-5bee-e231-4bda7f158f84.jpeg "スクリーンショット_2016-08-24_18_34_00.jpg")

##### App client idの確認
![スクリーンショット_2016-08-24_18_35_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/007d5e35-fa4c-68ba-3cb5-da33ad8ba91f.jpeg "スクリーンショット_2016-08-24_18_35_03.jpg")

cognito-identityの方のApp client idを取得します


![スクリーンショット_2016-08-24_18_31_44.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/5225e696-d359-f220-fe35-1698714ad2df.jpeg "スクリーンショット_2016-08-24_18_31_44.jpg")

確定後は自動でIAMを作成してくれるので”許可”を押下します。

後ほど使用するため、Identity pool ID と Identity Pool ARN を控えておきます

![スクリーンショット_2016-08-24_18_38_45.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/6f6057e4-f708-bd9b-2043-a445c7ddee08.jpeg "スクリーンショット_2016-08-24_18_38_45.jpg")

![スクリーンショット_2016-08-24_18_39_55.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/e689a2dc-ff73-c8fd-9787-5bc0dbd10437.jpeg "スクリーンショット_2016-08-24_18_39_55.jpg")

### HTMLファイルの準備（ユーザー作成フォーム）
参考記事内から[AWS SDK for JavaScriptを使ってブラウザーからCognito User Poolsへサインアップしてみた](http://dev.classmethod.jp/cloud/aws/singup-to-cognito-userpools-using-javascript/)へ飛んだ先にあるサンプルを使用しました

今回はEmailアドレスを使用するので一部書き換えています

##### ディレクトリ構成

CSS分けろとかのツッコミはなしでオナシャス
ザーッとやってたもので・・・

```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
```

##### 必要なjsファイルの取得
./www/js 配下のmypage.js以外の5ファイルが必要になるので準備します

https://github.com/aws/amazon-cognito-identity-js
ここから全て入手します

* [aws-cognito-sdk.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.min.js)
* [amazon-cognito-identity.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js)
* [jsbn.js](http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn.js)
* [jsbn2.js](http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn2.js)
* [sjcl.js](https://github.com/bitwiseshiftleft/sjcl/blob/master/sjcl.js)


##### signup.html（ユーザー作成フォーム）
<作成したIdentityPoolIdの値>と＜作成したApp-create-user-の値＞各自の環境のものを使って下さい。

```:signup.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Create User</title>
    <!-- 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>

<div class="container">
    <form class="form-signin">
        <h2 class="form-signin-heading">ユーザー作成</h2>
        <div id="message" class="alert" style="display:none;"></div>
        <label for="inputUsername" class="sr-only">ユーザー名</label>
        <input type="text" id="inputUsername" class="form-control" placeholder="User name" required autofocus></input>

        <label for="inputEmail" class="sr-only">メールアドレス</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="Email" required autofocus></input>

        <label for="inputPassword" class="sr-only">パスワード</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
        <br/>
        <input type="button" class="btn btn-lg btn-primary btn-bloc" id="user_add_btn" value="ユーザーを作成する"></input>
    </form>
</div>
<script>
    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: '＜create-userの App client idの値＞'
    };
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
    var cognitoUser;
</script>
<script>
    $('#user_add_btn').click(function () {
        username = $("#inputUsername").val();
        email    = $("#inputEmail").val();
        password = $("#inputPassword").val();
        if (!username || !password || !email) {
            return false;
        }
        var attributeList = [
            {
                Name: 'email',
                Value: email
            }
        ];

        userPool.signUp(username, password, attributeList, null, function (err, result) {
            if (err) {
                console.log(err);
                message_text = err;
                message_class = "alert-danger";
            } else {
                cognitoUser = result.user;
                console.log('user name is ' + cognitoUser.getUsername());
                message_text = cognitoUser.getUsername() + "が作成されました";
                message_class = "alert-success";
            }
            $("#message").text(message_text);
            $("#message").addClass(message_class);
            $('#message').show();
            setTimeout(function () {
                $('#message').fadeOut();
                $("#message").removeClass(message_class);
            }, 5000);
        });
    });
</script>
</body>
</html>
```

作成したHTMLファイルをブラウザで開くと以下のようになります

![スクリーンショット 2016-08-24 19.02.18.png](https://qiita-image-store.s3.amazonaws.com/0/52141/a10ce1cc-418f-d3b1-b140-be53079c5bb5.png "スクリーンショット 2016-08-24 19.02.18.png")

### cognitoの画面で確認する

![スクリーンショット 2016-08-24 19.06.17.png](https://qiita-image-store.s3.amazonaws.com/0/52141/717d2134-0849-859f-089c-0c4bfaadb25e.png "スクリーンショット 2016-08-24 19.06.17.png")

ユーザーが追加されています。
打ち込んだメールアドレスに確認コードも届いていると思います。確認してみてください。

__面倒なので手動で有効化します__

test1をクリックするし、Confirm user	を押してしまいます
![スクリーンショット 2016-08-24 19.06.39.png](https://qiita-image-store.s3.amazonaws.com/0/52141/1926933a-218c-9ae9-869b-aa841b7cb72c.png "スクリーンショット 2016-08-24 19.06.39.png")

以上でユーザーの作成が出来ました。