概要
AWS Cognito はユーザ管理やフェデレーションをサポートしてくれるサービスです
今回は Cognito を使ってユーザのサインアップを試してみました
環境
- Mac OS X 10.11.6
- AWS Cognito 2016/09/30 時点
- Apache httpd 2.4.18
- Google Chrome 53.0.2785.116 (動作確認用)
User Pools の作成
まず User Pool を作成します
Cognito にログインしたページから「Manage Your User Pools」を選択します
まだ 1 つも User Pool が作成されていないと思います
「Click here to create a user pool.」を選択します
まずは User Pool の名前を決定します
好きな名前を入力してください
名前を入力したら今回は右側の「Step through settings」を選択してください
こちらを選択すると User Pool の設定を各項目ごとに設定することができます
で、設定時のポイントは 1 つです
初めの Attributes の設定で email にチェックが入っているのでこれを外してください
あとは特に気にすることなく Next step していけば OK です
今回は以下のような感じで User Pool が作成されました
一番上の Pool Id は後で使用するのでメモしておいてください
Apps の作成
実際に Cognito を使ってアクセスするアプリを作成します
今回は Cognito を使って認証するためのアプリとユーザをサインアップするための 2 つのアプリを作成します
左メニューから「Apps」を選択したら「Add an app」を選択します
今回作成するアプリは「cognito」と「signup_app」にします
作成時のポイントとしては Generate client secret にチェックを入れないようにしてください
入力できたら「Create app」を選択します
同じように signup_app も作成しましょう
以下のようになれば OK です
作成時に発行される App client id は後で使うのでメモしておいてください
これで User Pool の作成は完了です
Federated Identities の作成
次に Federated Identities を作成していきます
User Pool の画面上部に「Federated Identities」へのリンクがあるのでここから移動してください
まだ、Federated Identities は作成されていないと思うので作成していきます
まず、好きな名前を入力し「Enable access to unauthenticated identities」にチェックを入れてください
そのすぐ下に「Authentication providers」という項目があるので開きます
この項目の Cognito のタブにある「User Pool ID」と「App Client ID」に先ほど User Pool で作成した cognito アプリの情報を入力します
「User Pool ID」には User Pool 作成時に取得できた Pool Id を入力し「App Cient ID」には cognito アプリ作成時に発行された App client id を入力してください
入力できたら「Create Pool」で OK です
作成が完了したら「Edit identity pool」から Identity pool ID を確認しておきましょう
これもあとで使用します
これで Federated Identities の作成は完了です
アプリから Cognito を使う準備も整いました
では、実際に Javascript のクライアントアプリを作成してみましょう
ワークスペースの作成
今回は Mac 上にインストールした httpd の DocumentRoot 配下で作業していきます
- cd /Library/WebServer/Documents
- sudo mkdir cognito
- cd cognito
各種必要なライブラリのダウンロード
wget で必要なライブラリを取得していきます
- cd /Library/WebServer/Documents/cognito
- sudo mkdir js
- cd js
- sudo wget https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.min.js
- sudo wget https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js
- sudo wget http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn.js
- sudo wget http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn2.js
- sudo wget https://raw.githubusercontent.com/bitwiseshiftleft/sjcl/master/sjcl.js
- sudo wget http://momentjs.com/downloads/moment.js
- sudo wget https://github.com/aws/aws-sdk-js/releases/download/v2.6.6/browser.zip
- sudo unzip browser.zip
- sudo mv dist/aws-sdk.min.js .
- sudo rm -rf dist/ browser.zip
- sudo wget https://code.jquery.com/jquery-3.1.1.min.js
サインアップ処理の実装
では実際にコーディングしていきます
ユーザを登録するためのサインアップ画面を実装します
- cd /Library/WebServer/Documents/cognito
- vim signup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>signup</title>
<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>
<script src="js/aws-sdk.min.js"></script>
<script src='js/jquery-3.1.1.min.js'></script>
<script src='js/signup.js'></script>
</head>
<body>
<div>
<form>
<h2>サインアップ</h2>
<div id="message" style="display:none;"></div>
<label for="inputUsername" >ユーザー名</label>
<input type="text" id="inputUsername" placeholder="User name" required autofocus></input>
<label for="inputPassword">パスワード</label>
<input type="password" id="inputPassword" placeholder="Password" required></input>
<br/>
<input type="button" id="user_add_btn" value="ユーザーを作成する"></input>
</form>
</div>
</body>
</html>必要な js ファイルを読み込んでユーザ名とパスワードを送信するためのフォームを作成しています
- vim js/signup.js
AWS.config.region = 'ap-northeast-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
});
AWSCognito.config.region = 'ap-northeast-1';
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
});
var data = {
UserPoolId: 'ap-northeast-1_xxxxxxxxx',
ClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var attributeList = [];
var cognitoUser;
$(function() {
$("#user_add_btn").click(function(e) {
username = $("#inputUsername").val();
password = $("#inputPassword").val();
if(!username || !password) { return false; }
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);
});
});
});この Javascript ファイルが実際に AWS Cognito と通信を行うロジックファイルになります
設定するべき箇所は IdentityPoolId, UserPoolId, ClientId の 3 つです
IdentityPoolId は Federated Identities 作成時に発行された「Identity pool ID」を指定します
UserPoolId は User Pool 作成時に発行された「Pool Id」を指定します
ClientId は User Pool の Apps 作成時に「signup_app」と名付けたアプリの「App client id」を指定します
処理としても簡単で HTML 内のフォームボタンが押されたら jQuery 内で signUp メソッドをコールしているだけです
あとは、結果によって表示する内容を変更しています
これで基本は動作するはずなので httpd を起動してブラウザで http://localhost/cognito/signup.html にアクセスして動作確認してみましょう
動作確認
パスワードのポリシーが
- 8 文字以上
- 半角英数字、大文字小文字を含む
- 半角数字を含む
- 記号を含む
という条件になっているのでご注意ください
ポリシーをクリアしていないとエラーが返ってくるのでわかると思います
問題なくユーザ登録が完了すると以下のようになります
また User Pool の Users 項目を確認すると登録できたユーザが存在していると思います
これで Cognito を使ったユーザのサインアップ処理が完成しました
最後に
Web にあるサンプルが bootstrap やらいろいろとアレンジしているのが多かったのでシンプルな感じのやつを紹介しました
自画自賛ですが、わりとわかりやすい説明ができたかなと思います
今回は単純な認証しか試していませんが、Cognito は Facebook や Google などと連携して初めて効果をはっきするサービスだと思います
また、Federated Identities は IAM のロールとも連携しておりログインしたユーザが制御できる AWS のリソースを設定することもできます
次回は作成したユーザで実際にログインするところをやってみたいと思います
