Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev UI Keycloak token improvements #19122

Merged
merged 1 commit into from
Jul 30, 2021
Merged

Dev UI Keycloak token improvements #19122

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 105 additions & 47 deletions extensions/oidc/deployment/src/main/resources/dev-templates/provider.html
View file
Open in desktop
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