We will use CodePen to execute the JavaScript SDK code for Cognito operations, following these steps:
- Open CodePen and add locations to the required files.
- Go to https://codepen.io/.
- Click the Create tab and then select the Pen option.
- In the new window, click the Settings menu, select the Behaviour tab, and uncheck the Enabled option under Auto-Updating Preview.
- In the Settings menu, select the JavaScript tab and do the following:
- Search for aws sdk and select the appropriate SDK:
CodePen will populate the SDK URL (as we will see in the next screenshot).
- Add the URL of our amazon-cognito-identity.min.js file (for example, https://s3.amazonaws.com/cognito-min-bucket/amazon-cognito-identity.min.js):
- Click Close. We can now run JavaScript code from within the Cognito JS tab, as we did in the previous recipe:
- We can sign up/register the user with the following code:
var poolData = {
UserPoolId: '<user pool id>',
ClientId: '<client id>'
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var attributeList: CognitoUserAttribute[] = [];
var emailAttribute = {
Name : 'email',
Value : '<user email>'
};
attributeList.push(new AmazonCognitoIdentity.CognitoUserAttribute(emailAttribute));
userPool.signUp('heartin', 'Passw0rd$1', attributeList, null, function(err, result){
if (err) {
console.log(JSON.stringify(err));
alert(err.message || JSON.stringify(err));
return;
}
var cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
});
- Update the code with correct userpool ID, client ID, username, and password, and click Run.
We can view the log messages in the developer console as follows:
- Confirm the registered user by using the code received in the email provided during registration:
var poolData = {
UserPoolId: '<user pool id>',
ClientId: '<client id>'
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : 'heartin',
Pool : userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.confirmRegistration('698099', true, function(err, result) {
if (err) {
alert(err.message || JSON.stringify(err));
return;
}
console.log('call result: ' + result);
});
Replace 698099 with the code you received. Run the script from CodePen and we should receive a response similar to this in the developer logs:
- Sign in to the application using the registered email ID and password:
var authenticationData = {
Username : 'heartin',
Password : 'Passw0rd$1',
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId: '<user pool id>',
ClientId: '<client id>'
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : 'heartin',
Pool : userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken();
console.log('access token is:' + accessToken);
},
onFailure: function(err) {
console.log(JSON.stringify(err));
alert(err.message || JSON.stringify(err));
},
});
If successful, we should receive the access token in the response and we can verify it from the browser developer console:
We can now use this access token for further operations.