p4535992 · June 4, 2025 07:33
diff --git a/keycloak-example.html b/keycloak-example.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />

        <title>Keycloak JS Demo</title>
    </head>

    <body>
        <script>
            let keycloakUrl = 'http://localhost:8080/';
            let keycloakJsSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/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('./keycloak.json');

                keycloak
                    .init({
                        onLoad: 'login-required',
                    })
                    .success((...args) => {
                        console.log('success', args);
                    })
                    .error((err) => {
                        console.error('Authenticated Failed');
                        console.error(err);
                    });
            };

            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>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />

	<title>Keycloak JS Demo</title>
	</head>

	<body>
	<script>
	let keycloakUrl = 'http://localhost:8080/';
	let keycloakJsSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/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('./keycloak.json');

	keycloak
	.init({
	onLoad: 'login-required',
	})
	.success((...args) => {
	console.log('success', args);
	})
	.error((err) => {
	console.error('Authenticated Failed');
	console.error(err);
	});
	};

	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>