begin OAuth3 Explorer & Playground
This commit is contained in:
parent
2500711b8c
commit
23765a97ef
186
index.html
186
index.html
|
|
@ -8,7 +8,7 @@
|
||||||
<!-- <link rel="stylesheet" type="text/css" href="/css/style.css"> -->
|
<!-- <link rel="stylesheet" type="text/css" href="/css/style.css"> -->
|
||||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300">
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300">
|
||||||
<script src="https://use.fontawesome.com/3af0faae66.js"></script>
|
<script src="https://use.fontawesome.com/3af0faae66.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="/css/daplie-installer-overrides.css">
|
<!-- link rel="stylesheet" type="text/css" href="/css/daplie-installer-overrides.css" -->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -142,45 +142,165 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fade js-playground">
|
<div class="fade js-playground" ng-app="oauth3Playground" ng-strict>
|
||||||
|
<div ng-controller="PlaygroundCtrl as vm">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="jumbotron">
|
<div class="jumbotron">
|
||||||
<h1>OAuth3 Playground</h1>
|
<h1>OAuth3 Playground</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-3">
|
<div class="col-md-12">
|
||||||
Login Status:
|
<h2>Go ahead, test our login</h2>
|
||||||
</div>
|
|
||||||
<div class="col-md-9">
|
<label>Address:</label>
|
||||||
...
|
<input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.user" ng-change="vm.fn.changeProvider()">
|
||||||
</div>
|
<label ng-if="vm.advanced">Identity Issuer:</label>
|
||||||
</div>
|
<input ng-if="vm.advanced" type="text" class="form-control" ng-model="vm.form.provider" placeholder="ex: sso.example.com">
|
||||||
<div class="row">
|
<button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.advanced = !vm.advanced">hide advanced</button>
|
||||||
<div class="col-md-3">
|
<button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.advanced = !vm.advanced">show advanced</button>
|
||||||
Current Sessions:
|
<button class="btn btn-primary" ng-click="vm.fn.login()">Login</button>
|
||||||
</div>
|
|
||||||
<div class="col-md-9">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
Approved Devices:
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
Approved Applications:
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9">
|
|
||||||
...
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h2>Status</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
Client URI:
|
||||||
|
<br>
|
||||||
|
<span ng-bind="vm.conf.client_uri"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
Login Status:
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
Current Sessions:
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
Approved Devices:
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
Approved Applications:
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
...
|
||||||
|
</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 class="col-md-6">
|
||||||
|
<h2>Docs</h2>
|
||||||
|
|
||||||
|
<p>0. Include the Library
|
||||||
|
<pre><code># Browsers
|
||||||
|
<script src="oauth3.core.js"></script>
|
||||||
|
var OAUTH3 = window.OAUTH3;
|
||||||
|
|
||||||
|
# Node.js
|
||||||
|
var OAUTH3 = require('oauth3.js').OAUTH3;
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>1. Establish the Client ID by its URI
|
||||||
|
<pre><code># Browsers
|
||||||
|
var clientUri = OAUTH3.clientUri(window.location); // example.com
|
||||||
|
|
||||||
|
# Node.js
|
||||||
|
var clientUri = OAUTH3.clientUri("https://example.com"); // example.com
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>2. Provide promisable storage hooks for saving sessions and caching directives
|
||||||
|
<pre><code>OAUTH3._hooks = {
|
||||||
|
directives: {
|
||||||
|
get: function (providerUri) { ... }
|
||||||
|
, set: function (providerUri, directives) { ... }
|
||||||
|
, all: function () { ... }
|
||||||
|
, clear: function () { ... }
|
||||||
|
, sessions: {
|
||||||
|
get: function (providerUri, id) { ... }
|
||||||
|
, set: function (providerUri, newSession, id) { ... }
|
||||||
|
, all: function (providerUri) { ... }
|
||||||
|
, clear: function (providerUri) { ... }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</code></pre>
|
||||||
|
SECURITY: The default storage engine is window.sessionStorage. Session storage
|
||||||
|
should be used for app:// urls and localhost urls and other applications
|
||||||
|
in which the identity of the app is ephemeral, arbitrary, or not distinct.
|
||||||
|
|
||||||
|
<p><h4>3. Check to see if the user already has a session</h4>
|
||||||
|
<pre><code>OAUTH3.hooks.session.get(providerUri).then(function (session) {
|
||||||
|
console.log('[DEBUG] session:');
|
||||||
|
console.log(session);
|
||||||
|
});
|
||||||
|
OAUTH3.hooks.session.all().then(function (sessions) {
|
||||||
|
console.log('[DEBUG] all sessions:');
|
||||||
|
console.log(sessions);
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
Note: expired sessions should not be returned and stale sessions should be refreshed
|
||||||
|
|
||||||
|
<p>4. Prompt the user for their address and perform the lookup to see if it
|
||||||
|
has a provider.
|
||||||
|
<pre><code>var providerUri = address.split('@')[1] || address;
|
||||||
|
var opts = { client_uri: clientUri };
|
||||||
|
OAUTH3.discover(providerUri, opts).then(function (dir) {
|
||||||
|
console.log('[DEBUG] directives:');
|
||||||
|
console.log(dir);
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>4.
|
||||||
|
<pre><code>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -194,6 +314,10 @@
|
||||||
<script src="/assets/oauth3.org/oauth3.issuer.js"></script>
|
<script src="/assets/oauth3.org/oauth3.issuer.js"></script>
|
||||||
<script src="./js/issuer.js"></script>
|
<script src="./js/issuer.js"></script>
|
||||||
<script src="./js/script.js"></script>
|
<script src="./js/script.js"></script>
|
||||||
|
|
||||||
|
<script src="./js/angular-1.6.6.js"></script>
|
||||||
|
<script src="./js/angular-ui-router-1.0.10.js"></script>
|
||||||
|
<script src="/assets/oauth3.org/oauth3.ng.js"></script>
|
||||||
<script src="./js/playground.js"></script>
|
<script src="./js/playground.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -68,7 +68,7 @@ $(function () {
|
||||||
// TODO casing
|
// TODO casing
|
||||||
// TODO expiry calculation
|
// TODO expiry calculation
|
||||||
// TODO leave this up to OAUTH3
|
// TODO leave this up to OAUTH3
|
||||||
session.provider_uri = session.provider_rui || CONFIG.host;
|
session.provider_uri = session.provider_uri || CONFIG.host;
|
||||||
session.client_uri = session.client_uri || CONFIG.host; // same as provider in this case
|
session.client_uri = session.client_uri || CONFIG.host; // same as provider in this case
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
122
js/playground.js
122
js/playground.js
|
|
@ -1,5 +1,127 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
window.ngOauth3App = angular.module('oauth3Playground', [ 'oauth3.org' ])
|
||||||
|
//window.ngOauth3App = angular.module('oauth3Playground', [ 'ui.router' ])
|
||||||
|
/*
|
||||||
|
ngOauth3App.config(function($stateProvider) {
|
||||||
|
var helloState = {
|
||||||
|
name: 'hello',
|
||||||
|
url: '/hello',
|
||||||
|
template: '<h3>hello world!</h3>'
|
||||||
|
}
|
||||||
|
|
||||||
|
var aboutState = {
|
||||||
|
name: 'about',
|
||||||
|
url: '/about',
|
||||||
|
template: '<h3>Its the UI-Router hello world app!</h3>'
|
||||||
|
}
|
||||||
|
|
||||||
|
$stateProvider.state(helloState);
|
||||||
|
$stateProvider.state(aboutState);
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
.controller('PlaygroundCtrl', [ 'azp@oauth3.org', function (OAUTH3) {
|
||||||
|
// NOTE: This OAUTH3 is the same as window.OAUTH3, but with angular's promise injected
|
||||||
|
// TODO: how to load more than one version of oauth3 on the page (i.e. a vanilla version without angular entaglement)
|
||||||
|
var vm = this;
|
||||||
|
|
||||||
|
vm.clientUri = OAUTH3.clientUri(window.location);
|
||||||
|
vm.conf = { client_id: vm.clientUri, client_uri: vm.clientUri, provider_uri: vm.clientUri };
|
||||||
|
vm.providerUri = vm.conf.client_uri;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Convenience for our app
|
||||||
|
//
|
||||||
|
vm.fn = {};
|
||||||
|
vm.fn.lock = function () {
|
||||||
|
vm._working = true;
|
||||||
|
};
|
||||||
|
vm.fn.unlock = function () {
|
||||||
|
vm._working = false;
|
||||||
|
};
|
||||||
|
vm.fn.clearError = function () {
|
||||||
|
vm.error = null;
|
||||||
|
};
|
||||||
|
vm.fn.clearDirectives = function () {
|
||||||
|
vm.directives = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
//
|
||||||
|
// Wrap around the OAUTH3 APIs
|
||||||
|
//
|
||||||
|
vm.api = {};
|
||||||
|
vm.api.providerUri = function () {
|
||||||
|
console.log('[DEBUG] providerUri:', vm.providerUri);
|
||||||
|
try {
|
||||||
|
vm.providerUri = OAUTH3.uri.normalize(vm.providerUri);
|
||||||
|
vm.conf.provider_uri = vm.providerUri;
|
||||||
|
} catch(e) {
|
||||||
|
vm.error = e;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
vm.api.clientUri = function () {
|
||||||
|
console.log('[DEBUG] clientUri:', vm.clientUri);
|
||||||
|
try {
|
||||||
|
vm.clientUri = OAUTH3.clientUri({ host: vm.clientUri });
|
||||||
|
if (vm.clientUri) {
|
||||||
|
console.log('[DEBUG] clientUri:', vm.clientUri);
|
||||||
|
vm.conf.client_uri = vm.clientUri;
|
||||||
|
vm.conf.client_id = vm.clientUri;
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
vm.error = e;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
vm.api.discover = function () {
|
||||||
|
vm.fn.lock();
|
||||||
|
|
||||||
|
vm.discoveryObj = OAUTH3.urls.discover(vm.conf.provider_uri, vm.conf);
|
||||||
|
vm.directivesUrl = OAUTH3.url.normalize(vm.conf.provider_uri) + '/' + vm.discoveryObj.query._pathname;
|
||||||
|
vm.discoveryUrl = vm.discoveryObj.method + ' ' + vm.discoveryObj.url;
|
||||||
|
return OAUTH3.discover(vm.conf.provider_uri, vm.conf).then(function (dir) {
|
||||||
|
console.log('[DEBUG] directives:');
|
||||||
|
console.log(dir);
|
||||||
|
vm.directives = JSON.stringify(dir, null, 2);
|
||||||
|
}, function (err) {
|
||||||
|
vm.error = err;
|
||||||
|
}).then(function () {
|
||||||
|
vm.fn.unlock();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
} ] );
|
||||||
|
}());
|
||||||
|
|
||||||
window.PLAYGROUND = function () {
|
window.PLAYGROUND = function () {
|
||||||
|
/*
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
console.log("Welcome to the Playground!");
|
console.log("Welcome to the Playground!");
|
||||||
|
var clientUri = OAUTH3.clientUri(window.location);
|
||||||
|
|
||||||
|
$('input.js-provider-uri').val(window.location.host);
|
||||||
|
$('span.js-provider-uri').text(window.location.host);
|
||||||
|
|
||||||
|
$('body').on('keyup', '.js-provider-uri', function () {
|
||||||
|
$('span.js-provider-uri').text($('input.js-provider-uri').val())
|
||||||
|
});
|
||||||
|
|
||||||
|
$('body').on('click', '.js-discover', function () {
|
||||||
|
$('.js-discover').attr('disabled', 'disabled');
|
||||||
|
console.log('discover clicked!');
|
||||||
|
var providerUri = $('input.js-provider-uri').val();
|
||||||
|
|
||||||
|
return OAUTH3.discover(providerUri, { client_uri: clientUri }).then(function (dir) {
|
||||||
|
console.log('[DEBUG] directives:');
|
||||||
|
console.log(dir);
|
||||||
|
$('.js-directives').val(JSON.stringify(dir, null, 2));
|
||||||
|
}, function (err) {
|
||||||
|
console.error('[DEBUG] error:');
|
||||||
|
console.error(err);
|
||||||
|
}).then(function () {
|
||||||
|
$('.js-discover').removeAttr('disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
*/
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue