begin OAuth3 Explorer & Playground
This commit is contained in:
parent
2500711b8c
commit
23765a97ef
220
index.html
220
index.html
|
@ -8,7 +8,7 @@
|
|||
<!-- <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">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
@ -142,59 +142,183 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fade js-playground">
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>OAuth3 Playground</h1>
|
||||
</div>
|
||||
<div class="fade js-playground" ng-app="oauth3Playground" ng-strict>
|
||||
<div ng-controller="PlaygroundCtrl as vm">
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>OAuth3 Playground</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Login Status:
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Current Sessions:
|
||||
</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 class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Go ahead, test our login</h2>
|
||||
|
||||
<label>Address:</label>
|
||||
<input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.user" ng-change="vm.fn.changeProvider()">
|
||||
<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">
|
||||
<button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.advanced = !vm.advanced">hide advanced</button>
|
||||
<button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.advanced = !vm.advanced">show advanced</button>
|
||||
<button class="btn btn-primary" ng-click="vm.fn.login()">Login</button>
|
||||
</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>
|
||||
|
||||
|
||||
<!--[if IE]><script src="bower_components/rsvp.js/rsvp.js"></script><![endif]-->
|
||||
<script src="./js/jquery-2.2.0.min.js"></script>
|
||||
<script src="./js/jquery.mask.min.js"></script>
|
||||
<script src="./js/bootstrap.min.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.core.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.crypto.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.issuer.js"></script>
|
||||
<script src="./js/issuer.js"></script>
|
||||
<script src="./js/script.js"></script>
|
||||
<script src="./js/playground.js"></script>
|
||||
<!--[if IE]><script src="bower_components/rsvp.js/rsvp.js"></script><![endif]-->
|
||||
<script src="./js/jquery-2.2.0.min.js"></script>
|
||||
<script src="./js/jquery.mask.min.js"></script>
|
||||
<script src="./js/bootstrap.min.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.core.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.crypto.js"></script>
|
||||
<script src="/assets/oauth3.org/oauth3.issuer.js"></script>
|
||||
<script src="./js/issuer.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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
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 expiry calculation
|
||||
// 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
|
||||
}
|
||||
|
||||
|
|
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 () {
|
||||
/*
|
||||
'use strict';
|
||||
|
||||
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