add oidc
This commit is contained in:
parent
50049aa86c
commit
8afc62a50d
2 changed files with 212 additions and 5 deletions
207
site/callback
Normal file
207
site/callback
Normal file
|
@ -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 a new issue