128 lines
5.5 KiB
HTML
128 lines
5.5 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>OAuth2 Demo Login</title>
|
|
<link rel="stylesheet" href="brutalist.css" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="./infos.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
</script>
|
|
<h1>Yolo App login page</h1>
|
|
<p>Authorization process done!</p>
|
|
<a href="/index.html">← go back to main page</a>
|
|
<h2>Authorization Status</h2>
|
|
<pre class="code" id="authorization_status"></pre>
|
|
<div id="error-info"></div>
|
|
<h3>State</h3>
|
|
The process should also return the state provided.
|
|
<pre class="code" id="state-param"></pre>
|
|
<div id="onaccesstoken">
|
|
<h2>Access Token</h2>
|
|
<p>The access token is generated by the Authentication server and
|
|
send back to the client via the resource's owner user-agent</p>
|
|
<p>Access tokens live a short time (about 10 min to 1 hour)</p>
|
|
<p>For us, it is a JWT:</p>
|
|
<pre class="code" id="accesstoken-param"></pre>
|
|
<p>Which once decoded is:</p>
|
|
<pre class="code" id="accesstoken-token"></pre>
|
|
<h2>Using the API</h2>
|
|
<h2>API Call</h2>
|
|
<p>API URL: <code id="apiurl" class="code">Nothing yet.</code></p>
|
|
<div class="button"
|
|
onclick="makeApiCall();">
|
|
Make an API call with the access token
|
|
</div>
|
|
<p>API URL: <code id="apiurl" class="code">Nothing yet.</code></p>
|
|
<pre id="apiresponse" class="code">Nothing yet.</pre>
|
|
</div>
|
|
<script>
|
|
/* ----- */
|
|
function getJsonFromUrl() {
|
|
var query = location.search.substr(1);
|
|
var result = {};
|
|
query.split("&").forEach(function(part) {
|
|
var item = part.split("=");
|
|
result[item[0]] = decodeURIComponent(item[1]);
|
|
});
|
|
return result;
|
|
}
|
|
function getHashParams() {
|
|
var hashParams={};
|
|
var e,
|
|
a = /\+/g, // Regex for replacing addition symbol with a space
|
|
r = /([^&;=]+)=?([^&;]*)/g,
|
|
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
|
q = window.location.hash.substring(1);
|
|
while (e = r.exec(q))
|
|
hashParams[d(e[1])] = d(e[2]);
|
|
return hashParams;
|
|
}
|
|
var params=getHashParams();
|
|
var authstatus="";
|
|
if (params.error) {
|
|
authstatus = "REFUSED: " + params.error;
|
|
if (params.error_description) {
|
|
authstatus += "\n\n" + params.error_description;
|
|
}
|
|
if (params.invalid_parameter) {
|
|
authstatus += "\n\nInvalid parameter: " + params.invalid_parameter;
|
|
}
|
|
if (params.error_uri) {
|
|
authstatus += "\n\n<a href='" + decodeURIComponent(params.error_uri) + "'>" + decodeURIComponent(params.error_uri) + "</a>";
|
|
}
|
|
$('#authorization_status').addClass('refused');
|
|
$('#onaccesstoken').hide();
|
|
} else {
|
|
if (params.access_token) {
|
|
authstatus = "AUTHORIZED" ;
|
|
$('#authorization_status').addClass('authorized');
|
|
} else {
|
|
authstatus = "UNKNOWN" ;
|
|
$('#onaccesstoken').hide();
|
|
$('#state-param').html("No state");
|
|
}
|
|
}
|
|
$('#urltoken').html( oauthServerTokenUrl );
|
|
$('#apiurl').html( resourceProviderTestEndpoint );
|
|
$('#authorization_status').html( authstatus );
|
|
$('#state-param').html(params.state);
|
|
if (params.error_uri) {
|
|
var erroruri=decodeURIComponent(params.error_uri);
|
|
$('#error-info').html("<p>You can have more informations here:</p><a href=\"" + erroruri + "\" target=\"_blank\">" + erroruri + "</a>");
|
|
}
|
|
|
|
function jwtDecode(t) {
|
|
let token = {};
|
|
token.raw = t;
|
|
token.header = JSON.parse(window.atob(t.split('.')[0]));
|
|
token.payload = JSON.parse(window.atob(t.split('.')[1]));
|
|
return (token)
|
|
}
|
|
var jwt=jwtDecode(params.access_token).payload;
|
|
$('#accesstoken-param').html(params.access_token);
|
|
$('#accesstoken-token').html(JSON.stringify(jwt,null,2));
|
|
var accessToken=params.access_token;
|
|
var makeApiCall = function() {
|
|
var onError = function(jqXHR,textStatus,errorThrown){
|
|
$('#apiresponse').html(errorThrown + " status: " + jqXHR.status
|
|
+ "\n---\n"
|
|
+ JSON.stringify(jqXHR.responseJSON,null,2))}
|
|
var onSuccess = function(data,textStatus,jqXHR) {
|
|
$("#apiresponse").html(data
|
|
+ "\n---\n"
|
|
+ JSON.stringify(jqXHR.responseJSON,null,2));}
|
|
$.ajax({
|
|
type: "GET"
|
|
, beforeSend: function(request) {request.setRequestHeader("Authorization","Bearer " + accessToken)}
|
|
, success: onSuccess
|
|
, error: onError
|
|
, url: resourceProviderTestEndpoint
|
|
, contentType: 'application/json'
|
|
, crossDomain: true
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|