-
-
Save webb24h/7bf02992bab2c6547b8a480a14e59d14 to your computer and use it in GitHub Desktop.
Keycloak JS Only public client example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment