ユーザー認証作成の作業メモ
参考：AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IOを参考に認証画面を作ってみました。基本は後追いですが、そこそこハマりました。
次に同じのを作るときにまたハマると思うので作業メモです。
ユーザー作成画面まで
cognitoを触ってみる
今回初めてcognitoを触ります。
イマイチ挙動を理解しきれていないのですが、ゆっくり覚えていきたいです。
環境
ローカルで記述したHTMLファイルをブラウザで開いてテストします。
サーバーを用意したり等はしません。ローカル環境でのCognitoとの疎通確認が目的です。
Cognito:UserPoolの作成
右上の青いCreateを押下
Pool name:user-identity
デフォルト値で作成し、必要なところを修正します。
最終的にはこうします
作成時に面倒なのでパスワードポリシを緩くします_
Appsを登録します（2種類）
App name:create-user
App name:cognito-identity
両方共に"Generate client secret"はオフにします
オンになっていると紹介されているJavaScriptを書いた時にエラーを起こします
Cognito:identity poolの作成
Identity pool name: loginApp
Enable access to unauthenticated identities: チェックON
ここで先ほど作成したUserPoolの情報を入力します
App client idとPool Idを使用します
Pool Idの確認
App client idの確認
cognito-identityの方のApp client idを取得します
確定後は自動でIAMを作成してくれるので”許可”を押下します。
後ほど使用するため、Identity pool ID と Identity Pool ARN を控えておきます
HTMLファイルの準備（ユーザー作成フォーム）
参考記事内からAWS SDK for JavaScriptを使ってブラウザーからCognito User Poolsへサインアップしてみたへ飛んだ先にあるサンプルを使用しました
今回はEmailアドレスを使用するので一部書き換えています
ディレクトリ構成
CSS分けろとかのツッコミはなしでオナシャス
ザーッとやってたもので・・・
.
└── 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
ここから全て入手します
signup.html（ユーザー作成フォーム）
<作成したIdentityPoolIdの値>と＜作成したApp-create-user-の値＞各自の環境のものを使って下さい。
<!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ファイルをブラウザで開くと以下のようになります
cognitoの画面で確認する
ユーザーが追加されています。
打ち込んだメールアドレスに確認コードも届いていると思います。確認してみてください。
面倒なので手動で有効化します
test1をクリックするし、Confirm user を押してしまいます
以上でユーザーの作成が出来ました。