2014-03-15 12:53:52 +00:00
|
|
|
<!DOCTYPE html>
|
2016-02-03 10:20:22 +00:00
|
|
|
<!--
|
|
|
|
|
~ Copyright 2016 Red Hat, Inc. and/or its affiliates
|
|
|
|
|
~ and other contributors as indicated by the @author tags.
|
|
|
|
|
~
|
|
|
|
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
~ you may not use this file except in compliance with the License.
|
|
|
|
|
~ You may obtain a copy of the License at
|
|
|
|
|
~
|
|
|
|
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
~
|
|
|
|
|
~ Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
~ distributed under the License 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.
|
|
|
|
|
-->
|
|
|
|
|
|
2014-03-15 12:53:52 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Authentication Example</title>
|
|
|
|
|
|
2016-01-08 13:34:03 +00:00
|
|
|
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
|
|
|
|
|
|
2014-03-15 12:53:52 +00:00
|
|
|
<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>
|
|
|
|
|
|
