０．はじめに
AWS がサーバーレスで推奨しているサービスを、色々と使ってみます。
今回は、Amazon Cognito User Pools を JavaScript から使ってみます。
１．Amazon Cognito User Pool を作成する
Amazon Cognito の User Pool を作成する。
-
Getting started - Amazon Cognito - Amazon Web Services へ遷移し、「Manage your User Pools」ボタンを押下
-
- 「Create User Pool」ボタンを押下
-
- 以下の項目を設定し、「Review defaults」ボタンを押下
- Pool name : SmapleUserPool
-
- Pool name : SmapleUserPool
- 左側ペインから「Attributes」を選択後、以下の項目を設定し、「Save Changes」ボタンを押下
- email : Required : □ Alias : ☑︎
- phone number : Required : □ Alias : ☑︎
- ※メールでも電話番号でもログイン出来る様にしたかったので、この設定に。
-
- 左側ペインから「Verification」を選択後、以下の項目を設定し、「Create Role」ボタンを押下
- Do you want to enable Multi-Factor Authentication (MFA)?
- ◉ Optional
- ◉ Optional
-
- Do you want to enable Multi-Factor Authentication (MFA)?
- SMS用のロールが作成されるので、「Save Changes」ボタンを押下
-
- 左側ペインから「Apps」を選択後、「Add an app」リンクをクリック
-
- 以下の項目を設定し、「Create app」ボタンを押下
- App name : Cognito
- Refresh token expiration (days) : 30 ※デフォルト
- Generate client secret : □
- ※JavaScript からの認証の際にあると邪魔みたいなので。
- Enable sign-in API for server-based authentication (ADMIN_NO_SRP_AUTH) : ☑︎
- Only allow Custom Authentication (CUSTOM_AUTH_FLOW_ONLY) : □
-
- App が作成されるので、「Save Changes」ボタンを押下
-
- 「Create Pool」ボタンを押下
２．Amazon Cognito Identity Pool を作成する
Amazon Cognito の Identity Pool を作成する。
-
Getting started - Amazon Cognito - Amazon Web Services へ遷移し、「Manage Federated Identities」ボタンを押下
-
- 「Create new identity pool」ボタンを押下
-
- 以下の項目を設定し、「Create Pool」ボタンを押下
- Identity pool name : SampleIdentityPool
- Unauthenticated identities
- Enable access to unauthenticated identities : ☑︎
- Authentication providers
- Cognito
- User Pool ID : [Amazon Cognito User Pool の Pool Id]
- App Client ID : [Amazon Cognito User Pool の App Client Id]
- Cognito
-
- 以下の項目を設定し、「許可」ボタンを押下
-
３．S3 に静的ウェブサイトを構築する。
- 以下のサイトを参考に、S3 に静的ウェブサイトを構築する。
４．JavaScript からのサインアップ
- 「3．S3 に静的ウェブサイトを構築する。」で構築した S3 上に js フォルダを作成し、そこに以下の js ファイルを格納する。
-
RSA and ECC in JavaScript
- jsbn.js
- jsbn2.js
-
SJCL: a Javascript crypto library
- sjcl.js
-
aws/amazon-cognito-identity-js
- amazon-cognito-identity.min.js
- amazon-cognito-identity.min.js.map
- aws-cognito-sdk.js
- aws-cognito-sdk.min.js
- aws-cognito-sdk.min.js.map
-
aws/amazon-cognito-js: Amazon Cognito Sync Manager for JavaScript
- amazon-cognito.min.js
- amazon-cognito.min.js.map
-
RSA and ECC in JavaScript
- 以下の html ファイルを、「3．S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
- 36,38 行目の [Amazon S3 Bucket Name]
- 45 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
- 48 行目の [Amazon Cognito User Pool の Pool Id]
- 49 行目の [Amazon Cognito User Pool の App Client Id]
signup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<!-- AWS SDK //-->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
<!-- Amazon Cognito //-->
<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>
<!-- jquery //-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></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-signup">
<h2 class="form-signup-heading">Sign Up</h2>
<div id="message" class="alert" style="display:none;"></div>
<label id="labelUsername">UserID</label><br>
<input type="text" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
<label id="labelEmail">Email</label><br>
<input type="text" id="inputEmail" class="form-control" placeholder="Email" required autofocus></input>
<label id="labelPassword">Password</label><br>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
<p></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_up_btn" value="Sign Up"></input>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signin.html" target="_blank">SignIn</a>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/activation.html" target="_blank">Activation & Forget Password</a>
</form>
</div>
<script>
// Initialize the Amazon Cognito credentials provider
AWSCognito.config.region = "ap-northeast-1";
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
});
var data = {
UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
ClientId: "[Amazon Cognito User Pool の App Client Id]"
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var attributeList = [];
var cognitoUser;
function uuid() {
var uuid = "", i, random;
for (i = 0; i < 32; i++) {
random = Math.random() * 16 | 0;
if (i == 8 || i == 12 || i == 16 || i == 20) {
uuid += "-"
}
uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
}
return uuid;
}
$("#sign_up_btn").click(function() {
username = $("#inputUsername").val();
//username = uuid();
email = $("#inputEmail").val();
password = $("#inputPassword").val();
if(!username) {
$("#message").text("Input UserID !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!email) {
$("#message").text("Input Email !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!password) {
$("#message").text("Input Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
var dataEmail = {
Name : "email",
Value : email
};
var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
attributeList.push(attributeEmail);
//var dataPhoneNumber = {
// Name : "phone_number",
// Value : '+81' + email
//};
//var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
//attributeList.push(attributePhoneNumber);
userPool.signUp(username, password, attributeList, null, function(err, result){
if (err) {
console.log(err);
$("#message").text(err);
$("#message").addClass("alert-danger");
$("#message").show();
} else {
var url = "activation.html";
$("form").fadeOut(100, function(){
$(location).attr("href", url);
});
$(".wrapper").addClass("form-success");
}
});
});
</script>
</body>
</html>
3. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Sign Up」ボタンを押下
4. 入力したメールアドレスへ、アクティベーションコードが送られてくる。
５．JavaScript からのアクティベーション
- 以下の html ファイルを、「3．S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
- 36,38 行目の [Amazon S3 Bucket Name]
- 45 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
- 48 行目の [Amazon Cognito User Pool の Pool Id]
- 49 行目の [Amazon Cognito User Pool の App Client Id]
activation.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Activation & Forget Password</title>
<!-- AWS SDK //-->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
<!-- Amazon Cognito //-->
<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>
<!-- jquery //-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></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-activation">
<h2 class="form-activation-heading">Activation</h2>
<div id="message" class="alert" style="display:none;"></div>
<label id="labelUsername">UserID</label><br>
<input type="text" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
<label id="labelActivationKey">Activation Key</label><br>
<input type="activationkey" id="inputActivationKey" class="form-control" placeholder="Activation Key" required></input>
<p></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="activate_btn" value="Activate"></input>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="send_key_btn" value="Re:Send Activation Key"></input>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="forget_password_btn" value="Forget Password"></input>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signin.html" target="_blank">SignIn</a>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signup.html" target="_blank">SignUp</a>
</form>
</div>
<script>
// Initialize the Amazon Cognito credentials provider
AWSCognito.config.region = "ap-northeast-1";
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
});
var data = {
UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
ClientId: "[Amazon Cognito User Pool の App Client Id]"
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var attributeList = [];
var cognitoUser;
$("#activate_btn").click(function() {
username = $("#inputUsername").val();
activationkey = $("#inputActivationKey").val();
if(!username) {
$("#message").text("Input UserID !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!activationkey) {
$("#message").text("Input Activation Key !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
var userData = {
Username : username,
Pool : userPool
};
cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.confirmRegistration(activationkey, true, function(err, result){
if (err) {
console.log(err);
message_text = err;
message_class = "alert-danger";
$("#message").text(message_text);
$("#message").addClass(message_class);
$("#message").show();
} else {
var url = "signin.html";
$("form").fadeOut(100, function(){
$(location).attr("href", url);
});
$(".wrapper").addClass("form-success");
}
});
});
$("#send_key_btn").click(function() {
username = $("#inputUsername").val();
if(!username) {
$("#message").text("Input UserName !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
var userData = {
Username : username,
Pool : userPool
};
cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.resendConfirmationCode(function(err, result) {
if (err) {
console.log(err);
$("#message").text(err);
$("#message").addClass("alert-danger");
$("#message").show();
} else {
$("#message").text("Send Activation Key.");
$("#message").addClass("alert-success");
$("#message").show();
}
});
});
$("#forget_password_btn").click(function() {
username = $("#inputUsername").val();
if(!username) {
$("#message").text("Input UserID or Email !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
var userData = {
Username : username,
Pool : userPool
};
cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.forgotPassword({
onSuccess: function (result) {
console.log("call result: " + result);
},
onFailure: function(err) {
alert(err);
},
inputVerificationCode() {
var verificationCode = prompt("Please input verification code ", "");
var newPassword = prompt("Enter new password ", "");
cognitoUser.confirmPassword(verificationCode, newPassword, this);
}
});
});
</script>
</body>
</html>
2. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Activate」ボタンを押下
3. アクティベーションが完了する。
６．JavaScript からのサインインとユーザー情報の取得
- 以下の html ファイルを、「3．S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
- 34,36 行目の [Amazon S3 Bucket Name]
- 43,87 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
- 46,89 行目の [Amazon Cognito User Pool の Pool Id]
- 47 行目の [Amazon Cognito User Pool の App Client Id]
signin.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Sign In</title>
<!-- AWS SDK //-->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
<!-- Amazon Cognito //-->
<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>
<!-- jquery //-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></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-signup-heading">Sign In</h2>
<div id="message" class="alert" style="display:none;"></div>
<label id="labelUsername">UserID or Email</label><br>
<input type="text" id="inputUsername" class="form-control" placeholder="UserID or Email" required autofocus></input>
<label id="labelPassword">Password</label><br>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
<p></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_in_btn" value="Sign In"></input>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/signup.html" target="_blank">SignUp</a>
<p></p>
<a href="http://[Amazon S3 Bucket Name].s3-website-ap-northeast-1.amazonaws.com/activation.html" target="_blank">Activation & Forget Password</a>
</form>
</div>
<script>
// Initialize the Amazon Cognito credentials provider
AWSCognito.config.region = "ap-northeast-1";
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]"
});
var poolData = {
UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
ClientId: "[Amazon Cognito User Pool の App Client Id]"
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var attributeList = [];
var cognitoUser;
$("#sign_in_btn").click(function() {
username = $("#inputUsername").val();
password = $("#inputPassword").val();
if(!username) {
$("#message").text("Input UserID or Email !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!password) {
$("#message").text("Input Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
//event.preventDefault();
var authenticationData = {
Username : username,
Password : password
};
var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
var userData = {
Username : username,
Pool : userPool
};
cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
console.log(cognitoUser);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log("Id Token + " + result.getIdToken().getJwtToken());
console.log("Access Token + " + result.getAccessToken().getJwtToken());
console.log("Refresh Token + " + result.refreshToken.token);
AWS.config.region = "ap-northeast-1";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id]",
Logins: {
"cognito-idp.ap-northeast-1.amazonaws.com/[Amazon Cognito User Pool の Pool Id]" : result.getIdToken().getJwtToken()
}
});
AWS.config.credentials.get(function(err) {
if (!err) {
console.log("accessKeyId + " + AWS.config.credentials.accessKeyId);
console.log("secretAccessKey + " + AWS.config.credentials.secretAccessKey);
console.log("sessionToken + " + AWS.config.credentials.sessionToken);
}else{
log("Error : " + err);
}
});
var url = "mypage.html";
$("form").fadeOut(700, function(){
$(location).attr("href", url);
});
$(".wrapper").addClass("form-success");
},
onFailure: function(err) {
alert(err);
},
//mfaRequired: function(codeDeliveryDetails) {
// var verificationCode = prompt('Please input verification code' ,'');
// cognitoUser.sendMFACode(verificationCode, this);
//}
});
});
</script>
</body>
</html>
2. 以下の html ファイルを、「3．S3 に静的ウェブサイトを構築する。」で構築した S3 上に格納する。その際、以下の修正を忘れないこと。
* 54,197 行目の [Amazon Cognito Identity Pool の Identity Pool Id]
* 57,199 行目の [Amazon Cognito User Pool の Pool Id]
* 58 行目の [Amazon Cognito User Pool の App Client Id]
mypage.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>My Page</title>
<!-- AWS SDK //-->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.23.0.min.js"></script>
<!-- Amazon Cognito //-->
<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.min.js"></script>
<script src="js/amazon-cognito-identity.min.js"></script>
<!-- jquery //-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- IE //-->
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></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 onLoad="loadHello()" onUnload="unloadBye()">
<div class="container">
<form class="form-mypage" name="form1">
<h2 class="form-mypage-heading">My Page</h2>
<div id="message" class="alert" style="display:none;"></div>
<label id="labelUsername">UserID : </label><br>
<input type="hidden" id="inputUsername" class="form-control" placeholder="UserID" required autofocus></input>
<label id="labelEmail">Email : </label><br>
<input type="hidden" id="inputEmail" class="form-control" placeholder="Email" required autofocus></input>
<input type="text" id="inputNewEmail" class="form-control" placeholder="New Email" required autofocus></input>
<p></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="update_btn" value="Update"></input>
<p><br/></p>
<label id="labelPassword">Old Password</label><br>
<input type="password" id="inputPassword" class="form-control" placeholder="Old Password" required></input>
<label id="labelNewPassword">New Password</label><br>
<input type="password" id="inputNewPassword" class="form-control" placeholder="New Password" required></input>
<label id="labelRetypeNewPassword">Retype New Password</label><br>
<input type="password" id="inputRetypeNewPassword" class="form-control" placeholder="Retype New Password" required></input>
<p></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="change_password_btn" value="Change Password"></input>
<p><br/></p>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="sign_out_btn" value="Sign Out"></input>
</form>
</div>
<script>
// Amazon Cognito
AWSCognito.config.region = "ap-northeast-1";
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id ]"
});
var data = {
UserPoolId: "[Amazon Cognito User Pool の Pool Id]",
ClientId: "[Amazon Cognito User Pool の App Client Id]"
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var attributeList = [];
var cognitoUser;
$("#update_btn").click(function() {
email = $("#inputEmail").val();
newemail = $("#inputNewEmail").val();
if(!newemail) {
$("#message").text("Input New Email !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
var attributeList = [];
var attribute = {
Name : "email",
Value : newemail
};
var attribute = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(attribute);
attributeList.push(attribute);
cognitoUser = userPool.getCurrentUser();
console.log("cognitoUser : ");
console.log(cognitoUser);
if (cognitoUser != null) {
cognitoUser.getSession(function(err, result) {
if (result) {
cognitoUser.updateAttributes(attributeList, function(err, result) {
if (err) {
console.log(err);
console.log(result);
$("#message").text(err);
$("#message").addClass("alert-danger");
$("#message").show();
} else {
$("#message").text("Update.");
$("#message").addClass("alert-success");
$("#message").show();
}
});
} else {
var url = "signin.html";
$(location).attr("href", url);
}
});
} else {
var url = "signin.html";
$(location).attr("href", url);
}
});
$("#change_password_btn").click(function() {
password = $("#inputPassword").val();
newpassword = $("#inputNewPassword").val();
retypenewpassword = $("#inputRetypeNewPassword").val();
if(!password) {
$("#message").text("Input Old Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!newpassword) {
$("#message").text("Input New Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(!retypenewpassword) {
$("#message").text("Input Retype New Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
if(newpassword != retypenewpassword) {
$("#message").text("Wrong Retype New Password !!");
$("#message").addClass("alert-danger");
$("#message").show();
return false;
}
cognitoUser = userPool.getCurrentUser();
console.log("cognitoUser : ");
console.log(cognitoUser);
if (cognitoUser != null) {
cognitoUser.getSession(function(err, result) {
if (result) {
cognitoUser.changePassword(password, newpassword, function(err, result) {
if (err) {
console.log(err);
console.log(result);
$("#message").text(err);
$("#message").addClass("alert-danger");
$("#message").show();
} else {
$("#message").text("Change Password.");
$("#message").addClass("alert-success");
$("#message").show();
}
});
} else {
var url = "signin.html";
$(location).attr("href", url);
}
});
} else {
var url = "signin.html";
$(location).attr("href", url);
}
});
$("#sign_out_btn").click(function() {
cognitoUser = userPool.getCurrentUser();
console.log("cognitoUser : ");
console.log(cognitoUser);
if (cognitoUser != null) {
console.log(cognitoUser);
cognitoUser.signOut();
}
var url = "signin.html";
$(location).attr("href", url);
});
function loadHello() {
console.log("userPool : ");
console.log(userPool);
cognitoUser = userPool.getCurrentUser();
console.log("cognitoUser : ");
console.log(cognitoUser);
if (cognitoUser != null) {
console.log("cognitoUser is not null.");
cognitoUser.getSession(function(err, result) {
if (result) {
console.log("Id Token + " + result.getIdToken().getJwtToken());
console.log("Access Token + " + result.getAccessToken().getJwtToken());
console.log("Refresh Token + " + result.refreshToken.token);
console.log(result);
// Common
AWS.config.region = "ap-northeast-1";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "[Amazon Cognito Identity Pool の Identity Pool Id ]",
Logins: {
"cognito-idp.ap-northeast-1.amazonaws.com/[Amazon Cognito User Pool の Pool Id]" : result.getIdToken().getJwtToken()
}
});
//
AWS.config.credentials.get(function(err) {
if (!err) {
console.log("accessKeyId + " + AWS.config.credentials.accessKeyId);
console.log("secretAccessKey + " + AWS.config.credentials.secretAccessKey);
console.log("sessionToken + " + AWS.config.credentials.sessionToken);
}else{
log("Error : " + err);
}
});
cognitoUser.getUserAttributes(function(err, attrresult) {
if (err) {
alert(err);
return;
}
console.log(attrresult);
console.log(cognitoUser);
console.log(cognitoUser.username);
$("#labelUsername").html("UserID : " + cognitoUser.username);
document.getElementById("inputUsername").value = cognitoUser.username;
for (i = 0; i < attrresult.length; i++) {
if (attrresult[i].getName()=="email") {
$("#labelEmail").html("Email : " + attrresult[i].getValue());
document.getElementById("inputEmail").value = attrresult[i].getValue();
}
}
console.log(AWSCognito.config);
console.log(AWSCognito.config.credentials);
console.log("Cognito Identity Id: " + AWSCognito.config.credentials.identityId);
});
} else {
console.log("cognitoUser.getSession - Error.");
//var url = "signin.html";
//$(location).attr("href", url);
}
});
} else {
console.log("cognitoUser is null.");
//var url = "signin.html";
//$(location).attr("href", url);
}
}
function unloadBye() {
console.log(AWS.config);
//alert("Bye!");
}
</script>
</body>
</html>
3. サイトへアクセスすると、以下の画面が表示されるので、適当な値を入力し、「Sign In」ボタンを押下
4. マイページが表示される。
９９．ハマりポイント
- サインアップやアクティベートはすんなり行きましたが、サインインとユーザー情報の取得のところで躓きました。
AWS.config.region = "ap-northeast-1";この１行が無い所為で、全然認証が通らず。かなり困りました…。
ＸＸ．まとめ
色々なサイトを参考にさせてもらって、一通り確認することが出来ました。
本当は、参考元を記載しなければいけないところではあるんですが、
すいません、忘れてしまいました…。
次は、iOSから認証を確認しようかと思います。