nicosabena/embedded-lock-test.html

## embedded-lock-test.html
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <TITLE>
        Hello World
    </TITLE>
    <style>
        .auth0-lock.auth0-lock .auth0-lock-header-bg {
            display: none !important;
        }

        .auth0-lock.auth0-lock .auth0-lock-header-logo {
            height: 100px;
            display: inline-block;
            margin: 0 0 10px;
            vertical-align: middle;
        }

        .auth0-lock.auth0-lock .auth0-lock-header {
            height: auto !important;
        }

        .auth0-lock.auth0-lock-opened-in-frame {
            box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
            border-radius: 5px;
        }
    </style>
</HEAD>
<BODY>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <div class="container-fluid">
        <H1>A very simple single page application</H1>
        <div role="group">
          <button class="btn btn-primary" onclick="signin()">Login (embedded)</button>
          <button class="btn btn-primary" onclick="checkSession()">checkSession</button>
        </div>
        <fieldset>
          <legend>With /authorized (Auth0 hosted)</legend>
          <button class="btn btn-default" onclick="login_authorize()">Login with /authorize</button>
          <button class="btn btn-default" onclick="login_authorize_popup()">Login with /authorize popup</button>
          <button class="btn btn-default" onclick="logout()">Logout</button>
        </fieldset>
        <br>
        <p> Results of Login will be displayed below: </p>
        <h3>CheckSession result:</h3>
        <pre id="checkSessionResult"></pre>
        <h3>Authentication result:</h3>
        <pre id="authResult"></pre>
        <h3>User profile:</h3>
        <pre id="profile"></pre>
        <h3>SSO Data:</h3>
        <pre id="ssoData"></pre>
    </div>
    <script src="https://cdn.auth0.com/js/lock/11.25.0/lock.js"></script>
    <script src="https://cdn.auth0.com/js/auth0/9.8.2/auth0.js"></script>

    <script type="text/javascript">
      // your client ID should configure the callback URL and the Allowed Web Origins values
      // based on where you'll be serving this. E.g. if you are using "serve" and you are serving
      // from https://localhost:5000/test/embedded-lock-test.html
      // then set https://localhost:5000 as the allowed web origin.
      var clientId = 'your_client_id';
      var domain = 'your_domain';
      function showAuthResult(err, result) {
        document.getElementById("authResult").textContent = JSON.stringify(err || result, null, " ");
        if (result && result.profile) {
          document.getElementById("profile").textContent = JSON.stringify(result.profile, null, " ");
        }
      }
      function signin() {
        var options = {
          auth: {
            params: {
              //scope: 'openid'
            }
            ,responseType: 'token id_token'
          },
        };

        var lock = new Auth0Lock(clientId, domain, options);

        lock.on("authenticated", function (result) {
          showAuthResult(null, result);
        });
        lock.on("authorization_error", function (err) {
          showAuthResult(err);
        });

        lock.show();
      }

      var a0 = new auth0.WebAuth({
        domain: domain,
        clientID: clientId,
        responseType: 'token id_token',
        redirectUri: window.location.href,
        __tryLocalStorageFirst: true
      });
      a0.parseHash(function (err, result) {
        history.pushState("", document.title, window.location.pathname
          + window.location.search);
        showAuthResult(err, result);
      });
      function checkSession() {
        document.getElementById("checkSessionResult").textContent ="Checking...";
        a0.checkSession({
        }, function (err, authResult) {
          if (err) {
            document.getElementById("checkSessionResult").textContent = JSON.stringify(err, null, " ");
          } else {
            document.getElementById("checkSessionResult").textContent = JSON.stringify(authResult, null, " ");
          }
        });
      }
      function logout() {
        a0.logout({
          returnTo: window.location.href
        })
      }
      function login_authorize() {
        a0.authorize();
      }

      function login_authorize_popup() {
        a0.popup.authorize({
          redirectUri: 'http://localhost:5000/popup_handler'

        },function(err, authResult){
            showAuthResult(err, authResult);
        });

      }
      checkSession();
      //a0.client.getSSOData(function (err, data) {
      //  if (!err) {
      //    document.getElementById('ssoData').textContent = JSON.stringify(data, null, "  ");
      //  } else {
      //    document.getElementById('ssoData').textContent = JSON.stringify(err, null, "  ");
      //  }
      //});
    </script>

</BODY>

</HTML>
	<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
	<HTML>
	<HEAD>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	<TITLE>
	Hello World
	</TITLE>
	<style>
	.auth0-lock.auth0-lock .auth0-lock-header-bg {
	display: none !important;
	}

	.auth0-lock.auth0-lock .auth0-lock-header-logo {
	height: 100px;
	display: inline-block;
	margin: 0 0 10px;
	vertical-align: middle;
	}

	.auth0-lock.auth0-lock .auth0-lock-header {
	height: auto !important;
	}

	.auth0-lock.auth0-lock-opened-in-frame {
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 5px;
	}
	</style>
	</HEAD>
	<BODY>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
	<div class="container-fluid">
	<H1>A very simple single page application</H1>
	<div role="group">
	<button class="btn btn-primary" onclick="signin()">Login (embedded)</button>
	<button class="btn btn-primary" onclick="checkSession()">checkSession</button>
	</div>
	<fieldset>
	<legend>With /authorized (Auth0 hosted)</legend>
	<button class="btn btn-default" onclick="login_authorize()">Login with /authorize</button>
	<button class="btn btn-default" onclick="login_authorize_popup()">Login with /authorize popup</button>
	<button class="btn btn-default" onclick="logout()">Logout</button>
	</fieldset>
	<br>
	<p> Results of Login will be displayed below: </p>
	<h3>CheckSession result:</h3>
	<pre id="checkSessionResult"></pre>
	<h3>Authentication result:</h3>
	<pre id="authResult"></pre>
	<h3>User profile:</h3>
	<pre id="profile"></pre>
	<h3>SSO Data:</h3>
	<pre id="ssoData"></pre>
	</div>
	<script src="https://cdn.auth0.com/js/lock/11.25.0/lock.js"></script>
	<script src="https://cdn.auth0.com/js/auth0/9.8.2/auth0.js"></script>

	<script type="text/javascript">
	// your client ID should configure the callback URL and the Allowed Web Origins values
	// based on where you'll be serving this. E.g. if you are using "serve" and you are serving
	// from https://localhost:5000/test/embedded-lock-test.html
	// then set https://localhost:5000 as the allowed web origin.
	var clientId = 'your_client_id';
	var domain = 'your_domain';
	function showAuthResult(err, result) {
	document.getElementById("authResult").textContent = JSON.stringify(err \|\| result, null, " ");
	if (result && result.profile) {
	document.getElementById("profile").textContent = JSON.stringify(result.profile, null, " ");
	}
	}
	function signin() {
	var options = {
	auth: {
	params: {
	//scope: 'openid'
	}
	,responseType: 'token id_token'
	},
	};

	var lock = new Auth0Lock(clientId, domain, options);

	lock.on("authenticated", function (result) {
	showAuthResult(null, result);
	});
	lock.on("authorization_error", function (err) {
	showAuthResult(err);
	});

	lock.show();
	}

	var a0 = new auth0.WebAuth({
	domain: domain,
	clientID: clientId,
	responseType: 'token id_token',
	redirectUri: window.location.href,
	__tryLocalStorageFirst: true
	});
	a0.parseHash(function (err, result) {
	history.pushState("", document.title, window.location.pathname
	+ window.location.search);
	showAuthResult(err, result);
	});
	function checkSession() {
	document.getElementById("checkSessionResult").textContent ="Checking...";
	a0.checkSession({
	}, function (err, authResult) {
	if (err) {
	document.getElementById("checkSessionResult").textContent = JSON.stringify(err, null, " ");
	} else {
	document.getElementById("checkSessionResult").textContent = JSON.stringify(authResult, null, " ");
	}
	});
	}
	function logout() {
	a0.logout({
	returnTo: window.location.href
	})
	}
	function login_authorize() {
	a0.authorize();
	}

	function login_authorize_popup() {
	a0.popup.authorize({
	redirectUri: 'http://localhost:5000/popup_handler'

	},function(err, authResult){
	showAuthResult(err, authResult);
	});

	}
	checkSession();
	//a0.client.getSSOData(function (err, data) {
	// if (!err) {
	// document.getElementById('ssoData').textContent = JSON.stringify(data, null, " ");
	// } else {
	// document.getElementById('ssoData').textContent = JSON.stringify(err, null, " ");
	// }
	//});
	</script>

	</BODY>

	</HTML>