Skip to content

Instantly share code, notes, and snippets.

@jobbin

jobbin/signup.html

Last active June 7, 2017 02:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jobbin/451c05587f5e73151ab434d7edcc582a to your computer and use it in GitHub Desktop.
Save jobbin/451c05587f5e73151ab434d7edcc582a to your computer and use it in GitHub Desktop.
Download ZIP
[ Serverless ] Cognito、S3、Lambdaで認証機能付きのWebサイトを作ってみました ref: http://qiita.com/jobbin/items/d2fc0f714eb1f1cfc965
Raw
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.3.8.min.js"></script>
<!-- aws cognito sdk(beta)と必要なライブラリ //-->
<script src="***/jsbn.js"></script>
<script src="***/jsbn2.js"></script>
<script src="***/sjcl.js"></script>
<script src="***/moment.js"></script>
<script src="***/aws-cognito-sdk.min.js"></script>
<script src="***/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>
</head>
<body>
<div id="form">
<form>
<h2>ユーザ登録</h2>
<label>E-mail</label>
<input type="text" id="email"></input>
<label>パスワード</label>
<input type="password" id="password"></input>
<input type="button" id="signup" value="Sign Up"></input>
</form>
</div>
<div style="display: none" id="verification">
<form>
<label>認証コード</label>
<input type="text" id="verification-code"></input>
<input type="hidden" id="username"></input>
<input type="button" id="submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
var poolData = {
UserPoolId : 'us-east-1_*****',
ClientId : '5ckd9*********iteojtg'
};
jQuery(document).ready(function($){
AWS.config.region = 'us-east-1'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:a999fc0e-b*************5d4fb6ffa'
});
// Cognito User Pool Id
AWSCognito.config.region = 'us-east-1';
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:a999fc0e-b*************5d4fb6ffa'
});
//ユーザ登録時,signupボタンが押される時のfunction
$('#signup').click(function() {
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = {
Name : 'email',
Value : $('#email').val()
};
var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
attributeList.push(attributeEmail);
userPool.signUp($('#email').val(), $('#password').val(), attributeList, null, function(err, result){
if (err) {
alert(err);
console.log(err);
return;
}
else{
var cognitoUser = result.user;
$("#verification").show();
$("#username").val(cognitoUser.getUsername());
console.log('user name is ' + cognitoUser.getUsername());
console.log('call result: ' + result);
}
});
});
//ユーザ認証時、submitボタンが押される時のfunction
$('#submit').click(function() {
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var userData = {
Username : $('#username').val(),
Pool : userPool
};
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.confirmRegistration($('#verification-code').val(), true, function(err, result) {
if (err) {
alert(err);
return;
}
console.log('call result: ' + result);
});
});
});
</script>
</body>
</html>
Raw
webform.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>申請フォーム</title>
<!-- aws sdk //-->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.8.min.js"></script>
<!-- aws cognito sdk(beta)と必要なライブラリ //-->
<script src="***/jsbn.js"></script>
<script src="***/jsbn2.js"></script>
<script src="***/sjcl.js"></script>
<script src="***/moment.js"></script>
<script src="***/aws-cognito-sdk.min.js"></script>
<script src="***/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>
</head>
<body>
<div id="form">
<form>
<h2>ログイン</h2>
<label>E-mail</label>
<input type="text" id="email"></input>
<label>パスワード</label>
<input type="password" id="password"></input>
<input type="button" id="login" value="ログイン"></input>
</form>
</div>
<div style="display: none">
<form>
<h2>申請フォーム</h2>
<div>
<label>E-mail</label>
<input id="master-account" readonly></input>
</div>
<div>
<label>Access Key</label>
<input id="accessKey"></textarea>
</div>
<div>
<label>Q1:</label>
<input type="text" name="q1" id="q1">
</div>
<div>
<label>Q2:</label>
<input type="text" name="q2" id="q2">
</div>
<br/>
<input type="button" id="submit" value="Submint"></input>
</form>
</div>
<script type="text/javascript">
// Region
AWS.config.region = 'us-east-1';
AWSCognito.config.region = 'us-east-1';
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:a999fc0e-ba*************5d4fb6ffa'
});
jQuery(document).ready(function($){
$('#login').click(function() {
var authenticationData = {
Username : $('#email').val(),
Password : $('#password').val()
};
var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId : 'us-east-1_ly******MIS',
ClientId : '5ckd9el*************teojtg'
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var userData = {
Username : $('#email').val(),
Pool : userPool
};
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
$("div").show();
$('#form').hide();
console.log('access token + ' + result.getIdToken().getJwtToken());
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:a999fc0e-ba*************b6ffa',
Logins: {
'cognito-idp.us-east-1.amazonaws.com/us-east-1_lyc*****IS': result.getIdToken().getJwtToken()
}
});
AWS.config.credentials.get(function (err) {
if(err)
{
console.log('error in autheticatig AWS'+err);
}
else
{
// Using authenticated credentials
$('#accessKey').val(AWS.config.credentials.accessKeyId);
$('#master-account').val($('#email').val());
}
});
},
onFailure: function(err) {
alert(err);
},
});
});
$('#submit').click(function (){
AWS.config.update({
accessKeyId: $('#accessKey').val()
});
var s3BucketName = "qiu-webform";
var now = new Date();
var obj = {"q1":$('#q1').val(), "q2":$('#q2').val()};
var s3 = new AWS.S3({params: {Bucket: s3BucketName}});
var blob = new Blob([JSON.stringify(obj, null, 2)], {type:'text/plain'});
s3.putObject(
{
Key: "uploads/" + now.getTime() +".txt",
ContentType: "text/plain",
Body: blob
},
function(err, data){
if(data !== null){
alert("申請しました!");
}
else{
alert("エラー: " + err.message);
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment