概要
前回 Cognito を使ってユーザの登録ができるところまで試しました
今回はその登録したユーザでログインするところを実装してみたいと思います
環境
- Mac OS X 10.11.6
- AWS Cognito 2016/09/30 時点
- Apache httpd 2.4.18
- Google Chrome 53.0.2785.116 (動作確認用)
事前準備
User Pool, Federated Identities の作成は前回の記事と全く同じなので、前回の記事を参考に作成してください
基本は AWS のマネージメントコンソールでポチポチしていけば OK です
必要なライブラリのダウンロードも前回と同じなので、そこまでは前回の記事を参考にしてください
ログイン処理の実装
登録したユーザでログインするための画面を実装します
- cd /Library/WebServer/Documents/cognito
- vim signin.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>signin</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/signin.js'></script>
</head>
<body>
<div>
<div>
<form>
<h2>ログイン</h2>
<label for="inputUsername" >ユーザー名</label>
<input type="text" placeholder="Username" id="name">
<label for="inputPassword">パスワード</label>
<input type="password" placeholder="Password" id="password">
<br />
<input type="submit" id="login-button" value="ログイン"></input>
</form>
</div>
</div>
</body>
</html>必要な js ファイルを読み込んでユーザ名とパスワードを送信するためのフォームを作成しています
- vim js/signin.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;
var cognitoUser;
$(function() {
$("#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) {
alert('Login Success');
},
onFailure: function(err) {
alert(err.message);
},
});
});
});前回と設定する箇所が異なるところが 1 点あります
ClientId の部分が前回は signup_app の App client id でしたが、今回は cognito アプリの App client id を指定してください
他の値は前回と同様で OK です
処理としてはログインボタンが押されたあとで authenticateUser をコールしてユーザ名とパスワードで認証します
問題なく認証できれば「Login Success」とダイアログで表示します
ログインできない場合の主な原因は
- Incorrect username or password. -> ユーザ名とパスワードが違う
- User is not confirmed. -> まだ認証許可が降りていない
辺りかと思います
2 つめの「User is not confirmed.」は User Pool の画面から設定することができます
登録されたユーザを選択し「Confirm user」を選択すると confirm され認証できるようになります
動作確認
では動作確認してみましょう
問題なく認証に成功すると以下のように表示されると思います
最後に
前回からの引き続きで今回は AWS Cognito を使ったログイン処理を試してみました
ユーザ登録後には Confirm してあげないとログインできない点がポイントだったかなと思います
とりあえず基本的な動作は確認できました
あとは、AWS のリソース制御やモバイル連携、各種 SNS サービスの認証と連携するあたりが実運用を考えると必要なパーツになるかと思います
今回はお試しとしてやってみただけなので、実際にサービスに組み込む機会があったらその辺りも検証してみたいなと思っています
0 件のコメント:
コメントを投稿