This tutorial will explain how to create a serverless and backendless javascript frontend application using DynamoDB and Cognito.
User ► HTML/JS ► Cognito / DynamoDB
Reference of my previous video for more information on AWS using a backend service and API gateway and hosting static HTML files:
• AWS: Serverless web ap...
My first video where I explain how to configure AWS:
• AWS: Creating a Step F...
AWS Javascript API files:
github.com/amazon-archives/am...
github.com/amazon-archives/am...
Javascript Examples for DynamoDB:
docs.aws.amazon.com/amazondyn...
-----
Javascript:
var idToken = null;
function checkLogin() {
var url_string = window.location.href;
var url = new URL(url_string);
idToken = url.searchParams.get("id_token");
if (idToken != null) {
document.getElementById("welcomeMsg").innerHTML = "signed in";
auth();
}
}
function auth() {
AWS.config.update({
region: "us-east-2",
// endpoint: 'localhost:8000', // If you use dynamoDB installed locally
// accessKeyId: "(ACCESS_KEY_ID)",
// secretAccessKey: "(SECRET_ACCESS_KEY)"
});
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId : '(IDENTITY POOL ID)',
Logins : {
"cognito-idp.(AWS_REGION).amazonaws.com/(POOL_ID)": idToken
}
});
}
function insertItem() {
var docClient = new AWS.DynamoDB.DocumentClient();
var params = {
TableName :"Person",
Item:{
"FirstName": "John", // Partition Key
"LastName": "Smith", // Sort Key
"info": {
"FavoriteColor": "blue",
"YearOfBirth": 1942
}
}
};
docClient.put(params, function(err, data) {
if (err) {
document.getElementById('textarea').innerHTML = "Unable to add item: " + "
" + JSON.stringify(err, undefined, 2);
} else {
document.getElementById('textarea').innerHTML = "PutItem succeeded: " + "
" + JSON.stringify(data, undefined, 2);
}
});
}
function readItem() {
var docClient = new AWS.DynamoDB.DocumentClient();
var params = {
TableName: "Person",
Key:{
"FirstName": "John",// Partition Key
"LastName": "Smith" // Sort/Range Key
}
};
docClient.get(params, function(err, data) {
if (err) {
document.getElementById('textarea').innerHTML = "Unable to read item: " + "
" + JSON.stringify(err, undefined, 2);
} else {
document.getElementById('textarea').innerHTML = "GetItem succeeded: " + "
" + JSON.stringify(data, undefined, 2);
}
});
}
-----
Javascript if you want to login internally inside your page.
Recommended video for that: • Video
function signInButton() {
var authenticationData = {
Username : document.getElementById("inputUsername").value,
Password : document.getElementById("inputPassword").value,
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId : "(POOL_ID)", // Your user pool id here
ClientId : "(APP_CLIENT_ID)", // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : document.getElementById("inputUsername").value,
Pool : userPool,
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log(JSON.stringify(result));
// var accessToken = result.getAccessToken().getJwtToken();
// console.log(accessToken);
},
onFailure: function(err) {
alert(err.message || JSON.stringify(err));
},
});
}
-- Contents of this video --
0:00​​ Intro
1:52​​ Configure Cognito
7:40 Create DynamoDB table
8:20 Create IAM role and permission
10:52​​ More Cognito configuration
16:02 Javascript and HTML code
22:41​​ Tests and final comments