amazon-cognito-auth-js
Version:
Amazon Cognito Auth JavaScript SDK
227 lines (208 loc) • 8.55 kB
HTML
<!--
Amazon Cognito Auth SDK for JavaScript
Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
A copy of the License is located at
http://aws.amazon.com/apache2.0/
or in the "license" file accompanying this file.
This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions
and limitations under the License.
-->
<html lang="en-US">
<head>
<title>Cognito Auth JS SDK Sample</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/styleSheetStart.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/amazon-cognito-auth.min.js"></script>
<!-- To enable the advanced security feature -->
<!-- <script src="https://amazon-cognito-assets.<region>.amazoncognito.com/amazon-cognito-advanced-security-data.min.js"></script> -->
<!-- E.g. -->
<!-- <script src="https://amazon-cognito-assets.us-east-1.amazoncognito.com/amazon-cognito-advanced-security-data.min.js"></script> -->
</head>
<body onload="onLoad()">
<ul>
<li><a href="https://aws.amazon.com/cognito/" target="_blank"
title="Go to AWS Cognito Console">Cognito Console</a></li>
<li><a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html"
target="_blank" title="See Cognito developer docs">Docs</a></li>
</ul>
<h1>
<a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html" target="_blank">
<img src="img/MobileServices_AmazonCognito.png" alt="Amazon Cognito" title="Amazon Cognito"
style="width:144px;height:144px;"></a><br>
Amazon Cognito Auth Demo
</h1>
<div class="centeredText">
<p id="introPara" title="About this demo">
This sample web page demonstrates how to use the Amazon Cognito Auth SDK for JavaScript.
This SDK simplifies adding sign-up, sign-in functionality in your apps.
With this SDK, you can use Cognito User Pools’ app integration and federation features,
with a customizable UI hosted by AWS to sign up and sign in users, and with built-in federation
for external identity providers via SAML.
To learn more
see our <a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html">Developer Guide</a>.<br>
<br>
This sample will initialize a CognitoAuth object and initiate the sign up / sign in flow.
You will need to substitute your own Cognito User Pool configuration values to make it work.
Look at the source for this page and read the comments to learn more.
You can also view the README.md of this sample page and the README.md of the Cognito Auth JavaScript SDK.
</p>
</div>
<div><br></div>
<div>
<p id="statusNotAuth" title="Status">
Sign-In to Continue
</p>
<p id="statusAuth" title="Status">
You have Signed-In
</p>
</div>
<div class="tabsWell">
<div id="startButtons">
<div class="button">
<a class="nav-tabs" id="signInButton" href="javascript:void(0)" title="Sign in">Sign In</a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="userdetails">
<p class="text-icon" title="Minimize" id="tabIcon" onclick="toggleTab('usertab');">_</p>
<br>
<h2 id="usertabtitle">Tokens</h2>
<div class="user-form" id="usertab">
<pre id="idtoken"> ... </pre>
<pre id="acctoken"> ... </pre>
<pre id="reftoken"> ... </pre>
</div>
</div>
</div>
</div>
<script>
// Operations when the web page is loaded.
function onLoad() {
var i, items, tabs;
items = document.getElementsByClassName("tab-pane");
for (i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
// Initiatlize CognitoAuth object
var auth = initCognitoSDK();
document.getElementById("signInButton").addEventListener("click", function() {
userButton(auth);
});
var curUrl = window.location.href;
auth.parseCognitoWebResponse(curUrl);
}
// Operation when tab is closed.
function closeTab(tabName) {
document.getElementById(tabName).style.display = 'none';
}
// Operation when tab is opened.
function openTab(tabName) {
document.getElementById(tabName).style.display = 'block';
}
// Operations about toggle tab.
function toggleTab(tabName) {
if (document.getElementById("usertab").style.display == 'none') {
document.getElementById("usertab").style.display = 'block';
document.getElementById("tabIcon").innerHTML = '_';
} else {
document.getElementById("usertab").style.display = 'none';
document.getElementById("tabIcon").innerHTML = '+';
}
}
// Operations when showing message.
function showMessage(msgTitle, msgText, msgDetail) {
var msgTab = document.getElementById('message');
document.getElementById('messageTitle').innerHTML = msgTitle;
document.getElementById('messageText').innerHTML = msgText;
document.getElementById('messageDetail').innerHTML = msgDetail;
msgTab.style.display = "block";
}
// Perform user operations.
function userButton(auth) {
var state = document.getElementById('signInButton').innerHTML;
if (state === "Sign Out") {
document.getElementById("signInButton").innerHTML = "Sign In";
auth.signOut();
showSignedOut();
} else {
auth.getSession();
}
}
// Operations when signed in.
function showSignedIn(session) {
document.getElementById("statusNotAuth").style.display = 'none';
document.getElementById("statusAuth").style.display = 'block';
document.getElementById("signInButton").innerHTML = "Sign Out";
if (session) {
var idToken = session.getIdToken().getJwtToken();
if (idToken) {
var payload = idToken.split('.')[1];
var tokenobj = JSON.parse(atob(payload));
var formatted = JSON.stringify(tokenobj, undefined, 2);
document.getElementById('idtoken').innerHTML = formatted;
}
var accToken = session.getAccessToken().getJwtToken();
if (accToken) {
var payload = accToken.split('.')[1];
var tokenobj = JSON.parse(atob(payload));
var formatted = JSON.stringify(tokenobj, undefined, 2);
document.getElementById('acctoken').innerHTML = formatted;
}
var refToken = session.getRefreshToken().getToken();
if (refToken) {
document.getElementById('reftoken').innerHTML = refToken.substring(1, 20);
}
}
openTab("userdetails");
}
// Operations when signed out.
function showSignedOut() {
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
document.getElementById('idtoken').innerHTML = " ... ";
document.getElementById('acctoken').innerHTML = " ... ";
document.getElementById('reftoken').innerHTML = " ... ";
closeTab("userdetails");
}
// Initialize a cognito auth object.
function initCognitoSDK() {
var authData = {
ClientId : '<TODO: your app client ID here>', // Your client id here
AppWebDomain : '<TODO: your app web domain here>', // Exclude the "https://" part.
TokenScopesArray : <TODO: your scope array here>, // like ['openid','email','phone']...
RedirectUriSignIn : '<TODO: your redirect url when signed in here>',
RedirectUriSignOut : '<TODO: your redirect url when signed out here>',
IdentityProvider : '<TODO: your identity provider you want to specify here>',
UserPoolId : '<TODO: your user pool id here>',
AdvancedSecurityDataCollectionFlag : <TODO: boolean value indicating whether you want to enable advanced security data collection>
};
var auth = new AmazonCognitoIdentity.CognitoAuth(authData);
// You can also set state parameter
// auth.setState(<state parameter>);
auth.userhandler = {
onSuccess: <TODO: your onSuccess callback here>,
onFailure: <TODO: your onFailure callback here>
/** E.g.
onSuccess: function(result) {
alert("Sign in success");
showSignedIn(result);
},
onFailure: function(err) {
alert("Error!" + err);
}*/
};
// The default response_type is "token", uncomment the next line will make it be "code".
// auth.useCodeGrantFlow();
return auth;
}
</script>
</body>
</html>