<html>
<head>
<title>Customer View Page</title>
<script src="/auth/js/keycloak.js"></script>
</head>
<body bgcolor="#E3F6CE">
<p>Goto: <a href="http://localhost:8080/product-portal">products</a> | <a href="#" onclick="keycloak.logout()">logout</a> | <a href="#" onclick="keycloak.accountManagement()">manage acct</a></p>
User <b id="subject"></b> made this request.
<p><b>User details (from <span id="profileType"></span>)</b></p>
<p>Username: <span id="username"></span></p>
<p>Email: <span id="email"></span></p>
<p>Full Name: <span id="name"></span></p>
<p>First: <span id="givenName"></span></p>
<p>Last: <span id="familyName"></span></p>
<h2>Customer Listing</h2>
<div id="customers"></div>
<script>
var keycloak = Keycloak('../keycloak.json');
var loadData = function () {
document.getElementById('subject').innerText = keycloak.subject;
if (keycloak.idToken) {
document.getElementById('profileType').innerText = 'IDToken';
document.getElementById('username').innerText = keycloak.idToken.preferred_username;
document.getElementById('email').innerText = keycloak.idToken.email;
document.getElementById('name').innerText = keycloak.idToken.name;
document.getElementById('givenName').innerText = keycloak.idToken.given_name;
document.getElementById('familyName').innerText = keycloak.idToken.family_name;
} else {
keycloak.loadUserProfile(function() {
document.getElementById('profileType').innerText = 'Account Service';
document.getElementById('username').innerText = keycloak.profile.username;
document.getElementById('email').innerText = keycloak.profile.email;
document.getElementById('name').innerText = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
document.getElementById('givenName').innerText = keycloak.profile.firstName;
document.getElementById('familyName').innerText = keycloak.profile.lastName;
}, function() {
document.getElementById('profileType').innerText = 'Failed to retrieve user details. Please enable claims or account role';
});
}
var url = '/database/customers';
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.setRequestHeader('Accept', 'application/json');
req.setRequestHeader('Authorization', 'Bearer ' + keycloak.token);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
var users = JSON.parse(req.responseText);
var html = '';
for (var i = 0; i < users.length; i++) {
html += '<p>' + users[i] + '</p>';
}
document.getElementById('customers').innerHTML = html;
console.log('finished loading data');
}
}
}
req.send();
};
var loadFailure = function () {
document.getElementById('customers').innerHTML = '<b>Failed to load data. Check console log</b>';
};
var reloadData = function () {
keycloak.checkLoginIframe(
function() {
keycloak.updateToken(10).success(loadData).error(loadFailure);
},
function() {
document.getElementById('customers').innerHTML = '<b>Failed to load data. User is logged out.</b>';
//window.location.reload();
}
);
}
//
// NOTE!!!: keycloak.setupCheckLoginIframe and checkLoginIframe are an optional way
// of discovering if you are logged out. This approach may not always be feasible, but it is a lightweight
// approach that requires no network call to determine if the user is logged in. The downside is that it
// requires a callback.
//
// Alternatively, on a single log out, the access token will eventually time out, then refresh token will fail
// as the session will be logged out on the auth server.
//
//
keycloak.init('login-required').success(function() {
// Use an iframe to detect if the user has done an SSO logout in a different window.
keycloak.setupCheckLoginIframe(document, window);
});
</script>
<br><br>
<button onclick="reloadData()">Reload data</button>
</body>
</html>