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 { .code {
word-wrap: break-word; } word-wrap: break-word; }
.refused {color: #dc322f;
border: solid 8px; }
.authorized {color: #859900;
border: solid 8px; }

72
login.html
View file

@ -7,35 +7,22 @@
</head> </head>
<body> <body>
<script> <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> </script>
<h1>Yolo App login page</h1> <h1>Yolo App login page</h1>
<p>Authorization process done!</p> <p>Authorization process done!</p>
<a href="/index.html">← go back to main page</a> <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> <h2>Code</h2>
<p>The code is generated by the Authentication server and send back <p>The code is generated by the Authentication server and send back
to the client via the resource's owner user-agent</p> to the client via the resource's owner user-agent</p>
<p>For us, it is a JWT:</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> <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> <h2>Tokens</h2>
<p> Now the client server need to retrieve an <em>Access Token</em> <p> Now the client server need to retrieve an <em>Access Token</em>
and a <em>Refresh Token</em> by using that code.</p> 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" class="code">Nothing yet.</pre>
<pre id="refreshed-access-token" class="code">Nothing yet.</pre> <pre id="refreshed-access-token" class="code">Nothing yet.</pre>
<script> <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 refreshToken="";
var accessToken=""; var accessToken="";
var getTokensFromCode = function() { var getTokensFromCode = function() {
@ -92,10 +110,8 @@
$("#token").html(data $("#token").html(data
+ "\n---\n" + "\n---\n"
+ JSON.stringify(jqXHR.responseJSON,null,2)); + JSON.stringify(jqXHR.responseJSON,null,2));
$("#access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,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) ); $("#refresh-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.refresh_token).payload,null,2) );
accessToken=jqXHR.responseJSON.access_token; accessToken=jqXHR.responseJSON.access_token;
refreshToken=jqXHR.responseJSON.refresh_token; refreshToken=jqXHR.responseJSON.refresh_token;
} }
@ -110,7 +126,6 @@
, crossDomain: true , crossDomain: true
}); });
}; };
var getAccessToken = function() { var getAccessToken = function() {
var tokparams={ var tokparams={
"refresh_token":refreshToken "refresh_token":refreshToken
@ -120,13 +135,12 @@
}; };
var onError = function(jqXHR,textStatus,errorThrown){ var onError = function(jqXHR,textStatus,errorThrown){
$('#refreshed').html(errorThrown + " status: " + jqXHR.status $('#refreshed').html(errorThrown + " status: " + jqXHR.status
+ "\n---\n" + "\n---\n"
+ JSON.stringify(jqXHR.responseJSON,null,2))} + JSON.stringify(jqXHR.responseJSON,null,2))}
var onSuccess = function(data,textStatus,jqXHR) { var onSuccess = function(data,textStatus,jqXHR) {
$("#refreshed").html(data $("#refreshed").html(data
+ "\n---\n" + "\n---\n"
+ JSON.stringify(jqXHR.responseJSON,null,2)); + JSON.stringify(jqXHR.responseJSON,null,2));
$("#refreshed-access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) ); $("#refreshed-access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) );
} }
$.ajax({ $.ajax({
@ -140,9 +154,7 @@
, crossDomain: true , crossDomain: true
}); });
}; };
var makeApiCall = function() { var makeApiCall = function() {
var onError = function(jqXHR,textStatus,errorThrown){ var onError = function(jqXHR,textStatus,errorThrown){
$('#apiresponse').html(errorThrown + " status: " + jqXHR.status $('#apiresponse').html(errorThrown + " status: " + jqXHR.status
+ "\n---\n" + "\n---\n"