cognitoを使ってログイン画面を作ってみた！ 〜ユーザーの作成〜（作業メモ）で書ききらなかった続き。
例によって参考はこちらの記事：AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IO
ディレクトリ構成
ディレクトリ構成
.
└── 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
ログイン画面の作成
サンプルのレイアウトはこちらを利用しました。
cssも作成して置いておいて下さい。
サンプルのTHML情報をテンプレートに埋め込んだだけ。
前回取得したIdentity pool ID（loginAppって名前で作ったやつ）、cognito-identityで作成したApp client idを使用します
login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="./login.css">
<!-- 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>
<script type="text/javascript">
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: '＜cognito-identityのApp client id＞',
Paranoia : 7
};
var userPool;
var cognitoUser;
</script>
<!-- header -->
<hgroup class="heading">
<h1 class="major">Login Form </h1>
</hgroup>
<!-- form starts here -->
<form class="sign-up">
<h1 class="sign-up-title">Sign up in seconds</h1>
<input type="text" class="sign-up-input" id="name" placeholder="What's your username?" autofocus>
<input type="password" class="sign-up-input" id="password" placeholder="Choose a password">
<button type="submit" value="Log in" class="sign-up-button" id="login-button">Login</button>
</form>
<div class="about">
<p class="about-links">
<a href="http://www.cssflow.com/snippets/sign-up-form" target="_parent">View Article</a>
<a href="http://www.cssflow.com/snippets/sign-up-form.zip" target="_parent">Download</a>
</p>
<p class="about-author">
© 2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
<a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
Original PSD by <a href="http://dribbble.com/shots/1037950-Sign-up-freebie" target="_blank">Dylan Opet</a>
</p>
</div>
<script type="text/javascript">
$("#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) {
//console.log('access token + ' + authresult.getIdToken().getJwtToken());
var url = "mypage.html";
$('form').fadeOut(700, function(){
$(location).attr("href", url);
});
$('.wrapper').addClass('form-success');
},
onFailure: function(err) {
alert(err.message);
},
});
});
</script>
</body>
</html>
ログイン後の遷移先「mypage.html」も合わせて準備します。
サンプルと同じこのレイアウトを当ててみます。
cssファイルも準備してください。
mypage.htmlはそのまんま使います（遷移先のマイページって書いてあるソース）。
cssの置き場とか違うので一応載せておきます
mypage.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
<link rel="stylesheet" type="text/css" href="./mypage.css">
</head>
<body>
<div class="wrapper">
<div class="mypage">
<h1>mypage</h1>
<div id="username">Username: XXXXX</div>
<div id="email">EMail: XXXXX</div>
</div>
</div>
<script src="js/jsbn.js"></script>
<script src="js/jsbn2.js"></script>
<script src="js/sjcl.js"></script>
<script src="js/aws-cognito-sdk.min.js"></script>
<script src="js/amazon-cognito-identity.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.5.2.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/mypage.js"></script>
</body>
</html>
両方準備したら前回作成したユーザーで試しにログインしてみます。
ログイン画面
成功すると
ログインが出来ました！！！
ログインセッション
あとは、記事で書かれているようにログインセッションを準備します
./www/js 配下にmypage.jsを準備することでログインセッションを用意できるようです。
mypage.js
AWS.config.region = 'ap-northeast-1'; // Region
AWSCognito.config.region = 'ap-northeast-1'; // Region
var data = { UserPoolId: '＜作成したuser-identityのPool Id＞',
ClientId: '<cognito-identityのApp client id>'
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var cognitoUser = userPool.getCurrentUser();
if (cognitoUser != null) {
cognitoUser.getSession(function(err, sessresult) {
if (sessresult) {
console.log('You are now logged in.');
cognitoUser.getUserAttributes(function(err, attrresult) {
if (err) {
alert(err);
return;
}
$("#username").html("Username: " + cognitoUser.username);
for (i = 0; i < attrresult.length; i++) {
if (attrresult[i].getName()=="email"){
$("#email").html("EMail: " + attrresult[i].getValue());
}
}
// Add the User's Id Token to the Cognito credentials login map.
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: '＜loginAppのIdentity pool ID＞',
Logins: {
'＜loginAppのIdentity pool IDのARN（cognito-identity:から末尾まで）＞': sessresult.getIdToken().getJwtToken()
}
});
});
} else {
var url = "login.html";
$(location).attr("href", url);
}
});
} else {
var url = "login.html";
$(location).attr("href", url);
}
コレを作成すると、ログインしていないとlogin画面に戻され、ログインすると画面内のユーザー名とメールアドレスの欄がユーザーのものになるようです。
cognitoよくわからなくて触れていなかったのですが、記事のおかげで触ることが出来ました。
記事に書いてあるようにS3と連携していろいろやっていきたい！
S3でBASIC認証かけたい的な話題もよく聞きますが、コレなら簡単に実装できて便利ですねー
ログイン失敗時も一瞬遷移先のページが見えていますが、そのへんは更にクッションページ挟んだりすることでなんとかなりそうWAFとかも挟んでヘッダー情報で弾いたりとかもできるし組み合わせていけば手軽ですねー
クラメソさんの記事はいつも本当に勉強になる。ｱﾘｶﾞﾀﾔｰ