better interaction for demos

2018-02-13 17:56:05 +01:00 · 2018-02-13 17:56:05 +01:00 · f930fe33ce
commit f930fe33ce
parent f0aa3ba2ba
2 changed files with 100 additions and 31 deletions
--- a/brutalist.css
+++ b/brutalist.css
@ -35,8 +35,7 @@ code,pre {

 pre { padding: 1em;
      border: solid 2px;
-      font-size: 0.7em;
-      box-shadow: 8px 8px 0; }
+      font-size: 0.7em;}

 .button {
    display: inline-block;
--- a/login.html
+++ b/login.html
@ -29,38 +29,108 @@
        <h1>Yolo App login page</h1>
        <p>Authorization process done!</p>
        <a href="/index.html">← go back to main page</a>
-        <h2>Tokens</h2>
-        <pre id="token" class="code">Retrive tokens...</pre>
-        <h2>Decoded Code:</h2>
-        <pre class="code"><script>document.write(JSON.stringify(jwt,null,2));</script></pre>
-        <h2>decoded from the code:</h2>
+        <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>
+        <p>Which once decoded is:</p>
+        <pre class="code"><script>document.write(JSON.stringify(jwt,null,2));</script></pre>
+        <h2>Tokens</h2>
+        <p> Now the server need to retrieve an access-token and a refresh-token
+            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</p>
+        <div class="button"
+             onclick="getTokensFromCode();">
+            Get Access &amp; 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>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>
-         var tokparams={
-             "code":params.code
-             , "redirect_uri":"http://localhost:9999/login.html"
-             , "scope":"ctia iroh-collect"
-             , "client_id":"localtest"
-             , "grant_type":"authorization_code"
+         var refreshToken="";
+         var getTokensFromCode = function() {
+             var tokparams={
+                 "code":params.code
+                 , "redirect_uri":"http://localhost:9999/login.html"
+                 , "scope":"ctia iroh-collect"
+                 , "client_id":"localtest"
+                 , "grant_type":"authorization_code"
+             };
+             var onTokenError = function(jqXHR,textStatus,errorThrown){
+                 $('#token').html(errorThrown + " status: " + jqXHR.status
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2));}
+             var onTokenSuccess = function(data,textStatus,jqXHR) {
+                 $("#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) );
+
+                 refreshToken=jqXHR.responseJSON.refresh_token;
+             }
+             $.ajax({
+                 type: "POST"
+                 , beforeSend: function(request) {request.setRequestHeader("Authorization","Basic localpass")}
+                 , success: onTokenSuccess
+                 , error: onTokenError
+                 , url: "http://localhost:9001/iroh/oauth2/token"
+                 , data: tokparams
+                 , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+                 , crossDomain: true
+             });
+         };
+
+         var getAccessToken = function() {
+             var tokparams={
+                 "refresh_token":refreshToken
+                 , "scope":"ctia iroh-collect"
+                 , "client_id":"localtest"
+                 , "grant_type":"refresh_token"
+             };
+             var onTokenError = function(jqXHR,textStatus,errorThrown){
+                 $('#refreshed').html(errorThrown + " status: " + jqXHR.status
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2))}
+             var onTokenSuccess = 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 localpass")}
+                 , success: onTokenSuccess
+                 , error: onTokenError
+                 , url: "http://localhost:9001/iroh/oauth2/token"
+                 , data: tokparams
+                 , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+                 , crossDomain: true
+             });
         };
-         var onTokenError = function(jqXHR,textStatus,errorThrown){
-             $('#token').html(errorThrown + " status: " + jqXHR.status
-                            + "\n---\n"
-                            + JSON.stringify(jqXHR.responseJSON,null,2))}
-         var onTokenSuccess = function(data,textStatus,jqXHR) {
-             $("#token").html(data
-                            + "\n---\n"
-                            + JSON.stringify(jqXHR.responseJSON,null,2));}
-         $.ajax({
-             type: "POST"
-             , beforeSend: function(request) {request.setRequestHeader("Authorization","Basic localpass")}
-             , success: onTokenSuccess
-             , error: onTokenError
-             , url: "http://localhost:9001/iroh/oauth2/token"
-             , data: tokparams
-             , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
-             , crossDomain: true
-         });
        </script>
    </body>
 </html>