index.html
Home
/
examples /
cordova /
www /
index.html
<!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;
document.getElementById('username').innerText = keycloak.idTokenParsed.preferred_username;
document.getElementById('tokenExpires').innerText = new Date(keycloak.tokenParsed.exp * 1000).toLocaleString();
document.getElementById('tokenRefreshExpires').innerText = new Date(keycloak.refreshTokenParsed.exp * 1000).toLocaleString();
document.getElementById('token').innerText = JSON.stringify(keycloak.tokenParsed, null, ' ');
document.getElementById('idToken').innerText = JSON.stringify(keycloak.idTokenParsed, null, ' ');
} else {
document.getElementById('authenticated').style.display = 'none';
document.getElementById('not-authenticated').style.display = 'block';
}
}
document.addEventListener("deviceready", function() {
keycloak.init({ onLoad: 'check-sso' }).success(updateState);
}, false);
</script>
<style>
td {
vertical-align: top;
}
tr.odd td {
background-color: #eee;
}
</style>
</head>
<body>
<div id="authenticated" style="display: none;">
<div>
<button onclick="keycloak.logout()">Log out</button>
<button onclick="keycloak.updateToken()">Refresh token</button>
<button onclick="keycloak.updateToken(9999)">Force Refresh token</button>
<button onclick="keycloak.accountManagement()">Manage account</button>
</div>
<div>
<table>
<tr>
<td>Subject</td>
<td id="subject"></td>
</tr>
<tr class="odd">
<td>Username</td>
<td id="username"></td>
</tr>
<tr>
<td>Token expires</td>
<td id="tokenExpires"></td>
</tr>
<tr class="odd">
<td>Refresh token expires</td>
<td id="tokenRefreshExpires"></td>
</tr>
<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>
</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>