{#include main fluid=true} {#title}Keycloak{/title} {#script} var port = {config:property('quarkus.http.port')}; {#if info:oidcApplicationType is 'service'} {#if info:oidcGrantType is 'implicit' || info:oidcGrantType is 'code'} var accessToken; var idToken; var loggedIn = false; var userName; $( document ).ready(function() { if(tokensInUrl()){ loggedIn === true; $('.implicitLoggedOut').hide(); $('.implicitLoggedIn').show(); var hash = window.location.hash; accessToken = hash.match(/access_token=([^&]+)/)[1]; idToken = hash.match(/id_token=([^&]+)/)[1]; $('#accessTokenEncodedArea').html(prettyToken(accessToken)); $('#accessTokenDecodedArea').html(decodeToken(accessToken)); $('#idTokenEncodedArea').html(prettyToken(idToken)); $('#idTokenDecodedArea').html(decodeToken(idToken)); }else if(codeInUrl()){ loggedIn === true; $('.implicitLoggedOut').hide(); $('.implicitLoggedIn').show(); var hash = window.location.hash; var code = hash.match(/code=([^&]+)/)[1]; exchangeCodeForTokens(code); }else{ loggedIn === false; $('.implicitLoggedOut').show(); $('.implicitLoggedIn').hide(); accessToken = null; idToken = null; userName = null; $('#accessTokenEncodedArea').text(''); $('#accessTokenDecodedArea').text(''); $('#idTokenEncodedArea').text(''); $('#idTokenDecodedArea').text(''); } }); function tokensInUrl(){ return idTokenInUrl() && accessTokenInUrl(); } function idTokenInUrl(){ return inUrl('id_token'); } function accessTokenInUrl(){ return inUrl('access_token'); } function codeInUrl(){ return inUrl('code'); } function inUrl(field){ var url = window.location.href; if(url.indexOf('?' + field + '=') != -1) return true; else if(url.indexOf('&' + field + '=') != -1) return true; return false; } function signInToKeycloakAndGetTokens() { {#if info:oidcGrantType is 'implicit'} window.location.href = '{info:keycloakUrl}' + "/realms/" + '{info:keycloakRealm}' + "/protocol/openid-connect/auth" + "?client_id=" + '{info:keycloakClient}' + "&redirect_uri=" + "http%3A%2F%2Flocalhost%3A" + port + "%2Fq%2Fdev%2Fio.quarkus.quarkus-oidc%2Fprovider" + "&scope=openid&response_type=token id_token&response_mode=fragment&prompt=login" + "&nonce=" + makeid(); {#else} window.location.href = '{info:keycloakUrl}' + "/realms/" + '{info:keycloakRealm}' + "/protocol/openid-connect/auth" + "?client_id=" + '{info:keycloakClient}' + "&redirect_uri=" + "http%3A%2F%2Flocalhost%3A" + port + "%2Fq%2Fdev%2Fio.quarkus.quarkus-oidc%2Fprovider" + "&scope=openid&response_type=code&response_mode=fragment&prompt=login" + "&nonce=" + makeid(); {/if} } function testServiceWithAccessToken(){ var servicePath = $('#servicePath').val(); $.post("testServiceWithToken", { serviceUrl: "http://localhost:" + port + servicePath, token: accessToken }, function(data, status){ printResponseData(data, "Access Token, " + "service path: " + servicePath); }); } function testServiceWithIdToken(){ var servicePath = $('#servicePath').val(); $.post("testServiceWithToken", { serviceUrl: "http://localhost:" + port + servicePath, token: idToken }, function(data, status){ printResponseData(data, "ID Token, " + "service path: " + servicePath); }); } function makeid() { var result = ''; var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var charactersLength = characters.length; for ( var i = 0; i < 7; i++ ) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; } function accessTokenToClipboard(){ copyToClipboard(accessToken,"dummyAccessTokenClipBoard"); } function idTokenToClipboard(){ copyToClipboard(idToken,"dummyIdTokenClipBoard"); } function copyToClipboard(token, type){ var dummy = document.createElement("input"); document.body.appendChild(dummy); dummy.setAttribute("id", type); document.getElementById(type).value=token; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); } function logout() { window.location.assign('{info:keycloakUrl}' + "/realms/" + '{info:keycloakRealm}' + "/protocol/openid-connect/logout" + "?post_logout_redirect_uri=" + "http%3A%2F%2Flocalhost%3A" + port + "%2Fq%2Fdev%2Fio.quarkus.quarkus-oidc%2Fprovider"); } function exchangeCodeForTokens(code){ $.post("exchangeCodeForTokens", { keycloakUrl: '{info:keycloakUrl}', realm: '{info:keycloakRealm}', client: '{info:keycloakClient}', clientSecret: '{info:keycloakClientSecret}', authorizationCode: code, redirectUri: "http://localhost:" + port + "/q/dev/io.quarkus.quarkus-oidc/provider" }, function(data, status){ var tokens = JSON.parse(data); accessToken = tokens.access_token idToken = tokens.id_token $('#accessTokenEncodedArea').html(prettyToken(accessToken)); $('#accessTokenDecodedArea').html(decodeToken(accessToken)); $('#idTokenEncodedArea').html(prettyToken(idToken)); $('#idTokenDecodedArea').html(decodeToken(idToken)); }); } function decodeToken(token) { var parts = token.split("."); if (parts.length == 3) { var headers = window.atob(parts[0]); var payload = window.atob(parts[1]); var jsonPayload = JSON.parse(payload); if (!userName) { if (jsonPayload.upn) { userName = jsonPayload.upn; } else if (jsonPayload.preferred_username) { userName = jsonPayload.preferred_username; } if (userName) { $('#loggedInUser').append("Logged in as " + userName + " "); } } return "

    " +
                        JSON.stringify(JSON.parse(headers), null, 4) +
                        "

    " +
                        JSON.stringify(jsonPayload,null,4) + "

" + parts[2] + ""; } else { return token; } } function prettyToken(token){ var parts = token.split("."); if (parts.length == 3) { var headers = parts[0]; var payload = parts[1]; var signature = parts[2]; return "" + parts[0] + "." + parts[1] + "." + parts[2] + ""; } else { return token; } } {/if} {/if} {#if info:oidcGrantType is 'password'} function testServiceWithPassword(userName, servicePath){ $.post("testService", { keycloakUrl: '{info:keycloakUrl}', serviceUrl: "http://localhost:" + port + servicePath, realm: '{info:keycloakRealm}', client: '{info:keycloakClient}', clientSecret: '{info:keycloakClientSecret}', user: userName, grant: '{info:oidcGrantType}' }, function(data, status){ printResponseData(data, "User: " + userName + ", " + "service path: " + servicePath); }); } {/if} {#if info:oidcGrantType is 'client_credentials'} function testServiceWithClientCredentials(servicePath) { $.post("testService", { keycloakUrl: '{info:keycloakUrl}', serviceUrl: "http://localhost:" + port + servicePath, realm: '{info:keycloakRealm}', client: '{info:keycloakClient}', clientSecret: '{info:keycloakClientSecret}', grant: '{info:oidcGrantType}' }, function(data, status){ printResponseData(data, "Service path: " + servicePath); }); } {/if} function printResponseData(data, message){ if(data.startsWith("2")){ $('#results').append(""); }else { $('#results').append(""); } $('#results').append("" + new Date().toLocaleString() + " : "); $('#results').append("" + message + ", result : "); $('#results').append("" + data + ""); $('#results').append("
"); } function signInToService(servicePath) { window.open("http://localhost:" + port + servicePath); } {/script} {#body}

{#if info:keycloakUrl??}
Keycloak Admin
{/if}
{#if info:oidcApplicationType?? is 'service'} {#if info:oidcGrantType is 'implicit' || info:oidcGrantType is 'code'}
Log into Single Page Application
Your tokens
View Access Token

##### Encoded

##### Decoded

View ID Token

##### Encoded

##### Decoded

Test your service
Service Path
{#else if info:oidcGrantType is 'password'}
Get access token and test your service
User name
Service Path
{#else if info:oidcGrantType is 'client_credentials'}
Get access token for {info:keycloakClient} and test your service
Service Path
{/if} {#else}
Service Path
{/if}
{/body} {/include}