2014-03-15 12:53:52 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Authentication Example</title>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
|
|
|
|
|
<script type="text/javascript" charset="utf-8" src="keycloak.js"></script>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
var keycloak = new Keycloak();
|
|
|
|
|
|
|
|
|
|
keycloak.onAuthSuccess = updateState;
|
|
|
|
|
keycloak.onAuthRefreshSuccess = updateState;
|
|
|
|
|
keycloak.onAuthLogout = updateState;
|
|
|
|
|
|
|
|
|
|
function updateState() {
|
|
|
|
|
if (keycloak.authenticated) {
|
|
|
|
|
document.getElementById('authenticated').style.display = 'block';
|
|
|
|
|
document.getElementById('not-authenticated').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
document.getElementById('subject').innerText = keycloak.subject;
|
2015-01-16 10:48:23 +00:00
|
|
|
document.getElementById('username').innerText = keycloak.idTokenParsed.preferred_username;
|
2014-03-15 12:53:52 +00:00
|
|
|
document.getElementById('tokenExpires').innerText = new Date(keycloak.tokenParsed.exp * 1000).toLocaleString();
|
|
|
|
|
document.getElementById('tokenRefreshExpires').innerText = new Date(keycloak.refreshTokenParsed.exp * 1000).toLocaleString();
|
2015-01-16 10:48:23 +00:00
|
|
|
document.getElementById('token').innerText = JSON.stringify(keycloak.tokenParsed, null, ' ');
|
|
|
|
|
document.getElementById('idToken').innerText = JSON.stringify(keycloak.idTokenParsed, null, ' ');
|
2014-03-15 12:53:52 +00:00
|
|
|
} else {
|
|
|
|
|
document.getElementById('authenticated').style.display = 'none';
|
|
|
|
|
document.getElementById('not-authenticated').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener("deviceready", function() {
|
2014-09-25 17:00:13 +00:00
|
|
|
keycloak.init({ onLoad: 'check-sso' }).success(updateState);
|
2014-03-15 12:53:52 +00:00
|
|
|
}, false);
|
|
|
|
|
</script>
|
2015-01-16 10:48:23 +00:00
|
|
|
<style>
|
|
|
|
|
td {
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tr.odd td {
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2014-03-15 12:53:52 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="authenticated" style="display: none;">
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="keycloak.logout()">Log out</button>
|
|
|
|
|
<button onclick="keycloak.updateToken()">Refresh token</button>
|
2014-05-28 16:29:13 +00:00
|
|
|
<button onclick="keycloak.updateToken(9999)">Force Refresh token</button>
|
2014-03-19 16:32:51 +00:00
|
|
|
<button onclick="keycloak.accountManagement()">Manage account</button>
|
2014-03-15 12:53:52 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Subject</td>
|
|
|
|
|
<td id="subject"></td>
|
|
|
|
|
</tr>
|
2015-01-16 10:48:23 +00:00
|
|
|
<tr class="odd">
|
2014-03-15 12:53:52 +00:00
|
|
|
<td>Username</td>
|
|
|
|
|
<td id="username"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Token expires</td>
|
|
|
|
|
<td id="tokenExpires"></td>
|
|
|
|
|
</tr>
|
2015-01-16 10:48:23 +00:00
|
|
|
<tr class="odd">
|
2014-03-15 12:53:52 +00:00
|
|
|
<td>Refresh token expires</td>
|
|
|
|
|
<td id="tokenRefreshExpires"></td>
|
|
|
|
|
</tr>
|
2015-01-16 10:48:23 +00:00
|
|
|
<tr>
|
|
|
|
|
<td>Token</td>
|
|
|
|
|
<td><pre id="token"></pre></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="odd">
|
|
|
|
|
<td>ID Token</td>
|
|
|
|
|
<td><pre id="idToken"></pre></td>
|
|
|
|
|
</tr>
|
2014-03-15 12:53:52 +00:00
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="not-authenticated" style="display: none;">
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="keycloak.login()">Log in</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Not authenticated</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
