gCubeSystem
/
rpt-token-portlet
16
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modified layout, added curl examples

This commit is contained in:
Alfredo Oliviero 2024-03-07 15:21:24 +01:00
parent 7a57ca9a95
commit 2ac68f0690
1 changed files with 170 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
src/main/webapp/html/rpttokenreader/view.jsp
View File

@ -37,9 +37,13 @@ pageContext.setAttribute("userContexts", userContexts);
function initForm() { function initForm() {
$('#response_group').hide(); $('#response_group').hide();
$('#error_msg').hide(); $('#error_msg').hide();
$('#rawTokenResult').hide(); $('#rawTokenResult').hide();
openInfo('intro_info')
closeInfo('token_info')
closeInfo('refresh_token_info')
closeInfo('refresh')
console.log("hided response_group") console.log("hided response_group")
} }
@ -57,8 +61,6 @@ pageContext.setAttribute("userContexts", userContexts);
$('#refresh_token_url').html(''); $('#refresh_token_url').html('');
$('#client_id').html(''); $('#client_id').html('');
} }
function setResults(resultObject) { function setResults(resultObject) {
@ -71,7 +73,8 @@ pageContext.setAttribute("userContexts", userContexts);
$('#refresh_token_url').text(resultObject.token_url); $('#refresh_token_url').text(resultObject.token_url);
$('#client_id').text(resultObject.client_id); $('#client_id').text(resultObject.client_id);
$('#refresh_usage_info').html(generateRefreshCurl("[CLIENT_ID]", "[REFRESH_TOKEN]", "[REFRESH_URL]")) $('#usage_token').html(generateAccessCurl("[REFRESH_TOKEN]", "[SERVICE_URL]"))
$('#usage_refresh').html(generateRefreshCurl("[CLIENT_ID]", "[REFRESH_TOKEN]", "[REFRESH_URL]"))
var raw = JSON.parse(resultObject.raw_token) var raw = JSON.parse(resultObject.raw_token)
@ -95,6 +98,10 @@ pageContext.setAttribute("userContexts", userContexts);
$('#response_group').show(); $('#response_group').show();
console.log("resultObject", resultObject) console.log("resultObject", resultObject)
closeInfo('intro_info', false);
openInfo('token_info', true);
openInfo('refresh_token_info', true);
} }
function setError(error_comment) { function setError(error_comment) {
@ -142,10 +149,19 @@ pageContext.setAttribute("userContexts", userContexts);
}); });
} }
function toggleInfo(destination_id) {
$("#" + destination_id).toggle();
}
function openInfo(destination_id) {
toggleInfo(destination_id, true)
}
function closeInfo(destination_id, do_switch) {
toggleInfo(destination_id, false)
}
function toggleInfo(destination_id, do_switch) {
$("#" + destination_id).toggle(do_switch);
do_switch = $("#" + destination_id).css('display') != 'none';
$("#" + destination_id + "_icon").toggleClass("icon-chevron-up", !do_switch);
$("#" + destination_id + "_icon").toggleClass("icon-chevron-down", do_switch);
}
function decodeFunction(text_id) { function decodeFunction(text_id) {
var decode_text = $("#" + text_id).val(); var decode_text = $("#" + text_id).val();
@ -154,10 +170,19 @@ pageContext.setAttribute("userContexts", userContexts);
'_blank' '_blank'
); );
} }
function generateAccessCurl(token, service_url) {
return "curl -X GET -H 'Authorization: Bearer " + token + "' \\\n"
+ "\t " + service_url
}
function generateRefreshCurl(client_id, refresh_token, refresh_url) { function generateRefreshCurl(client_id, refresh_token, refresh_url) {
return "curl --location '" + refresh_url + "' \\\n" + return "curl -X POST --location '" + refresh_url + "' \\\n" +
"\t--header 'Content-Type: application/x-www-form-urlencoded' \\\n" + // "\t--header 'Content-Type: application/x-www-form-urlencoded' \\\n" +
"\t--data-urlencode 'grant_type=refresh_token' \\\n" + "\t--data-urlencode 'grant_type=refresh_token' \\\n" +
"\t--data-urlencode 'client_id=" + client_id + "' \\\n" + "\t--data-urlencode 'client_id=" + client_id + "' \\\n" +
"\t--data-urlencode 'refresh_token=" + refresh_token + "' " "\t--data-urlencode 'refresh_token=" + refresh_token + "' "
@ -178,7 +203,38 @@ pageContext.setAttribute("userContexts", userContexts);
document.addEventListener("copy", listener); document.addEventListener("copy", listener);
document.execCommand("copy"); document.execCommand("copy");
document.removeEventListener("copy", listener); document.removeEventListener("copy", listener);
navigator.clipboard.writeText(text).then(function () {
/* clipboard successfully set */
}, function () {
/* clipboard write failed */
});
} }
function copyAccessCurl() {
// ***.dev.d4science.org => api.dev.d4science.org
// ***.pre.d4science.org => api.pre.d4science.org
// xxx.d4science.org => api.d4science.org
var client_id = global_token_response.client_id;
var service_path = "api.d4science.org";
if (client_id.endsWith("dev.d4science.org")){
service_path = "api.dev.d4science.org";
} else if (client_id.endsWith("pre.d4science.org")){
service_path = "api.pre.d4science.org";
}
var curl = generateAccessCurl(
global_token_response.access_token,
"https://" + service_path + "/catalogue/items");
copyText(curl);
}
function copyRefreshCurl() { function copyRefreshCurl() {
var curl = generateRefreshCurl( var curl = generateRefreshCurl(
global_token_response.client_id, global_token_response.client_id,
@ -188,7 +244,7 @@ pageContext.setAttribute("userContexts", userContexts);
copyText(curl); copyText(curl);
} }
function copyFunction(text_id) { function copyFromTextField(text_id) {
/* Get the text field */ /* Get the text field */
var copyText = document.getElementById(text_id); var copyText = document.getElementById(text_id);
@ -233,33 +289,52 @@ pageContext.setAttribute("userContexts", userContexts);
class="btn btn-primary" onClick="getUMAToken('${resourceURL}')">Get class="btn btn-primary" onClick="getUMAToken('${resourceURL}')">Get
Token</button> Token</button>
</c:if> </c:if>
<button id="buttonInfo" class="btn btn-small pull-right"
onclick="toggleInfo('intro')" title="Toggle infos" alt="Toggle infos">
<i class="icon-info"></i>
</button>
</div> </div>
</div> </div>
</div>
<br> <br>
<div id="intro" class="well well-small"> <div class="well well-small" id="intro_container">
Obtain your personal OAuth2 Access and Refresh Tokens, to be used for <div class="row" onclick="toggleInfo('intro_info')">
programmatic <span><b>Instructions</b></span>
interaction with the services. <i id="intro_info_icon" class="icon-chevron-down pull-right"></i>
<br> Do not use this token to authenticate services but only for personal access </div>
<div id="intro_info" class="well well-small bg_white">
<p>Obtain your personal OAuth2 Access and Refresh Tokens, to be used for
programmatic interaction with the D4Science Resources</p>
<p> Do not use this token to authenticate services but only for personal
access
</p>
<p>
ref:
<ul>
<li><a href="https://dev.d4science.org/how-to-access-resources">D4Science:
Accessing Resources - how to</a></li>
<li><a
href="https://www.oauth.com/oauth2-servers/making-authenticated-requests">OAuth2:
Making Authenticated Requests</a></li>
<li><a
href="https://www.oauth.com/oauth2-servers/making-authenticated-requests/refreshing-an-access-token/">OAuth2:
Refresh Tokens</a></li>
</ul>
</p>
</div> </div>
</div> </div>
<div id="response_group"> <div id="response_group">
<div id="response_group_token" class="well well-small bg_white">
<div id="response_group_token" class="well well-small">
<div class="row"> <div class="row">
<div class="control-label span9">OAuth Access Token (Bearer Authorization) <span class="span9"><b>OAuth Access Token <br> (Bearer Authorization)</b></span>
</div> <button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right span2"
<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right" onclick="toggleInfo('token_info')" title="Toggle infos"
onclick="toggleInfo('tokenResultInfo')" title="Toggle infos"
alt="Toggle infos"> alt="Toggle infos">
<i class="icon-info"></i> <i class="icon-info"></i>
<i id="token_info_icon" class="icon-chevron-down"></i>
</button> </button>
</div> </div>
<textarea rows="2" id="tokenResult" class="disabled span12" readonly></textarea> <textarea rows=" 2" id="tokenResult" class="disabled span12" readonly></textarea>
<div class="row"> <div class="row">
<span class="help-block span9" id='tokenResultDetails'></span> <span class="help-block span9" id='tokenResultDetails'></span>
<div class="btn-group btn-group span2"> <div class="btn-group btn-group span2">
@ -268,38 +343,51 @@ pageContext.setAttribute("userContexts", userContexts);
<i class="icon-list"></i> <i class="icon-list"></i>
</button> </button>
<button id="buttonCopy" data-toggle="tooltip" class="btn btn-small" <button id="buttonCopy" data-toggle="tooltip" class="btn btn-small"
onclick="copyFunction('tokenResult')" title="Copy" alt="Copy"> onclick="copyFromTextField('tokenResult')" title="Copy" alt="Copy">
<i class="icon-copy"></i> <i class="icon-copy"></i>
</button> </button>
</div> </div>
</div> </div>
<div id="tokenResultInfo" style="display: none;" class="well well-small"> <div id="token_info" style="display: none;" class="well well-small bg_white">
<p>Personal Token used to access protected resources</p> <p>Personal Token used to access protected resources</p>
<p>The token has a limited lifespan and must be included as a Bearer token <p>The token has a limited lifespan and must be included as a Bearer
in the Authorization header of the request"</p> token
in the Authorization header of the http request"</p>
<p>usage:<br> <p>usage:<br>
<code <code id="usage_token" class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br>&emsp;https://api.esempio.com/userinfo</code>
class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br>&emsp;https://api.esempio.com/userinfo</code>
</p> </p>
<p>
ref: <a ref: <a
href="https://oauth.net/2/access-tokens">https://oauth.net/2/access-tokens/ href="https://oauth.net/2/access-tokens">https://oauth.net/2/access-tokens/
</a> </a>
</p>
<div class="row">
generate curl access request example: <button id="buttonGeneratAccessCurl"
data-toggle="tooltip" class="btn btn-small pull-right"
onclick="copyAccessCurl()" title="Copy to clipboard"
alt="Copy to clipboard">
<i class="icon-copy"></i>
</button>
</div>
</div> </div>
</div> </div>
<div id="response_group_refreshToken" class="well well-small bg_white"> <div id="response_group_refreshToken" class="well well-small">
<div class="row"> <div class="row">
<div class="control-label span9">Oauth2 Refresh Token <span span9><b>Oauth2 Refresh Token</b></span>
</div>
<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right" <button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right"
onclick="toggleInfo('refreshTokenResultInfo')" title="Toggle infos" onclick="toggleInfo('refresh_token_info')" title="Toggle infos"
alt="Toggle infos"> alt="Toggle infos">
<i class="icon-info"></i> <i class="icon-info"></i>
<i id="refresh_token_info_icon" class="icon-chevron-down"></i>
</button> </button>
</div> </div>
<textarea rows="2" id="refreshTokenResult" class="disabled span12" readonly></textarea> <textarea rows=" 2" id="refreshTokenResult" class="disabled span12"
readonly></textarea>
<div class="row"> <div class="row">
<span class="help-block span9" id='refreshTokenResultDetails'></span> <span class="help-block span9" id='refreshTokenResultDetails'></span>
<div class="btn-group btn-group span2"> <div class="btn-group btn-group span2">
@ -309,57 +397,73 @@ pageContext.setAttribute("userContexts", userContexts);
<i class="icon-list"></i> <i class="icon-list"></i>
</button> </button>
<button id="buttonCopy" data-toggle="tooltip" class="btn btn-small" <button id="buttonCopy" data-toggle="tooltip" class="btn btn-small"
onclick="copyFunction('refreshTokenResult')" title="Copy" alt="Copy"> onclick="copyFromTextField('refreshTokenResult')" title="Copy"
alt="Copy">
<i class="icon-copy"></i> <i class="icon-copy"></i>
</button> </button>
</div> </div>
</div> </div>
<div id="refreshTokenResultInfo" style="display: none;" class="well well-small"> <div id="refresh_token_info" style="display: none;" class="well well-small bg_white">
<p>Use this token to programmaticaly refresh the Access token.</p> <p>Use this token to programmaticaly refresh the Access token.
</p>
<p>usage:<br> <p>usage:<br>
<code class="wraptext" id="refresh_usage_info"></code> <code class="wraptext" id="usage_refresh"></code>
</p> </p>
ref: <a href="https: //oauth.net/2/refresh-tokens/"> ref: <a href="https: //oauth.net/2/refresh-tokens/">
https://oauth.net/2/refresh-tokens/</a> https://oauth.net/2/refresh-tokens/</a>
<div class="row">
generate curl refresh request: <button id="buttonGenerateRefreshCurl"
data-toggle="tooltip" class="btn btn-small pull-right"
onclick="copyRefreshCurl()" title="Copy to clipboard"
alt="Copy to clipboard">
<i class="icon-copy"></i>
</button>
</div>
</div> </div>
</div> </div>
<div id="parameters" class="well well-small bg_white"> <div id="parameters" class="well well-small">
<div class="control-label ">Refresh parameters</div> <div class="row" onclick="toggleInfo('refresh')">
<span><b>Refresh parameters</b></span>
<i id="refresh_icon" class="icon-chevron-down pull-right"></i>
</div>
<div id="refresh">
<div class="row"> <div class="row">
refresh token url: <code class="wraptext" id="refresh_token_url"></code> <br>
<button id="refresh_token_url_copy" data-toggle="tooltip" refresh token url: <code class="wraptext" id="refresh_token_url"></code>
class="btn btn-small pull-right" <button id="refresh_token_url_copy" data-toggle="tooltip"
onclick="copyText(global_token_response.token_url)" class="btn btn-small pull-right"
title="copy refresh token url" alt="copy refresh token url"> onclick="copyText(global_token_response.token_url)"
<i class="icon-copy"></i> title="copy refresh token url" alt="copy refresh token url">
</button> <i class="icon-copy"></i>
</button>
</div> </div>
<div class="row"> <div class="row">
client_id: <code class="wraptext" id="client_id"></code> <button client_id: <code class="wraptext" id="client_id"></code> <button
id="client_id_copy" data-toggle="tooltip" class="btn btn-small pull-right" id="client_id_copy" data-toggle="tooltip" class="btn btn-small pull-right"
onclick="copyText(global_token_response.client_id)" onclick="copyText(global_token_response.client_id)"
title="copy refresh token url" alt="copy refresh token url"> title="copy refresh token url" alt="copy refresh token url">
<i class="icon-copy"></i> <i class="icon-copy"></i>
</button><br> </button><br>
</div> </div>
<div class="row"> <div class="row">
curl refresh request (copy): <button id="buttonGenerateRefreshCurl" generate curl refresh request: <button id="buttonGenerateRefreshCurl"
data-toggle="tooltip" class="btn btn-small pull-right" onclick="copyRefreshCurl()" data-toggle="tooltip" class="btn btn-small pull-right"
title="geneate refresh curl" alt="Generate refresh curl"> onclick="copyRefreshCurl()" title="Copy to clipboard"
<i class="icon-copy"></i> alt="Copy to clipboard">
</button> <i class="icon-copy"></i>
</button>
</div> </div>
</div> </div>
</div>
<div id="div_decode"> <div id="div_decode">
You can decode the tokens using <a href="https://jwt.io/#debugger-io" target="blank">https://jwt.io/</a> You can decode the tokens using <a href="https://jwt.io/#debugger-io"
target="blank">https://jwt.io/</a>
</div> </div>
</div> </div>