{#include main fluid=true} {#title} {#if info:oidcProviderName??} {info:oidcProviderName} {#else} OpenId Connect Dev Console {/if} {/title} {#script} var port = {config:property('quarkus.http.port')}; {#if info:oidcApplicationType is 'service'} var devRoot = '{devRootAppend}'; var encodedDevRoot = devRoot.replaceAll("/", "%2F"); {#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(); $('.loginError').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(); $('.loginError').hide(); $('.implicitLoggedIn').show(); var search = window.location.search; var code = search.match(/code=([^&]+)/)[1]; exchangeCodeForTokens(code); }else if(errorInUrl()){ loggedIn === false; $('.implicitLoggedOut').hide(); $('.implicitLoggedIn').hide(); $('.loginError').show(); printLoginError(); }else{ loggedIn === false; $('.implicitLoggedOut').show(); $('.implicitLoggedIn').hide(); $('.loginError').hide(); accessToken = null; idToken = null; userName = null; $('#accessTokenEncodedArea').text(''); $('#accessTokenDecodedArea').text(''); $('#idTokenEncodedArea').text(''); $('#idTokenDecodedArea').text(''); $('#errorDescription').text(''); } }); function showLoginToSpa() { $('.implicitLoggedOut').show(); $('.loginError').hide(); } function tokensInUrl(){ return idTokenInUrl() && accessTokenInUrl(); } function idTokenInUrl(){ return inUrl('id_token'); } function accessTokenInUrl(){ return inUrl('access_token'); } function codeInUrl(){ return inUrl('code'); } function errorInUrl(){ return inUrl('error_description'); } 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 signInToOidcProviderAndGetTokens() { {#if info:oidcGrantType is 'implicit'} window.location.href = '{info:authorizationUrl??}' + "?client_id=" + '{info:clientId}' + "&redirect_uri=" + "http%3A%2F%2Flocalhost%3A" + port + encodedDevRoot + "%2Fio.quarkus.quarkus-oidc%2Fprovider" + "&scope=openid&response_type=token id_token&response_mode=query&prompt=login" + "&nonce=" + makeid() + "&state=" + makeid(); {#else} window.location.href = '{info:authorizationUrl??}' + "?client_id=" + '{info:clientId}' + "&redirect_uri=" + "http%3A%2F%2Flocalhost%3A" + port + encodedDevRoot + "%2Fio.quarkus.quarkus-oidc%2Fprovider" + "&scope=openid&response_type=code&response_mode=query&prompt=login" + "&nonce=" + makeid() + "&state=" + makeid(); {/if} } function testServiceWithAccessToken(){ var servicePath = getServicePath(); $.post("testServiceWithToken", { serviceUrl: "http://localhost:" + port + servicePath, token: accessToken }, function(data, status){ printResponseData(data, "Access Token, " + "service path: " + servicePath); }); } function testServiceWithIdToken(){ var servicePath = getServicePath(); $.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 navigateToSwaggerUi(){ navigateToSwaggerUiWithToken(getTokenForNavigation()) } function navigateToGraphQLUi(){ navigateToGraphQLUiWithToken(getTokenForNavigation()) } function getTokenForNavigation(){ {#if info:introspectionIsAvailable??} return accessToken; {#else} var parts = accessToken.split("."); return parts.length == 3 ? accessToken : idToken; {/if} } 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() { localStorage.removeItem('authorized'); window.location.assign('{info:logoutUrl??}' + "?" + '{info:postLogoutUriParam??}' + "=" + "http%3A%2F%2Flocalhost%3A" + port + encodedDevRoot + "%2Fio.quarkus.quarkus-oidc%2Fprovider" + "&" + "id_token_hint" + "=" + idToken); } function exchangeCodeForTokens(code){ $.post("exchangeCodeForTokens", { tokenUrl: '{info:tokenUrl??}', client: '{info:clientId}', clientSecret: '{info:clientSecret}', authorizationCode: code, redirectUri: "http://localhost:" + port + devRoot + "/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; } else if (jsonPayload.name) { userName = jsonPayload.name; } 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; } } function printLoginError(){ var search = window.location.search; var errorDescription = search.match(/error_description=([^&]+)/)[1]; $('#errorDescription').append(""); $('#errorDescription').append("" + "Login error: " + decodeURI(errorDescription).replaceAll("+", " ") + ""); } {/if} {/if} {#if info:oidcApplicationType is 'web-app'} function signInToService(servicePath) { window.open("http://localhost:" + port + servicePath); } {/if} {#if info:oidcGrantType is 'password'} function testServiceWithPassword(userName, password, servicePath){ $.post("testService", { tokenUrl: '{info:tokenUrl??}', serviceUrl: "http://localhost:" + port + servicePath, client: '{info:clientId}', clientSecret: '{info:clientSecret}', user: userName, password: password, grant: '{info:oidcGrantType}' }, function(data, status){ printResponseData(data, "User: " + userName + ", " + "service path: " + servicePath); }); } function testServiceWithPasswordInSwaggerUi(userName, password){ $.post("testService", { tokenUrl: '{info:tokenUrl??}', client: '{info:clientId}', clientSecret: '{info:clientSecret}', user: userName, password: password, grant: '{info:oidcGrantType}' }, function(data, status){ navigateToSwaggerUiWithToken(data); }); } function testServiceWithPasswordInGraphQLUi(userName){ $.post("testService", { tokenUrl: '{info:tokenUrl??}', client: '{info:clientId}', clientSecret: '{info:clientSecret}', user: userName, grant: '{info:oidcGrantType}' }, function(data, status){ navigateToGraphQLUiWithToken(data); }); } {/if} {#if info:oidcGrantType is 'client_credentials'} function testServiceWithClientCredentials(servicePath) { $.post("testService", { tokenUrl: '{info:tokenUrl??}', serviceUrl: "http://localhost:" + port + servicePath, client: '{info:clientId}', clientSecret: '{info:clientSecret}', grant: '{info:oidcGrantType}' }, function(data, status){ printResponseData(data, "Service path: " + servicePath); }); } function testServiceWithClientCredentialsInSwaggerUi(){ $.post("testService", { tokenUrl: '{info:tokenUrl??}', client: '{info:clientId}', clientSecret: '{info:clientSecret}', grant: '{info:oidcGrantType}' }, function(data, status){ navigateToSwaggerUiWithToken(data); }); } function testServiceWithClientCredentialsInGraphQLUi(){ $.post("testService", { tokenUrl: '{info:tokenUrl??}', client: '{info:clientId}', clientSecret: '{info:clientSecret}', grant: '{info:oidcGrantType}' }, function(data, status){ navigateToGraphQLUiWithToken(data); }); } {/if} function navigateToSwaggerUiWithToken(token){ {#if info:swaggerIsAvailable??} var url = "{config:http-path('quarkus.swagger-ui.path')}"; var authorizedValue = { "SecurityScheme":{ "schema":{ "flow":"implicit", "authorizationUrl":"{info:authorizationUrl??}", "tokenUrl":"{info:tokenUrl??}", "type":"oauth2", "description":"Authentication" }, "clientId":"{info:clientId}", "name":"SecurityScheme", "token":{ "access_token":token, "token_type":"Bearer", "expires_in":"900" } } }; localStorage.setItem('authorized', JSON.stringify(authorizedValue)); window.open(url, '_blank').focus(); {/if} } function navigateToGraphQLUiWithToken(token){ {#if info:graphqlIsAvailable??} var url = "{config:http-path('quarkus.smallrye-graphql.ui.root-path')}"; var headerJson = '{"authorization": "Bearer ' + token + '"}'; url = url + '/?' + encodeURIComponent('headers') + '=' + encodeURIComponent(headerJson); window.open(url, '_blank').focus(); {/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 getServicePath() { var servicePath = $('#servicePath').val(); return servicePath.startsWith("/") ? servicePath : ("/" + servicePath); } function clearResults() { $('#results').text(''); } {/script} {#body}

{#if info:keycloakAdminUrl??}

Keycloak Admin
{/if}
{#if info:oidcApplicationType?? is 'service' || info:oidcApplicationType?? is 'hybrid'} {#if info:oidcGrantType is 'implicit' || info:oidcGrantType is 'code'}
Your tokens
{#if info:logoutUrl??} {/if}
Encoded

Decoded


Encoded

Decoded


Test your service
{#if info:swaggerIsAvailable??} Swagger UI {/if} {#if info:graphqlIsAvailable??} GraphQL UI {/if}

{#else if info:oidcGrantType is 'password'}
Get access token and test your service
{#if info:swaggerIsAvailable??} Swagger UI {/if} {#if info:graphqlIsAvailable??} GraphQL UI {/if}

{#else if info:oidcGrantType is 'client_credentials'}
Get access token for the client {info:clientId} and test your service
{#if info:swaggerIsAvailable??} Swagger UI {/if} {#if info:graphqlIsAvailable??} GraphQL UI {/if}

{/if} {#else}
{/if}
{/body} {/include}