view.html

Home / examples / demo-template / customer-app-js / src / main / webapp / customers / view.html
91 lines | 3.41 kB Blame History Raw Download
<html>
<head>
    <title>Customer View Page</title>
    <script src="http://localhost:8081/auth/js/keycloak.js"></script>
</head>
<body bgcolor="#E3F6CE">

<p>Goto: <a href="#" onclick="keycloak.logout()">logout</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({
        clientId: 'customer-portal',
        realm: 'demo',
        onload: 'login-required'
    });

    var loadData = function () {
        document.getElementById('subject').innerText = keycloak.subject;

        console.debug(keycloak.idToken);
        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 = 'http://localhost:8080/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.onValidAccessToken(loadData, loadFailure);
    }

    keycloak.init(loadData, loadFailure);

</script>

<br><br>
<button onclick="reloadData()">Reload data</button>
</body>
</html>