Skip to content

Instantly share code, notes, and snippets.

@SumindaD

SumindaD/index.html

Last active July 10, 2019 16:04
Show Gist options
  • Save SumindaD/1cd5c1a7189461725212b819c34aff77 to your computer and use it in GitHub Desktop.
Save SumindaD/1cd5c1a7189461725212b819c34aff77 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>MSN AWS App</title>
</head>
<body>
<script src="./script/jquery.min.js"></script>
<script src="./script/aws-sdk-2.487.0.min.js"></script>
<script src="./script/aws-cognito-sdk.min.js"></script>
<script src="./script/amazon-cognito-identity.min.js"></script>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<input id="emailInput" type="text" placeholder="Email" style="display:none"/></br>
<input id="userNameInput" type="text" placeholder="Username"/></br>
<input id="passwordInput" type="password" placeholder="Password"/></br>
<input id="confirmPasswordInput" type="password" placeholder="Confirm Password" style="display:none"/></br>
<input id="verificationCodeInput" type="text" placeholder="Verification Code" style="display:none"/></br>
<input id="bucketNameInput" type="text" placeholder="S3 Bucket Name" style="display:none"/></br>
<input id="logInButton" type="Button" value="Log In" onclick="logIn()">
<input id="registerButton" type="button" value="Register" onclick="register()">
<input id="logOutButton" type="Button" value="Log Out" onclick="logOut()" style="display:none">
<input id="verifyCodeButton" type="button" value="Verify" onclick="verifyCode()" style="display:none">
<input id="listS3ObjectsButton" type="button" value="List S3 Objects" onclick="listS3Objects()" style="display:none"></br></br>
<input id="clearLogsButton" type="button" value="Clear Logs" onclick="clearLogs()">
</br></br>
<div id="loader" class="loader" style="display:none"></div>
</br></br>
<div id="log" style="width: 500px; height: 300px; overflow-y: scroll;"></div>
<script>
//=============== AWS IDs ===============
var userPoolId = '<User Pool ID>';
var clientId = '<App Client ID>';
var region = '<Region>';
var identityPoolId = '<Identity Pool ID>';
//=============== AWS IDs ===============
var cognitoUser;
var idToken;
var userPool;
var poolData = {
UserPoolId : userPoolId,
ClientId : clientId
};
getCurrentLoggedInSession();
function switchToVerificationCodeView(){
$("#emailInput").hide();
$("#userNameInput").hide();
$("#passwordInput").hide();
$("#confirmPasswordInput").hide();
$("#logInButton").hide();
$("#registerButton").hide();
$("#bucketNameInput").hide();
$("#verificationCodeInput").show();
$("#verifyCodeButton").show();
$("#listS3ObjectsButton").hide();
$("#logOutButton").hide();
}
function switchToRegisterView(){
$("#emailInput").show();
$("#userNameInput").show();
$("#passwordInput").show();
$("#confirmPasswordInput").show();
$("#logInButton").hide();
$("#registerButton").show();
$("#verificationCodeInput").hide();
$("#verifyCodeButton").hide();
$("#listS3ObjectsButton").hide();
$("#bucketNameInput").hide();
$("#logOutButton").hide();
}
function switchToLogInView(){
$("#userNameInput").val('');
$("#passwordInput").val('');
$("#emailInput").hide();
$("#userNameInput").show();
$("#passwordInput").show();
$("#confirmPasswordInput").hide();
$("#logInButton").show();
$("#registerButton").show();
$("#verificationCodeInput").hide();
$("#verifyCodeButton").hide();
$("#listS3ObjectsButton").hide();
$("#bucketNameInput").hide();
$("#logOutButton").hide();
}
function switchToLoggedInView(){
$("#emailInput").hide();
$("#userNameInput").hide();
$("#passwordInput").hide();
$("#confirmPasswordInput").hide();
$("#logInButton").hide();
$("#registerButton").hide();
$("#verificationCodeInput").hide();
$("#verifyCodeButton").hide();
$("#listS3ObjectsButton").show();
$("#bucketNameInput").show();
$("#logOutButton").show();
}
function clearLogs(){
$('#log').empty();
}
/*
Starting point for user logout flow
*/
function logOut(){
if (cognitoUser != null) {
$("#loader").show();
cognitoUser.signOut();
switchToLogInView();
logMessage('Logged out!');
$("#loader").hide();
}
}
/*
Starting point for user login flow with input validation
*/
function logIn(){
if(!$('#userNameInput').val() || !$('#passwordInput').val()){
logMessage('Please enter Username and Password!');
}else{
var authenticationData = {
Username : $('#userNameInput').val(),
Password : $("#passwordInput").val(),
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var userData = {
Username : $('#userNameInput').val(),
Pool : userPool
};
cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
$("#loader").show();
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
logMessage('Logged in!');
switchToLoggedInView();
idToken = result.getIdToken().getJwtToken();
getCognitoIdentityCredentials();
},
onFailure: function(err) {
logMessage(err.message);
$("#loader").hide();
},
});
}
}
/*
Starting point for user registration flow with input validation
*/
function register(){
switchToRegisterView();
if( !$('#emailInput').val() || !$('#userNameInput').val() || !$('#passwordInput').val() || !$('#confirmPasswordInput').val() ) {
logMessage('Please fill all the fields!');
}else{
if($('#passwordInput').val() == $('#confirmPasswordInput').val()){
registerUser($('#emailInput').val(), $('#userNameInput').val(), $('#passwordInput').val());
}else{
logMessage('Confirm password failed!');
}
}
}
/*
Starting point for user verification using AWS Cognito with input validation
*/
function verifyCode(){
if( !$('#verificationCodeInput').val() ) {
logMessage('Please enter verification field!');
}else{
$("#loader").show();
cognitoUser.confirmRegistration($('#verificationCodeInput').val(), true, function(err, result) {
if (err) {
logMessage(err.message);
}else{
logMessage('Successfully verified code!');
switchToLogInView();
}
$("#loader").hide();
});
}
}
/*
User registration using AWS Cognito
*/
function registerUser(email, username, password){
var attributeList = [];
var dataEmail = {
Name : 'email',
Value : email
};
var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
attributeList.push(attributeEmail);
$("#loader").show();
userPool.signUp(username, password, attributeList, null, function(err, result){
if (err) {
logMessage(err.message);
}else{
cognitoUser = result.user;
logMessage('Registration Successful!');
logMessage('Username is: ' + cognitoUser.getUsername());
logMessage('Please enter the verification code sent to your Email.');
switchToVerificationCodeView();
}
$("#loader").hide();
});
}
/*
Starting point for AWS List S3 Objects flow with input validation
*/
function listS3Objects(){
if(!$('#bucketNameInput').val()){
logMessage('Please enter the name of the S3 Bucket!');
}else{
$("#loader").show();
getAWSS3BucketObjects();
}
}
/*
This method will get temporary credentials for AWS using the IdentityPoolId and the Id Token recieved from AWS Cognito authentication provider.
*/
function getCognitoIdentityCredentials(){
AWS.config.region = region;
var loginMap = {};
loginMap['cognito-idp.' + region + '.amazonaws.com/' + userPoolId] = idToken;
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: identityPoolId,
Logins: loginMap
});
AWS.config.credentials.clearCachedId();
AWS.config.credentials.get(function(err) {
if (err){
logMessage(err.message);
}
else {
logMessage('AWS Access Key: '+ AWS.config.credentials.accessKeyId);
logMessage('AWS Secret Key: '+ AWS.config.credentials.secretAccessKey);
logMessage('AWS Session Token: '+ AWS.config.credentials.sessionToken);
}
$("#loader").hide();
});
}
/*
This method will use AWS S3 SDK to get a list of S3 bucket object.
Before using this method, AWS Credentials must be set in AWS config.
*/
function getAWSS3BucketObjects(){
var s3 = new AWS.S3();
var params = {
Bucket: $("#bucketNameInput").val()
};
s3.listObjects(params, function(err, data) {
if (err) logMessage(err.message);
else{
logMessage('');
logMessage('====== S3 Bucket Objects ======');
data.Contents.forEach(element => {
logMessage(element.Key);
});
logMessage('');
}
$("#loader").hide();
});
}
/*
If user has logged in before, get the previous session so user doesn't need to log in again.
*/
function getCurrentLoggedInSession(){
$("#loader").show();
userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
cognitoUser = userPool.getCurrentUser();
if(cognitoUser != null){
cognitoUser.getSession(function(err, session) {
if (err) {
logMessage(err.message);
}else{
logMessage('Session found! Logged in.');
switchToLoggedInView();
idToken = session.getIdToken().getJwtToken();
getCognitoIdentityCredentials();
}
$("#loader").hide();
});
}else{
logMessage('Session expired. Please log in again.');
$("#loader").hide();
}
}
/*
This is a logging method that will be used throught the application
*/
function logMessage(message){
$('#log').append(message + '</br>');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment