stevenferrer/keycloak.html

## keycloak.html
<html>
    <head>

        <script src="http://localhost:8081/auth/js/keycloak.js" type="text/javascript">
        </script>
    </head>

    <body>
        <h1>js-demo-app</h1>

        <div>
        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>
        </div>

        <script type="text/javascript">
    var keycloak = Keycloak('../keycloak.json');
    var loadData = function () {
        document.getElementById('subject').innerHTML = keycloak.subject;
        if (keycloak.idToken) {
            document.getElementById('profileType').innerHTML = 'IDToken';
            document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username;
            document.getElementById('email').innerHTML = keycloak.idTokenParsed.email;
            document.getElementById('name').innerHTML = keycloak.idTokenParsed.name;
            document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name;
            document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name;
        } else {
            keycloak.loadUserProfile(function() {
                document.getElementById('profileType').innerHTML = 'Account Service';
                document.getElementById('username').innerHTML = keycloak.profile.username;
                document.getElementById('email').innerHTML = keycloak.profile.email;
                document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
                document.getElementById('givenName').innerHTML = keycloak.profile.firstName;
                document.getElementById('familyName').innerHTML = keycloak.profile.lastName;
            }, function() {
                document.getElementById('profileType').innerHTML = '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.updateToken(10)
                .success(loadData)
                .error(function() {
                    document.getElementById('customers').innerHTML = '<b>Failed to load data.  User is logged out.</b>';
                });
    }
    keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>

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

	<script src="http://localhost:8081/auth/js/keycloak.js" type="text/javascript">
	</script>
	</head>

	<body>
	<h1>js-demo-app</h1>

	<div>
	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>
	</div>

	<script type="text/javascript">
	var keycloak = Keycloak('../keycloak.json');
	var loadData = function () {
	document.getElementById('subject').innerHTML = keycloak.subject;
	if (keycloak.idToken) {
	document.getElementById('profileType').innerHTML = 'IDToken';
	document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username;
	document.getElementById('email').innerHTML = keycloak.idTokenParsed.email;
	document.getElementById('name').innerHTML = keycloak.idTokenParsed.name;
	document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name;
	document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name;
	} else {
	keycloak.loadUserProfile(function() {
	document.getElementById('profileType').innerHTML = 'Account Service';
	document.getElementById('username').innerHTML = keycloak.profile.username;
	document.getElementById('email').innerHTML = keycloak.profile.email;
	document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
	document.getElementById('givenName').innerHTML = keycloak.profile.firstName;
	document.getElementById('familyName').innerHTML = keycloak.profile.lastName;
	}, function() {
	document.getElementById('profileType').innerHTML = '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.updateToken(10)
	.success(loadData)
	.error(function() {
	document.getElementById('customers').innerHTML = '<b>Failed to load data. User is logged out.</b>';
	});
	}
	keycloak.init({ onLoad: 'login-required' }).success(reloadData);
	</script>

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