yogsototh/oauth2-client-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

show errors if needed

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2018-02-20 13:46:01 +01:00
parent ad1efc44ca
commit 4b7b332fc2
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
2 changed files with 48 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
brutalist.css
View file

@ -64,3 +64,9 @@ pre { padding: 1em;
.code {
word-wrap: break-word; }
.refused {color: #dc322f;
border: solid 8px; }
.authorized {color: #859900;
border: solid 8px; }

64
login.html
View file

@ -7,35 +7,22 @@
</head>
<body>
<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;
}
var params=getJsonFromUrl();
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.code).payload;
</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>
<h3>State</h3>
The process should also return the state provided.
<pre class="code" id="state-param"></pre>
<h2>Code</h2>
<p>The code is generated by the Authentication server and send back
to the client via the resource's owner user-agent</p>
<p>For us, it is a JWT:</p>
<pre class="code"><script>document.write(params.code);</script></pre>
<pre class="code" id="code-param"></pre>
<p>Which once decoded is:</p>
<pre class="code"><script>document.write(JSON.stringify(jwt,null,2));</script></pre>
<pre class="code" id="code-token"></pre>
<h2>Tokens</h2>
<p> Now the client server need to retrieve an <em>Access Token</em>
and a <em>Refresh Token</em> by using that code.</p>
@ -74,6 +61,37 @@
<pre id="refreshed" class="code">Nothing yet.</pre>
<pre id="refreshed-access-token" class="code">Nothing yet.</pre>
<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;
}
var params=getJsonFromUrl();
var authstatus="";
if (params.error) {
authstatus = "REFUSED: " + params.error;
$('#authorization_status').addClass('refused');
} else {
authstatus = "AUTHORIZED" ;
$('#authorization_status').addClass('authorized');
}
$('#authorization_status').html( authstatus );
$('#state-param').html(params.state);
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.code).payload;
$('#code-param').html(params.code);
$('#code-token').html(JSON.stringify(jwt,null,2));
var refreshToken="";
var accessToken="";
var getTokensFromCode = function() {
@ -92,10 +110,8 @@
$("#token").html(data
+ "\n---\n"
+ JSON.stringify(jqXHR.responseJSON,null,2));
$("#access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) );
$("#refresh-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.refresh_token).payload,null,2) );
accessToken=jqXHR.responseJSON.access_token;
refreshToken=jqXHR.responseJSON.refresh_token;
}
@ -110,7 +126,6 @@
, crossDomain: true
});
};
var getAccessToken = function() {
var tokparams={
"refresh_token":refreshToken
@ -126,7 +141,6 @@
$("#refreshed").html(data
+ "\n---\n"
+ JSON.stringify(jqXHR.responseJSON,null,2));
$("#refreshed-access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) );
}
$.ajax({
@ -140,9 +154,7 @@
, crossDomain: true
});
};
var makeApiCall = function() {
var onError = function(jqXHR,textStatus,errorThrown){
$('#apiresponse').html(errorThrown + " status: " + jqXHR.status
+ "\n---\n"