Amazon Cognito User Poolsのデモをしてみました

2016/06/19

AWS Summit 2016 Tokyoのアップデートおっかけ会をJAWS-UG大阪でやるという事で、AWS Summit Tokyoでの発表ではなかったですが、AWS Summit CicagoのアップデートのCognito User Poolsのデモをしてみました。

環境作りのメモを残させていただきます。

参考(写経?)にさせていただいたサイト様

ありがとうございます！
感謝感謝でございます。

Developers.IO様
[新機能] Amazon Cognito に待望のユーザー認証基盤「User Pools」が追加されました！

horike37様
Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る

Cognito User Poolsの設定

それでは、参考にさせていただきまくってはおりますが、設定手順などを書き残させていただきます。

Cognito-1

マネージメントコンソールからCognitoに行って、[Manage your User Pools]を選択します。

cognito-2

2016/6/19時点ではバージニア北部リージョンでしか使えないので、それ以外のリージョンを選択している場合は、[Switch to US East(Virginia)]ボタンが表示されるので押します。

Cognito-3

無事、バージニア北部リージョンに切り替わったら[Create a User Pool]を押してUser Poolの作成を開始します。

Cognito-4

Poolの名前を設定します。

Cognito-5

サインアップの際に必須にしたいユーザー属性(複数可)を選びます。
カスタム属性を作成する事も出来ます。

Cognito-6

パスワードポリシーを設定します。
最低文字数、数字、記号、大文字、小文字を含めるかを決めます。

Cognito-7

他要素認証を設定するかを決めます。
属性でEメールのみとしているので電話は設定出来なかった？ようです。
電話での認証もまた試してみますが、Verificationでメールでコードが飛ぶようにだけ、そのままの設定にしておきます。

Cognito-8

アプリの名前を設定します。

Cognito-9

設定内容が表示されるので確認して作成します。

Identity Poolの作成

続いて[Manage Federated Identities]-[Create new Identity pool]を押してIdentity poolを作成します。

Cognito-B-1

Identity poolの名前を設定します。
(今回はDEMO用のWebクライアントから使うので)「Enabale access to unauthenticated identities」にチェックを入れます。
Authentication providersで[Cognito]を選択します。
User Pool ID , App Client IDにCognito User Poolsで生成したそれぞれのIDを設定します。

Cognito-B-2

ロールはデフォルトのままで新規作成します。

デモ用Webクライアント

とりあえずDemoなのでindex.htmlに全部まとめてしまいました。

コード全部はGitHubに置いてますのでこちらをご参照ください。
GitHub – CognitoUserPoolsDemoWebClient

準備

amazon-cognito-identity-jsを使わせていただきます。

amazon-cognito-identity-jsのSetupに書いてますが、じゃっかん戸惑いましたので記載します。

あと、Demoなのでライブラリは全部index.htmlと同じディレクトリに置いてます。

aws-sdk.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。ついでにaws-cognito-sdk.jsも。
jqueryを落として置くか、どこかから読み込むかします。
RSA and ECC in JavaScriptからjsbn.jsとjsbn2.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。
Stanford JavaScript Crypto Libraryは[compile new version]を使うとログインのところでエラーとなるのでsjcl.js.zipをダウンロードしてindex.htmlと同じディレクトリに配置しました。
moment.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。

共通のん

AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});

AWSCognito.config.region = 'us-east-1';
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});

var poolData = {
　UserPoolId : 'us-east-1_xxxxxxxx',
　ClientId: 'xxxxxxxxxxxxxxxxxxxxxx'
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

AWS.config.region = 'us-east-1';

AWS.config.credentials = new AWS.CognitoIdentityCredentials({

IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

});

AWSCognito.config.region = 'us-east-1';

AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({

IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

});

var poolData = {

　UserPoolId : 'us-east-1_xxxxxxxx',

　ClientId: 'xxxxxxxxxxxxxxxxxxxxxx'

};

var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

configにリージョンとIdentity poolのIDを設定しています。
poolData にUser Poolで生成したUser poolのIDとクライアントIDを設定しています。

サインアップ

slide-5

var dataEmail = {
Name : 'email',
Value : $('#email').val()
};
var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
var attributeList = [];
attributeList.push(attributeEmail);
userPool.signUp($('#email').val(), $('#password').val(), attributeList, null, function(err, result){
if (err) {
    //エラー処理
return;
}
//成功処理(メッセージなど)
});

var dataEmail = {

Name : 'email',

Value : $('#email').val()

};

var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);

var attributeList = [];

attributeList.push(attributeEmail);

userPool.signUp($('#email').val(), $('#password').val(), attributeList, null, function(err, result){

if (err) {

//エラー処理

return;

}

//成功処理(メッセージなど)

});

slide-6

サインアップするとVerificationの設定のとおり、メールが届きます。

slide-8

この時点ではまだ「Unconfirmed」です。

アクティベーション

slide-7

var userData = {
Username : $('#actemail').val(),
Pool : userPool
};
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.confirmRegistration($('#actcode').val(), true, function(err, result) {
if (err) {
    //エラー処理
return;
}
//成功処理(メッセージなど)
});

var userData = {

Username : $('#actemail').val(),

Pool : userPool

};

var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);

cognitoUser.confirmRegistration($('#actcode').val(), true, function(err, result) {

if (err) {

//エラー処理

return;

}

//成功処理(メッセージなど)

});

slide-9

「Confirmed」になりました。

var authenticationData = {
Username : $('#loginemail').val(),
Password : $('#loginpassword').val()
};
var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
var userData = {
Username : $('#loginemail').val(),
Pool : userPool
};
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
    //成功処理(デモでは画面にトークンを書き出してみてます)
$('#token').html('access token : ' + result.getAccessToken().getJwtToken());
},
onFailure: function(err) {
//エラー処理;
},
});