show session

index.html

@@ -157,15 +157,16 @@
             <div ng-if="vm._working" class="alert alert-info">
               <marquee>taking my sweet time to do something in the background...</marquee>
             </div>
-            <div ng-if="vm.validated.provider" class="alert alert-success"><span ng-bind="vm.validated.provider"> is a valid login provider</span></div>
+            <div ng-if="vm.validated.provider" class="alert alert-success"><span ng-bind="vm.validated.provider"></span> will be used as the login issuer</div>
 
             <label>Address:</label>
-            <input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.id" ng-change="vm.fn.changeUser()">
+            <input type="text" placeholder="ex: john@example.com (optional)" class="form-control" ng-model="vm.form.id" ng-change="vm.fn.changeUser()">
             <label ng-if="vm.advanced">Identity Issuer:</label>
-            <input ng-if="vm.advanced" type="text" class="form-control" ng-model="vm.form.provider" placeholder="ex: sso.example.com" ng-change="vm.fn.changeProvider()">
+            <input ng-if="vm.advanced" type="text" class="form-control" ng-model="vm.form.provider" placeholder="ex: sso.example.com (required)" ng-change="vm.fn.changeProvider()">
             <button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.fn.toggleAdvanced()">open advanced</button>
             <button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.fn.toggleAdvanced()">close advanced</button>
             <button class="btn btn-primary" ng-click="vm.api.implicitGrant()" ng-disabled="!vm.validated.provider">Login</button>
+            <label><input type="checkbox" ng-model="vm.debug" /> Debug OAuth3 Flow?</label>
           </div>
         </div>
 
@@ -187,63 +188,120 @@
             </div>
 
             <div class="row">
-              <div class="col-md-5">
+              <br>
-                Client URI: <span ng-bind="vm.conf.client_uri"></span>
+              <br>
+              <div class="col-md-3">
+                <strong>Client URI</strong>: <span ng-bind="vm.conf.client_uri"></span>
                 <br>
                 (this is the URL of the application as per window.location.href)
               </div>
-              <div class="col-md-7">
+              <div class="col-md-9">
-                <pre><code>OAUTH3.clientUri({ host: "<span ng-bind="vm.clientUri"></span>" });</code></pre>
                 <input class="form-input" type="text" ng-model="vm.clientUri">
-                <br>
                 <button class="btn btn-default" ng-click="vm.api.clientUri()">Set</button>
+
+                <pre><code>OAUTH3.clientUri({ host: "<span ng-bind="vm.clientUri"></span>", port: null, pathname: '/' });</code></pre>
               </div>
             </div>
 
             <div class="row">
-              <div class="col-md-5">
+              <br>
+              <br>
+              <div class="col-md-3">
+                <strong>Subject</strong>: <span ng-bind="vm.form.subject"></span>
+                <br>
+                (this is either the subject portion or whole address of subject@issuer)
+              </div>
+              <div class="col-md-9">
+                <input class="form-input" type="text" ng-model="vm.form.id">
+                <button class="btn btn-default" ng-click="vm.fn.changeUser()">Set</button>
+
+                <pre><code>address: <span ng-bind="vm.form.id"></span></code></pre>
+                <pre><code>subject: <span ng-bind="vm.form.subject"></span></code></pre>
+                <pre><code>issuer: <span ng-bind="vm.form.provider"></span></code></pre>
+              </div>
+            </div>
+
+            <div class="row" ng-if="vm.validated.provider">
+              <br>
+              <br>
+              <div class="col-md-3">
+                <strong>Issuer URI</strong>: <span ng-bind="vm.validated.provider"></span>
+                <br>
+                (this is the URL part of subject@issuer)
+              </div>
+              <div class="col-md-9">
+                <input class="form-input" type="text" ng-model="vm.form.provider">
+                <button class="btn btn-default" ng-click="vm.fn.changeProvider()">Set</button>
+
+                <pre><code>OAUTH3.urls.discover("<span ng-bind="vm.form.provider"></span>", opts);</code></pre>
+                <pre ng-if="vm.directivesUrl"><code><span ng-bind="vm.directivesUrl"></span></code></pre>
+
+                <pre><code>OAUTH3.discover("<span ng-bind="vm.form.provider"></span>", opts);</code></pre>
+                <pre ng-if="vm.discoveryUrl"><code><span ng-bind="vm.discoveryUrl"></span></code></pre>
+
+                <button ng-if="vm.directives" class="btn btn-default" ng-click="vm.fn.clearDirectives()">[X]</button>
+                <pre ng-if="vm.directives"><code><span ng-bind="vm.directives | json"></span></code></pre>
+              </div>
+            </div>
+
+            <div class="row" ng-if="vm.validated.provider">
+              <br>
+              <br>
+              <div class="col-md-3">
+                <strong>Authorization Dialog URL</strong>: <span ng-bind="vm.validated.provider"></span>
+                <br>
+                (this is the URL part of subject@issuer)
+              </div>
+              <div class="col-md-9">
+                <button class="btn btn-default" ng-click="vm.api.implicitGrant()" ng-disabled="!vm.directives || !vm.validated.provider">Open Dialog Window</button>
+
+                <pre><code>OAUTH3.urls.implicitGrant(directives, opts);</code></pre>
+                <pre ng-if="vm.implicitGrantUrl"><code><span ng-bind="vm.implicitGrantUrl"></span></code></pre>
+
+                <pre><code>OAUTH3.implicitGrant(directives, opts);</code></pre>
+
+                <button ng-if="vm.session" class="btn btn-default" ng-click="vm.fn.clearSession()">[X]</button>
+                <pre ng-if="vm.session"><code><span ng-bind="vm.session | json"></span></code></pre>
+              </div>
+            </div>
+
+            <div class="row">
+              <br>
+              <br>
+              <div class="col-md-3">
                 Login Status:
               </div>
-              <div class="col-md-7">
+              <div class="col-md-9">
                 ...
               </div>
             </div>
+
             <div class="row">
-              <div class="col-md-5">
+              <div class="col-md-3">
                 Current Sessions:
               </div>
-              <div class="col-md-7">
+              <div class="col-md-9">
                 ...
               </div>
             </div>
+
             <div class="row">
-              <div class="col-md-5">
+              <div class="col-md-3">
                 Approved Devices:
               </div>
-              <div class="col-md-7">
+              <div class="col-md-9">
                 ...
               </div>
             </div>
+
             <div class="row">
-              <div class="col-md-5">
+              <div class="col-md-3">
                 Approved Applications:
               </div>
-              <div class="col-md-7">
+              <div class="col-md-9">
                 ...
               </div>
             </div>
-            <div class="row">
-              <div class="col-md-12">
-                <input class="form-control" ng-model="vm.providerUri" type="text" placeholder="ex: example.com">
-                <pre><code>OAUTH3.discover("<span ng-bind="vm.providerUri"></span>", opts);</code></pre>
-                <pre><code>OAUTH3.urls.discover("<span ng-bind="vm.providerUri"></span>", opts);</code></pre>
-                <button class="btn btn-default" ng-click="vm.api.discover()">Discover!</button>
-                <button ng-if="vm.directives" class="btn btn-default" ng-click="vm.fn.clearDirectives()">[X]</button>
-                <pre ng-if="vm.directivesUrl"><code><span ng-bind="vm.directivesUrl"></span></code></pre>
-                <pre ng-if="vm.discoveryUrl"><code><span ng-bind="vm.discoveryUrl"></span></code></pre>
-                <pre ng-if="vm.directives"><code><span ng-bind="vm.directives"></span></code></pre>
-              </div>
-            </div>
 
           </div>
         </div>

js/playground.js

@@ -31,10 +31,11 @@
     vm.providerUri = vm.conf.client_uri;
     // map of things being debounced presently
     vm.debouncing = {};
+    vm.defaults = { provider: vm.conf.provider_uri, directives: null };
 
     vm.form = {};
     vm.form.id = '';
-    vm.form.user = '';
+    vm.form.subject = '';
     vm.form.userProvider = '';
     vm.form.provider = '';
 
@@ -74,24 +75,35 @@
         // The username may have a single @, the provider may not
         // user@thing.com@whatever.com -> user@thing.com, whatever.com
         provider = parts.pop();
-        vm.form.user = parts.join('');
+        user = parts.join('');
       } else {
         //vm.form.hasUser = false;
-        vm.form.user = '';
+        user = '';
         provider = parts.join('');
       }
 
-      if (!vm.form.providerIndependent) {
+      vm.form.subject = vm.form.id;
-        vm.form.provider = provider;
-      }
-      vm.form.userProvider = provider;
 
-      parts = vm.form.provider.split('.');
       return vm.fn.debounce('provider', 250).then(function () {
+        var parts = vm.form.provider.split('.');
+        if (!vm.form.providerIndependent) {
+          vm.form.provider = provider;
+        }
+        vm.form.userProvider = provider;
         // Careful: don't use state within a debounce function
         // uses vm.form.provider for lookup
         if (parts.length >= 2 && parts[parts.length - 1].length >= 2 && parts.every(function (p) {return p.length})) {
-          return vm.api.discover();
+          return vm.api.discover().then(function () {
+            console.log('[changeUser] vm.directives:');
+            console.log(vm.directives);
+            console.log(provider);
+            console.log(OAUTH3.uri.normalize(vm.directives.issuer));
+            if (vm.directives && provider === OAUTH3.uri.normalize(vm.directives.issuer)) {
+              vm.form.subject = user;
+            } else {
+              vm.form.subject = vm.form.id;
+            }
+          });
         }
       });
     };
@@ -156,6 +168,7 @@
     };
     vm.api._discoverCount = 0;
     vm.api.discover = function () {
+      vm.directives = null;
       vm.validated.provider = '';
       vm.api._discoverCount += 1;
       var latest = vm.api._discoverCount;
@@ -178,8 +191,19 @@
         console.log(dir);
         vm.validated.provider = provider;
         vm.directives = dir;
+
+        var opts = {
+          client_uri: vm.conf.client_uri
+        , subject: vm.form.subject || undefined
+        , debug: vm.debug || undefined
+        };
+        vm.implicitGrantObj = OAUTH3.urls.implicitGrant(vm.directives, opts);
+        vm.implicitGrantUrl = (OAUTH3.url.normalize(provider) + '/' + vm.implicitGrantObj.url).replace(vm.implicitGrantObj.state, '{{random}}');
         //JSON.stringify(dir, null, 2);
       }, function (err) {
+        vm.form.provider = vm.defaults.provider;
+        vm.validated.provider = vm.defaults.provider;
+        vm.directives = vm.defaults.directives;
         if (latest !== vm.api._discoverCount) {
           console.warn('[DEBUG] ignoring stale discover error for', provider);
           console.warn(err);
@@ -195,15 +219,26 @@
       var provider = vm.validated.provider;
       var opts = {
         client_uri: vm.conf.client_uri
-      , subject: vm.form.user
+      , subject: vm.form.subject || undefined
+      , debug: vm.debug || undefined
       };
 
+      console.log('[DEBUG] vm.directives');
+      console.log(vm.directives);
       vm.implicitGrantObj = OAUTH3.urls.implicitGrant(vm.directives, opts);
       console.log('[DEBUG] vm.implicitGrantObj');
       console.log(vm.implicitGrantObj);
-      vm.implicitGrantUrl = OAUTH3.url.normalize(provider) + '/' + vm.implicitGrantObj.query._pathname;
+      vm.implicitGrantUrl = (OAUTH3.url.normalize(provider) + '/' + vm.implicitGrantObj.url);
-      return OAUTH3.implicitGrant(provider, opts);
+      return OAUTH3.implicitGrant(vm.directives, opts).then(function (session) {
+        vm.session = session;
+      });
     };
 
+    vm.form.provider = vm.defaults.provider;
+    vm.validated.provider = vm.defaults.provider;
+    vm.api.discover().then(function () {
+      vm.defaults.directives = vm.directives;
+    });
+
 	} ] );
 }());