Last active
June 7, 2017 02:22
-
-
Save jobbin/451c05587f5e73151ab434d7edcc582a to your computer and use it in GitHub Desktop.
[ Serverless ] Cognito、S3、Lambdaで認証機能付きのWebサイトを作ってみました ref: http://qiita.com/jobbin/items/d2fc0f714eb1f1cfc965
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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