Merge pull request #211 from FadyMak/master

Added support for access_token parsing from URL hash

Author: alejofernandez

js/app.js

@@ -330,12 +330,11 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
 
   var algorithmRadios = $('input[name="algorithm"]'),
       lastRestoredToken;
+  var tokenRadios = $('input[name="token-type"]');
 
   function setJSONEditorContent(jsonEditor, decodedJSON, selector) {
     jsonEditor.off('change', refreshTokenEditor);
 
-
-
     if (decodedJSON.result !== null && decodedJSON.result !== undefined) {
       jsonEditor.setValue(decodedJSON.result);
     } else {
@@ -385,23 +384,18 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     if (window.matchMedia('(min-width: 768px)').matches) {
       autoHeightInput();
     }
-
   }
 
   function selectDetectedAlgorithm(alg){
     var $algRadio = $('.algorithm input[value="'+alg+'"]');
     $algRadio.prop('checked', true);
 
     fireEvent($algRadio.get(0));
-
-
   }
 
   function saveToStorage(jwt) {
     // Save last valid jwt value for refresh
     safeLocalStorageSetItem("jwtValue", jwt);
-
-
   }
 
   function loadFromStorage(cb) {
@@ -452,8 +446,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     }
     tokenEditor.on('change', tokenEditorOnChangeListener);
     fireEvent(secretElement);
-
-
   }
 
   function getFirstElementByClassName(selector) {
@@ -502,8 +494,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
       isBase64
     );
 
-
-
     var error = result.error;
     result = result.result;
     if (!error && result) {
@@ -515,8 +505,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
       $(signatureElement).addClass('invalid-token');
       signatureElement.innerHTML = '<i class="icon-budicon-501"></i> invalid signature';
     }
-
-
   }
 
   function getKey(algorithm, action) {
@@ -529,8 +517,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     } else {
         return action === 'sign' ? privateKeyElement.val() : publicKeyElement.val();
     }
-
-
   }
 
   function getAlgorithm() {
@@ -547,30 +533,43 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
         .filter('.' + algorithm)
         .show();
 
-    if(getTrimmedValue(tokenEditor) === DEFAULT_HS_TOKEN &&
+    if(getTokenType() === 'id_token' && getTrimmedValue(tokenEditor) === DEFAULT_HS_TOKEN &&
       algorithm === 'RS256'){
         setDefaultsForRSA();
-    }else if(getTrimmedValue(tokenEditor) === DEFAULT_RS_TOKEN &&
+    }else if(getTokenType() === 'id_token' && getTrimmedValue(tokenEditor) === DEFAULT_RS_TOKEN &&
       algorithm === 'HS256'){
         setDefaultsForHMAC();
     }
-
-
   }
 
   function setDefaultsForRSA() {
     tokenEditor.setValue(DEFAULT_RS_TOKEN);
 
     $('.jwt-signature textarea[name=public-key]').val(DEFAULT_PUBLIC_RSA);
     $('.jwt-signature textarea[name=private-key]').val(DEFAULT_PRIVATE_RSA);
-
-
   }
 
   function setDefaultsForHMAC(){
     tokenEditor.setValue(DEFAULT_HS_TOKEN);
+  }
 
+  function updateToken() {
+    var tokenType = getTokenType();
+    if (document.location.hash) {
+      var qs = document.location.hash.slice(1);
+      var d = {};
+      qs = qs.split('&');
+      qs.forEach(function (kv) { kv = kv.split('='); d[kv[0]] = kv[1]; });
 
+      if (d[tokenType]) {
+        tokenEditor.setValue(decodeURIComponent(d[tokenType]));
+        return;
+      }
+    }
+  }
+
+  function getTokenType() {
+    return tokenRadios.filter(':checked').val();
   }
 
   function validateKey() {
@@ -588,17 +587,19 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     } else {
       $textarea.addClass('error');
     }
-
-
   }
 
   updateAlgorithm();
 
   algorithmRadios.on('change', function(){
     updateAlgorithm();
     updateSignature();
+  });
 
-
+  tokenRadios.on('change', function(){
+    updateToken();
+    updateAlgorithm();
+    updateSignature();
   });
 
   $('.jwt-signature textarea[name="public-key"]').on('input', updateSignature);
@@ -629,10 +630,21 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     var d = {};
     qs = qs.split('&');
     qs.forEach(function (kv) { kv = kv.split('='); d[kv[0]] = kv[1]; });
+
+    if (d.access_token && d.id_token) {
+      // show token-type selector
+      $('.jwt-playground .selections .token-type').show();
+    }
+
     if (d.id_token) {
       tokenEditor.setValue(decodeURIComponent(d.id_token));
       return;
     }
+
+    if (d.access_token) {
+      tokenEditor.setValue(decodeURIComponent(d.access_token));
+      return;
+    }
   }
 
   loadFromStorage(function (jwt) {
@@ -669,6 +681,14 @@ $(".debugger-jwt .algorithm select").change(function() {
 $(".debugger-jwt .algorithm select").change(function(){var a=$('.debugger-jwt .algorithm input[value="'+$(this).val()+'"]');a.prop("checked",!0)})
 // end 07012015
 
+$(".debugger-jwt .token-type select").change(function() {
+  $('.debugger-jwt .token-type input[value="'+$(this).val()+'"]').parent().trigger("click");
+  $('.debugger-jwt .token-type input[value="'+$(this).val()+'"]').change();
+});
+
+$(".debugger-jwt .token-type select").change(function(){var a=$('.debugger-jwt .token-type input[value="'+$(this).val()+'"]');a.prop("checked",!0)})
+
+
 // Fetch stargazers count for each repo from GitHub's API
 $('.stars').each(function(idx, element){
     var $el = $(element);

server.js

@@ -1,17 +1,17 @@
 var express = require('express');
 var http = require('http');
 var enforce = require('express-sslify');
- 
+
 var app = express();
 
-// use HTTPS(true) in case you are behind a load balancer (e.g. Heroku) 
+// use HTTPS(true) in case you are behind a load balancer (e.g. Heroku)
 if (process.env.NODE_ENV === 'production') {
 	console.log('redirecting to ssl');
 	app.use(enforce.HTTPS({ trustProtoHeader: true }))
 }
 
 app.use('/', express.static(__dirname));
- 
+
 http.createServer(app).listen(process.env.PORT || 3000, function() {
 	console.log('started');
-});
+});

stylus/app.styl

@@ -402,7 +402,7 @@ body
   position relative
   select
     background white
-    width 100px
+    width 112px
     height 38px
     font-size 12px
     padding 0 10px
@@ -425,6 +425,10 @@ body
     right 10px
 
 .jwt-playground
+  .selections
+    display flex
+    justify-content center
+
   .algorithm
     text-align center
     span
@@ -435,6 +439,18 @@ body
     .jwt-select
       margin-left 10px
 
+  .token-type
+    display none
+    text-align center
+    span
+      font-weight bold
+      text-transform uppercase
+      font-size 12px
+      vertical-align middle
+    .jwt-select
+      margin-left 10px
+      margin-right 20px
+
   .algorithm-code
     margin-top 35px
     .tab-nav

views/index.jade

@@ -64,18 +64,30 @@ block content
       h1 Debugger
 
       .jwt-playground
+        .selections
+          .token-type
+            span Token
+            .hide
+              label
+                input(type='radio', name='token-type', value='id_token', checked='')
+              label
+                input(type='radio', name='token-type', value='access_token')
+            .jwt-select
+              select
+                option(name='token-type',value='id_token', selected='') id_token
+                option(name='token-type',value='access_token') access_token
 
-        .algorithm
-          span Algorithm
-          .hide
-            label
-              input(type='radio', name='algorithm', value='HS256', checked='')
-            label
-              input(type='radio', name='algorithm', value='RS256')
-          .jwt-select
-            select
-              option(name='algorithm',value='HS256', selected='') HS256
-              option(name='algorithm',value='RS256') RS256
+          .algorithm
+            span Algorithm
+            .hide
+              label
+                input(type='radio', name='algorithm', value='HS256', checked='')
+              label
+                input(type='radio', name='algorithm', value='RS256')
+            .jwt-select
+              select
+                option(name='algorithm',value='HS256', selected='') HS256
+                option(name='algorithm',value='RS256') RS256
 
         .algorithm-code
           .tab-nav