2 changed files with 212 additions and 5 deletions
@ -0,0 +1,207 @@ |
|||
<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="oncode"> |
|||
<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" id="code-param"></pre> |
|||
<p>Which once decoded is:</p> |
|||
<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> |
|||
<p>To achieve that the client will make a call to <code>/token</code> |
|||
using a basic auth creds</p> |
|||
<p>You have about 10 mins to retrieve them. |
|||
Unlike in this demo, that <strong>MUST</strong> be done server side.</p> |
|||
<div class="button" |
|||
onclick="getTokensFromCode();"> |
|||
Get Access & Refresh Tokens from Code |
|||
</div> |
|||
<h3>Response from <code>/token</code></h3> |
|||
<p>token endpoint URL: <code id="urltoken" class="code">Nothing yet.</code></p> |
|||
<pre id="token" class="code">Nothing yet.</pre> |
|||
<h3>decoded id_token</h3> |
|||
<pre id="id_token" class="code">Nothing yet.</pre> |
|||
<h3>decoded access-token</h3> |
|||
<pre id="access-token" class="code">Nothing yet.</pre> |
|||
<h3>decoded refresh-token</h3> |
|||
<pre id="refresh-token" class="code">Nothing yet.</pre> |
|||
<h2>Using the API</h2> |
|||
<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> |
|||
<h2>Getting new access token without user interaction</h2> |
|||
<p> The access tokens are the only tokens which are able to talk to the |
|||
Visibility API.</p> |
|||
<p>Access tokens live a short time (about 10 min to 1 hour)</p> |
|||
<p>This is why the client must require a new access token using its |
|||
<em>refresh token</em>. |
|||
That is just making another call to <code>/token</code> |
|||
But with different parameters. </p> |
|||
<div class="button" |
|||
onclick="getAccessToken();"> |
|||
Get Access Tokens from Refresh Token |
|||
</div> |
|||
<pre id="refreshed" class="code">Nothing yet.</pre> |
|||
<pre id="refreshed-access-token" 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; |
|||
} |
|||
var params=getJsonFromUrl(); |
|||
var authstatus=""; |
|||
if (params.error) { |
|||
authstatus = "REFUSED: " + params.error; |
|||
if (params.error_description) { |
|||
authstatus += "\n\n" + params.error_description; |
|||
} |
|||
if (params.error_uri) { |
|||
authstatus += "<a href='" + params.error_uri + "'>" + params.error_uri + "</a>"; |
|||
} |
|||
$('#authorization_status').addClass('refused'); |
|||
$('#oncode').hide(); |
|||
} else { |
|||
if (params.code) { |
|||
authstatus = "AUTHORIZED" ; |
|||
$('#authorization_status').addClass('authorized'); |
|||
} else { |
|||
authstatus = "UNKNOWN" ; |
|||
$('#oncode').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.code).payload; |
|||
$('#code-param').html(params.code); |
|||
$('#code-token').html(JSON.stringify(jwt,null,2)); |
|||
var refreshToken=""; |
|||
var accessToken=""; |
|||
var getTokensFromCode = function() { |
|||
var tokparams={ |
|||
"code":params.code |
|||
, "redirect_uri":redirect_uri |
|||
, "scope":scope |
|||
, "client_id":client_id |
|||
, "grant_type":"authorization_code" |
|||
}; |
|||
var onError = function(jqXHR,textStatus,errorThrown){ |
|||
$('#token').html(errorThrown + " status: " + jqXHR.status |
|||
+ "\n---\n" |
|||
+ JSON.stringify(jqXHR.responseJSON,null,2));} |
|||
var onSuccess = function(data,textStatus,jqXHR) { |
|||
$("#token").html(data |
|||
+ "\n---\n" |
|||
+ JSON.stringify(jqXHR.responseJSON,null,2)); |
|||
$("#id_token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.id_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) ); |
|||
accessToken=jqXHR.responseJSON.access_token; |
|||
refreshToken=jqXHR.responseJSON.refresh_token; |
|||
} |
|||
$.ajax({ |
|||
type: "POST" |
|||
, beforeSend: function(request) {request.setRequestHeader("Authorization","Basic " + btoa(client_id + ":" + client_password))} |
|||
, success: onSuccess |
|||
, error: onError |
|||
, url: oauthServerTokenUrl |
|||
, data: tokparams |
|||
, contentType: 'application/x-www-form-urlencoded; charset=UTF-8' |
|||
, crossDomain: true |
|||
}); |
|||
}; |
|||
var getAccessToken = function() { |
|||
var tokparams={ |
|||
"refresh_token":refreshToken |
|||
, "scope":scope |
|||
, "client_id":client_id |
|||
, "grant_type":"refresh_token" |
|||
}; |
|||
var onError = function(jqXHR,textStatus,errorThrown){ |
|||
$('#refreshed').html(errorThrown + " status: " + jqXHR.status |
|||
+ "\n---\n" |
|||
+ JSON.stringify(jqXHR.responseJSON,null,2))} |
|||
var onSuccess = function(data,textStatus,jqXHR) { |
|||
$("#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({ |
|||
type: "POST" |
|||
, beforeSend: function(request) {request.setRequestHeader("Authorization","Basic " + btoa(client_id + ":" + client_password))} |
|||
, success: onSuccess |
|||
, error: onError |
|||
, url: oauthServerTokenUrl |
|||
, data: tokparams |
|||
, contentType: 'application/x-www-form-urlencoded; charset=UTF-8' |
|||
, crossDomain: true |
|||
}); |
|||
}; |
|||
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> |
|||
@ -1,11 +1,11 @@ |
|||
var oauthURLPrefix="https://visibility.amp.cisco.com"; |
|||
var oauthURLPrefix="https://visibility.int.iroh.site"; |
|||
var oauthServerUrl=oauthURLPrefix + "/iroh/oauth2/authorize"; |
|||
var oauthServerTokenUrl=oauthURLPrefix + "/iroh/oauth2/token"; |
|||
var resourceProviderTestEndpoint=oauthURLPrefix + "/iroh/profile/whoami" ; |
|||
var response_type="code"; |
|||
var client_id="client-3bb1e787-381d-4f12-bf32-e1158f200ddc"; |
|||
var client_password = "CrXwg31_vnRHpjPXzgVzUFKHr6RO8GTL-iI8aDeUU3n48NtD7PFLhg"; |
|||
var redirect_uri="https://localhost:5443/callback.html"; |
|||
var scopes=[ "profile", "inspect" ]; |
|||
var client_id="client-92258bc0-196a-4f6c-a0b5-fe105de5f505"; |
|||
var client_password = "xoM2Gisjqp7Sp1jnw9Y6Yce9gfg4hmoRxZTekLqKi6i7o1xBiPvLvA"; |
|||
var redirect_uri="https://localhost:5443/callback"; |
|||
var scopes=[ "openid" ]; |
|||
var scope=scopes.join(" "); |
|||
var state="whatever="; |
|||
|
|||
Loading…
Reference in new issue