thomasdarimont/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Keycloak JS Demo</title>

    <style>
        body {
            background-color: #eaeaea;
            font-family: sans-serif;
            font-size: 30px;
        }

        button {
            font-family: sans-serif;
            font-size: 30px;
            width: 250px;

            background-color: #0085cf;
            background-image: linear-gradient(to bottom, #00a8e1 0%, #0085cf 100%);
            background-repeat: repeat-x;

            border: 2px solid #ccc;
            color: #fff;

            text-transform: uppercase;

            -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
        }

        button:hover {
            background-color: #006ba6;
            background-image: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        hr {
            border: none;
            background-color: #eee;
            height: 10px;
        }

        .menu {
            padding: 10px;
            margin-bottom: 10px;
        }

        .content {
            background-color: #eee;
            border: 1px solid #ccc;
            padding: 10px;

            -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
        }

        .content .message {
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 40px;
        }

        .response-content {
            font-size: 20px;
            padding: 5px;
            white-space: pre;
            text-transform: none;
        }

        .error {
            color: #a21e22;
        }

        table {
            width: 100%;
        }

        tr.even {
            background-color: #eee;
        }

        td {
            padding: 5px;
        }

        td.label {
            font-weight: bold;
            width: 250px;
        }
    </style>
</head>

<body>

    <nav class="menu" style="display: none;">
        <button name="profileBtn" onclick="showProfile()">Profile</button>
        <button name="tokenBtn" onclick="showToken()">AccessToken</button>
        <button name="idTokenBtn" onclick="showIdToken()">IDToken</button>
        <button onclick="showUserInfo()">UserInfo</button>
        <button name="accountBtn" onclick="keycloak.accountManagement()">Account</button>
        <button name="logoutBtn" onclick="keycloak.logout()">Logout</button>
    </nav>

    <div id="welcome" style="display: none;">
        <div class="menu">
            <button name="loginBtn" onclick="keycloak.login()">Login</button>
        </div>

        <div class="content">
            <div class="message">Please login</div>
        </div>
    </div>

    <div id="profile" style="display: none;">
        <div class="content">
            <div id="profile-content" class="message">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="label">First name</td>
                        <td><span id="firstName"></span></td>
                    </tr>
                    <tr class="even">
                        <td class="label">Last name</td>
                        <td><span id="lastName"></span></td>
                    </tr>
                    <tr class="even">
                        <td class="label">Email</td>
                        <td><span id="email"></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="token" style="display: none;">
        <div class="content">
            <div id="token-content" class="response-content"></div>
        </div>
    </div>

    <div id="idToken" style="display: none;">
        <div class="content">
            <div id="idToken-content" class="response-content"></div>
        </div>
    </div>

    <div id="userinfo" style="display: none;">
        <div class="content">
            <div id="userinfo-content" class="response-content"></div>
        </div>
    </div>


    <script>
        let keycloakUrl = "http://localhost:8081/auth"
        let keycloakJsSrc = keycloakUrl + "/js/keycloak.js";

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = keycloakJsSrc;
        document.getElementsByTagName('head')[0].appendChild(script);

        window.onload = function () {

            window.keycloak = new Keycloak({
                url: keycloakUrl,
                realm: 'demo',
                clientId: 'keycloak-js-demo'
            });

            // Workaround for KEYCLOAK-14414
            window.keycloak._login = window.keycloak.login;
            window.keycloak.login = function (options) {
                if (options) {
                    //options.scope="openid email name";
                    options.scope = "openid";
                }
                return window.keycloak._login.apply(window.keycloak, [options]);
            };


            keycloak.init({
                onLoad: 'login-required',
                // onLoad: 'check-sso',
                checkLoginIframe: true,
                checkLoginIframeInterval: 1,
                pkceMethod: 'S256'
            }).success(function () {

                    if (keycloak.authenticated) {
                        showMenu();
                        showProfile();
                    } else {
                        showWelcome();
                    }
                });

            keycloak.onAuthLogout = showWelcome;
        };

        function showMenu() {
            select('.menu').style.display = 'block';
        }

        function showWelcome() {
            show('#welcome');
        }

        function showProfile() {

            let firstname = keycloak.tokenParsed['given_name'];
            let lastname = keycloak.tokenParsed['family_name'];
            let email = keycloak.tokenParsed['email'];

            if (firstname) {
                select('#firstName').innerHTML = firstname;
            }
            if (lastname) {
                select('#lastName').innerHTML = lastname;
            }
            if (email) {
                select('#email').innerHTML = email;
            }

            show('#profile');
        }

        function showToken() {
            select('#token-content').innerHTML = prettyPrintJson(keycloak.tokenParsed);
            show('#token');
        }

        function showIdToken() {
            select('#idToken-content').innerHTML = prettyPrintJson(keycloak.idTokenParsed);
            show('#idToken');
        }

        function showUserInfo() {
            keycloak.loadUserInfo().then(userinfo => {
                select('#userinfo-content').innerHTML = prettyPrintJson(userinfo);
                show('#userinfo');
            });
        }

        function prettyPrintJson(obj) {
            return JSON.stringify(obj, null, '    ');
        }

        function show(selector) {
            select('#welcome').style.display = 'none';
            select('#profile').style.display = 'none';
            select('#token').style.display = 'none';
            select('#idToken').style.display = 'none';
            select('#userinfo').style.display = 'none';
            select(selector).style.display = 'block';
        }

        function select(selector) {
            return document.querySelector(selector);
        }
    </script>
</body>

</html>

## start.sh
#!/bin/bash

echo "starting  keycloak-js-demo app"
python3 -m http.server 40002
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">

	<title>Keycloak JS Demo</title>

	<style>
	body {
	background-color: #eaeaea;
	font-family: sans-serif;
	font-size: 30px;
	}

	button {
	font-family: sans-serif;
	font-size: 30px;
	width: 250px;

	background-color: #0085cf;
	background-image: linear-gradient(to bottom, #00a8e1 0%, #0085cf 100%);
	background-repeat: repeat-x;

	border: 2px solid #ccc;
	color: #fff;

	text-transform: uppercase;

	-webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	}

	button:hover {
	background-color: #006ba6;
	background-image: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

	hr {
	border: none;
	background-color: #eee;
	height: 10px;
	}

	.menu {
	padding: 10px;
	margin-bottom: 10px;
	}

	.content {
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 10px;

	-webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
	}

	.content .message {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	font-size: 40px;
	}

	.response-content {
	font-size: 20px;
	padding: 5px;
	white-space: pre;
	text-transform: none;
	}

	.error {
	color: #a21e22;
	}

	table {
	width: 100%;
	}

	tr.even {
	background-color: #eee;
	}

	td {
	padding: 5px;
	}

	td.label {
	font-weight: bold;
	width: 250px;
	}
	</style>
	</head>

	<body>

	<nav class="menu" style="display: none;">
	<button name="profileBtn" onclick="showProfile()">Profile</button>
	<button name="tokenBtn" onclick="showToken()">AccessToken</button>
	<button name="idTokenBtn" onclick="showIdToken()">IDToken</button>
	<button onclick="showUserInfo()">UserInfo</button>
	<button name="accountBtn" onclick="keycloak.accountManagement()">Account</button>
	<button name="logoutBtn" onclick="keycloak.logout()">Logout</button>
	</nav>

	<div id="welcome" style="display: none;">
	<div class="menu">
	<button name="loginBtn" onclick="keycloak.login()">Login</button>
	</div>

	<div class="content">
	<div class="message">Please login</div>
	</div>
	</div>

	<div id="profile" style="display: none;">
	<div class="content">
	<div id="profile-content" class="message">
	<table cellpadding="0" cellspacing="0">
	<tr>
	<td class="label">First name</td>
	<td><span id="firstName"></span></td>
	</tr>
	<tr class="even">
	<td class="label">Last name</td>
	<td><span id="lastName"></span></td>
	</tr>
	<tr class="even">
	<td class="label">Email</td>
	<td><span id="email"></span></td>
	</tr>
	</table>
	</div>
	</div>
	</div>

	<div id="token" style="display: none;">
	<div class="content">
	<div id="token-content" class="response-content"></div>
	</div>
	</div>

	<div id="idToken" style="display: none;">
	<div class="content">
	<div id="idToken-content" class="response-content"></div>
	</div>
	</div>

	<div id="userinfo" style="display: none;">
	<div class="content">
	<div id="userinfo-content" class="response-content"></div>
	</div>
	</div>


	<script>
	let keycloakUrl = "http://localhost:8081/auth"
	let keycloakJsSrc = keycloakUrl + "/js/keycloak.js";

	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = keycloakJsSrc;
	document.getElementsByTagName('head')[0].appendChild(script);

	window.onload = function () {

	window.keycloak = new Keycloak({
	url: keycloakUrl,
	realm: 'demo',
	clientId: 'keycloak-js-demo'
	});

	// Workaround for KEYCLOAK-14414
	window.keycloak._login = window.keycloak.login;
	window.keycloak.login = function (options) {
	if (options) {
	//options.scope="openid email name";
	options.scope = "openid";
	}
	return window.keycloak._login.apply(window.keycloak, [options]);
	};


	keycloak.init({
	onLoad: 'login-required',
	// onLoad: 'check-sso',
	checkLoginIframe: true,
	checkLoginIframeInterval: 1,
	pkceMethod: 'S256'
	}).success(function () {

	if (keycloak.authenticated) {
	showMenu();
	showProfile();
	} else {
	showWelcome();
	}
	});

	keycloak.onAuthLogout = showWelcome;
	};

	function showMenu() {
	select('.menu').style.display = 'block';
	}

	function showWelcome() {
	show('#welcome');
	}

	function showProfile() {

	let firstname = keycloak.tokenParsed['given_name'];
	let lastname = keycloak.tokenParsed['family_name'];
	let email = keycloak.tokenParsed['email'];

	if (firstname) {
	select('#firstName').innerHTML = firstname;
	}
	if (lastname) {
	select('#lastName').innerHTML = lastname;
	}
	if (email) {
	select('#email').innerHTML = email;
	}

	show('#profile');
	}

	function showToken() {
	select('#token-content').innerHTML = prettyPrintJson(keycloak.tokenParsed);
	show('#token');
	}

	function showIdToken() {
	select('#idToken-content').innerHTML = prettyPrintJson(keycloak.idTokenParsed);
	show('#idToken');
	}

	function showUserInfo() {
	keycloak.loadUserInfo().then(userinfo => {
	select('#userinfo-content').innerHTML = prettyPrintJson(userinfo);
	show('#userinfo');
	});
	}

	function prettyPrintJson(obj) {
	return JSON.stringify(obj, null, ' ');
	}

	function show(selector) {
	select('#welcome').style.display = 'none';
	select('#profile').style.display = 'none';
	select('#token').style.display = 'none';
	select('#idToken').style.display = 'none';
	select('#userinfo').style.display = 'none';
	select(selector).style.display = 'block';
	}

	function select(selector) {
	return document.querySelector(selector);
	}
	</script>
	</body>

	</html>
	#!/bin/bash

	echo "starting keycloak-js-demo app"
	python3 -m http.server 40002