sample/index.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.
-->

<!DOCTYPE html>
<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>