Skip to content

Commit

Permalink
Merge pull request #19122 from phillip-kruger/oidc-dev-ui
Browse files Browse the repository at this point in the history 
Dev UI Keycloak token improvements
  • Loading branch information
@geoand
geoand authored Jul 30, 2021
2 parents 7d55cc7 + 3b8ab78 commit 8ff2b3b
Showing 1 changed file with 105 additions and 47 deletions.
152 changes: 105 additions & 47 deletions extensions/oidc/deployment/src/main/resources/dev-templates/provider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
var hash = window.location.hash;
accessToken = hash.match(/access_token=([^&]+)/)[1];
idToken = hash.match(/id_token=([^&]+)/)[1];
$('#accessTokenArea').text(decodeToken(accessToken));
$('#idTokenArea').text(decodeToken(idToken));
$('#accessTokenEncodedArea').html(prettyToken(accessToken));
$('#accessTokenDecodedArea').html(decodeToken(accessToken));
$('#idTokenEncodedArea').html(prettyToken(idToken));
$('#idTokenDecodedArea').html(decodeToken(idToken));
}else if(codeInUrl()){
loggedIn === true;
$('.implicitLoggedOut').hide();
Expand All @@ -34,8 +36,10 @@
accessToken = null;
idToken = null;
userName = null;
$('#accessTokenArea').text('');
$('#idTokenArea').text('');
$('#accessTokenEncodedArea').text('');
$('#accessTokenDecodedArea').text('');
$('#idTokenEncodedArea').text('');
$('#idTokenDecodedArea').text('');

}
});
Expand Down Expand Up @@ -152,28 +156,47 @@
var tokens = JSON.parse(data);
accessToken = tokens.access_token
idToken = tokens.id_token
$('#accessTokenArea').text(decodeToken(accessToken));
$('#idTokenArea').text(decodeToken(idToken));
$('#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) {
$('#userName').append("<span class='text-primary px-1'>" + "as " + userName + "</span>");
}
}
return JSON.stringify(JSON.parse(headers), null, '\t') + "\r\n.\r\n" + JSON.stringify(jsonPayload,null,'\t') + "\r\n.\r\n" + parts[2];
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("<i class='fas fa-lock fa-xs'></i> Logged in as " + userName);
}
}
return "<pre class='text-danger' title='Header'>" +
JSON.stringify(JSON.parse(headers), null, 4) +
"</pre><pre class='text-success' title='Payload'>" +
JSON.stringify(jsonPayload,null,4) + "</pre><span class='text-primary' title='Signature'>" +
parts[2] + "</span>";
} 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 "<span class='text-danger' title='Header'>" + parts[0] + "</span>.<span class='text-success' title='Payload'>" + parts[1] + "</span>.<span class='text-primary' title='Signature'>" + parts[2] + "</span>";
} else {
return token;
}
Expand Down Expand Up @@ -264,42 +287,77 @@
Your tokens
</div>
<div class="float-right">
<a onclick="logout();" class="btn btn-link" title="Click to logout and start again">
<i class="fas fa-lock fa-xs"></i> Logged in<div class="bg-light" id="userName"></div>
<a id="loggedInUser" onclick="logout();" class="btn btn-link" title="Click to logout and start again">

</a>
</div>
</div>
<div class="card-body">
<a class="btn btn-link shadow-none" data-toggle="collapse" href="#collapseAccessToken" role="button" aria-expanded="false" aria-controls="collapseAccessToken">
View Access Token
</a>
<div class="card-body mx-0 px-0">
<div class="clearfix">
<a class="btn btn-link shadow-none float-left" data-toggle="collapse" href="#collapseAccessToken" role="button" aria-expanded="false" aria-controls="collapseAccessToken">
View Access Token
</a>
<a class="btn btn-link shadow-none text-secondary float-right" title="Copy to clipboard" onclick="accessTokenToClipboard();">
<i class="fas fa-clipboard"></i>
</a>
</div>

<div class="collapse" id="collapseAccessToken">
<div class="card card-body bg-dark">
<pre id="accessTokenArea" class="text-light text-monospace user-select-all">

</pre>
<a class="btn btn-link shadow-none text-right text-secondary" title="Copy to clipboard" onclick="accessTokenToClipboard();">
<i class="fas fa-clipboard"></i>
</a>

<div class="card card-body bg-dark border-0 m-0 p-0">
<div class="card-group border-0 m-0 p-0">
<div class="card border-0 m-0">
<div class="card-body bg-dark">
<h5 class="card-title text-light">Encoded</h5>
<p id="accessTokenEncodedArea" class="text-wrap text-break bg-dark text-light text-monospace user-select-all mp-0">

</p>
</div>
</div>
<div class="card border-0 m-0">
<div class="card-body bg-dark">
<h5 class="card-title text-light">Decoded</h5>
<p id="accessTokenDecodedArea" class="text-wrap bg-dark text-light text-monospace user-select-auto mp-0">

</p>
</div>
</div>

</div>
</div>
</div>
<br/>

<a class="btn btn-link shadow-none" data-toggle="collapse" href="#collapseIdToken" role="button" aria-expanded="false" aria-controls="collapseIdToken">
View ID Token
</a>
<div class="clearfix">
<a class="btn btn-link shadow-none float-left" data-toggle="collapse" href="#collapseIdToken" role="button" aria-expanded="false" aria-controls="collapseIdToken">
View ID Token
</a>
<a class="btn btn-link shadow-none text-secondary float-right" title="Copy to clipboard" onclick="idTokenToClipboard();">
<i class="fas fa-clipboard"></i>
</a>
</div>

<div class="collapse" id="collapseIdToken">
<div class="card card-body bg-dark">
<pre id="idTokenArea" class="text-light text-monospace user-select-all">

</pre>

<a class="btn btn-link shadow-none text-right text-secondary" title="Copy to clipboard" onclick="idTokenToClipboard();">
<i class="fas fa-clipboard"></i>
</a>
<div class="card card-body bg-dark border-0 m-0 p-0">
<div class="card-group border-0 m-0 p-0">
<div class="card border-0 m-0">
<div class="card-body bg-dark">
<h5 class="card-title text-light">Encoded</h5>
<p id="idTokenEncodedArea" class="text-wrap text-break bg-dark text-light text-monospace user-select-all mp-0">

</p>
</div>
</div>
<div class="card border-0 m-0">
<div class="card-body bg-dark">
<h5 class="card-title text-light">Decoded</h5>
<p id="idTokenDecodedArea" class="text-wrap bg-dark text-light text-monospace user-select-auto mp-0">

</p>
</div>
</div>

</div>
</div>

</div>
</div>
</div>
Expand All @@ -308,7 +366,7 @@
<div class="card-header">
Test your service
</div>
<div class="card-body">
<div class="card-body border-0">
<div class="row">
<div class="col-2">
<label for="servicePath">Service Path</label>
Expand Down

0 comments on commit 8ff2b3b

Please sign in to comment.