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

View File

@ -37,9 +37,13 @@ pageContext.setAttribute("userContexts", userContexts);
function initForm() {
$('#response_group').hide();
$('#error_msg').hide();
$('#rawTokenResult').hide();
openInfo('intro_info')
closeInfo('token_info')
closeInfo('refresh_token_info')
closeInfo('refresh')
console.log("hided response_group")
}
@ -57,8 +61,6 @@ pageContext.setAttribute("userContexts", userContexts);
$('#refresh_token_url').html('');
$('#client_id').html('');
}
function setResults(resultObject) {
@ -71,7 +73,8 @@ pageContext.setAttribute("userContexts", userContexts);
$('#refresh_token_url').text(resultObject.token_url);
$('#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)
@ -95,6 +98,10 @@ pageContext.setAttribute("userContexts", userContexts);
$('#response_group').show();
console.log("resultObject", resultObject)
closeInfo('intro_info', false);
openInfo('token_info', true);
openInfo('refresh_token_info', true);
}
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) {
var decode_text = $("#" + text_id).val();
@ -154,10 +170,19 @@ pageContext.setAttribute("userContexts", userContexts);
'_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) {
return "curl --location '" + refresh_url + "' \\\n" +
"\t--header 'Content-Type: application/x-www-form-urlencoded' \\\n" +
return "curl -X POST --location '" + refresh_url + "' \\\n" +
// "\t--header 'Content-Type: application/x-www-form-urlencoded' \\\n" +
"\t--data-urlencode 'grant_type=refresh_token' \\\n" +
"\t--data-urlencode 'client_id=" + client_id + "' \\\n" +
"\t--data-urlencode 'refresh_token=" + refresh_token + "' "
@ -178,7 +203,38 @@ pageContext.setAttribute("userContexts", userContexts);
document.addEventListener("copy", listener);
document.execCommand("copy");
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() {
var curl = generateRefreshCurl(
global_token_response.client_id,
@ -188,7 +244,7 @@ pageContext.setAttribute("userContexts", userContexts);
copyText(curl);
}
function copyFunction(text_id) {
function copyFromTextField(text_id) {
/* Get the text field */
var copyText = document.getElementById(text_id);
@ -233,33 +289,52 @@ pageContext.setAttribute("userContexts", userContexts);
class="btn btn-primary" onClick="getUMAToken('${resourceURL}')">Get
Token</button>
</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>
<br>
<div id="intro" class="well well-small">
Obtain your personal OAuth2 Access and Refresh Tokens, to be used for
programmatic
interaction with the services.
<br> Do not use this token to authenticate services but only for personal access
<div class="well well-small" id="intro_container">
<div class="row" onclick="toggleInfo('intro_info')">
<span><b>Instructions</b></span>
<i id="intro_info_icon" class="icon-chevron-down pull-right"></i>
</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 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="control-label span9">OAuth Access Token (Bearer Authorization)
</div>
<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right"
onclick="toggleInfo('tokenResultInfo')" title="Toggle infos"
<span class="span9"><b>OAuth Access Token <br> (Bearer Authorization)</b></span>
<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right span2"
onclick="toggleInfo('token_info')" title="Toggle infos"
alt="Toggle infos">
<i class="icon-info"></i>
<i id="token_info_icon" class="icon-chevron-down"></i>
</button>
</div>
<textarea rows="2" id="tokenResult" class="disabled span12" readonly></textarea>
<textarea rows=" 2" id="tokenResult" class="disabled span12" readonly></textarea>
<div class="row">
<span class="help-block span9" id='tokenResultDetails'></span>
<div class="btn-group btn-group span2">
@ -268,38 +343,51 @@ pageContext.setAttribute("userContexts", userContexts);
<i class="icon-list"></i>
</button>
<button id="buttonCopy" data-toggle="tooltip" class="btn btn-small"
onclick="copyFunction('tokenResult')" title="Copy" alt="Copy">
<i class="icon-copy"></i>
</button>
onclick="copyFromTextField('tokenResult')" title="Copy" alt="Copy">
<i class="icon-copy"></i>
</button>
</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>The token has a limited lifespan and must be included as a Bearer token
in the Authorization header of the request"</p>
<p>The token has a limited lifespan and must be included as a Bearer
token
in the Authorization header of the http request"</p>
<p>usage:<br>
<code
class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br>&emsp;https://api.esempio.com/userinfo</code>
<code id="usage_token" class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br>&emsp;https://api.esempio.com/userinfo</code>
</p>
<p>
ref: <a
href="https://oauth.net/2/access-tokens">https://oauth.net/2/access-tokens/
</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 id="response_group_refreshToken" class="well well-small bg_white">
<div id="response_group_refreshToken" class="well well-small">
<div class="row">
<div class="control-label span9">Oauth2 Refresh Token
</div>
<span span9><b>Oauth2 Refresh Token</b></span>
<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">
<i class="icon-info"></i>
<i id="refresh_token_info_icon" class="icon-chevron-down"></i>
</button>
</div>
<textarea rows="2" id="refreshTokenResult" class="disabled span12" readonly></textarea>
<textarea rows=" 2" id="refreshTokenResult" class="disabled span12"
readonly></textarea>
<div class="row">
<span class="help-block span9" id='refreshTokenResultDetails'></span>
<div class="btn-group btn-group span2">
@ -309,57 +397,73 @@ pageContext.setAttribute("userContexts", userContexts);
<i class="icon-list"></i>
</button>
<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>
</button>
</div>
</div>
<div id="refreshTokenResultInfo" style="display: none;" class="well well-small">
<p>Use this token to programmaticaly refresh the Access token.</p>
<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>usage:<br>
<code class="wraptext" id="refresh_usage_info"></code>
<code class="wraptext" id="usage_refresh"></code>
</p>
ref: <a href="https: //oauth.net/2/refresh-tokens/">
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 id="parameters" class="well well-small bg_white">
<div class="control-label ">Refresh parameters</div>
<div id="parameters" class="well well-small">
<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">
refresh token url: <code class="wraptext" id="refresh_token_url"></code>
<button id="refresh_token_url_copy" data-toggle="tooltip"
class="btn btn-small pull-right"
onclick="copyText(global_token_response.token_url)"
title="copy refresh token url" alt="copy refresh token url">
<i class="icon-copy"></i>
</button>
<br>
refresh token url: <code class="wraptext" id="refresh_token_url"></code>
<button id="refresh_token_url_copy" data-toggle="tooltip"
class="btn btn-small pull-right"
onclick="copyText(global_token_response.token_url)"
title="copy refresh token url" alt="copy refresh token url">
<i class="icon-copy"></i>
</button>
</div>
<div class="row">
client_id: <code class="wraptext" id="client_id"></code> <button
id="client_id_copy" data-toggle="tooltip" class="btn btn-small pull-right"
onclick="copyText(global_token_response.client_id)"
title="copy refresh token url" alt="copy refresh token url">
<i class="icon-copy"></i>
</button><br>
client_id: <code class="wraptext" id="client_id"></code> <button
id="client_id_copy" data-toggle="tooltip" class="btn btn-small pull-right"
onclick="copyText(global_token_response.client_id)"
title="copy refresh token url" alt="copy refresh token url">
<i class="icon-copy"></i>
</button><br>
</div>
<div class="row">
curl refresh request (copy): <button id="buttonGenerateRefreshCurl"
data-toggle="tooltip" class="btn btn-small pull-right" onclick="copyRefreshCurl()"
title="geneate refresh curl" alt="Generate refresh curl">
<i class="icon-copy"></i>
</button>
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 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>