@ariyana/appauth
Version:
A general purpose OAuth client.
82 lines (76 loc) • 3.25 kB
HTML
<html>
<head>
<title>AppAuthJS Sample Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">AppAuth Tester</h2>
</div>
<div class="mdl-card__supporting-text">
Testing the App Auth JavaScript Library.
</div>
</div>
<br/>
<div class="card mdl-card mdl-shadow--2dp">
<button class="mdl-button mdl-js-button mdl-button--raised" id="fetchConfig">Fetch Configuration</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="authorize">Make Authorization Request</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="makeTokenRequest">Make Token Request</button>
</div>
<!-- snackbar -->
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
<br/>
<div class="app">
<!-- react components come here. -->
</div>
</div>
<!-- extras -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="./app.css" />
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="../built/app/bundle.js"></script>
<script type="text/javascript">
var application = null;
var init = function () {
application = new App(document.querySelector('#snackbar'));
// check for authorization response if available.
application.checkForAuthorizationResponse();
// fetch configuration handler
var fetchConfiguration = document.querySelector('#fetchConfig');
fetchConfiguration.addEventListener('click', function (event) {
application.fetchServiceConfiguration();
event.preventDefault();
});
// authorize request handler
var authorize = document.querySelector('#authorize');
authorize.addEventListener('click', function (event) {
application.makeAuthorizationRequest();
event.preventDefault();
});
// token request handler
var makeTokenRequest = document.querySelector('#makeTokenRequest');
makeTokenRequest.addEventListener('click', function (event) {
application.makeTokenRequest();
event.preventDefault();
});
};
// initialize app when MDL is ready to go.
window.addEventListener('load', function () {
console.log('Initializing App.');
init();
});
</script>
</body>
</html>