modified layout, added curl examples
This commit is contained in:
parent
7a57ca9a95
commit
2ac68f0690
|
@ -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> https://api.esempio.com/userinfo</code>
|
||||
<code id="usage_token" class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br> 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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue