hide interactive part on error
This commit is contained in:
parent
480f4ed07c
commit
93338b438e
1 changed files with 46 additions and 43 deletions
89
login.html
89
login.html
|
@ -17,50 +17,52 @@
|
|||
<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" 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 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>
|
||||
<pre 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>
|
||||
<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>
|
||||
<h3>Response from <code>/token</code></h3>
|
||||
<pre 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>
|
||||
<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.
|
||||
<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>
|
||||
<script>
|
||||
function getJsonFromUrl() {
|
||||
var query = location.search.substr(1);
|
||||
|
@ -76,6 +78,7 @@
|
|||
if (params.error) {
|
||||
authstatus = "REFUSED: " + params.error;
|
||||
$('#authorization_status').addClass('refused');
|
||||
$('#oncode').hide();
|
||||
} else {
|
||||
authstatus = "AUTHORIZED" ;
|
||||
$('#authorization_status').addClass('authorized');
|
||||
|
|
Loading…
Reference in a new issue