coolaj86/issuer.html
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

begin OAuth3 Explorer & Playground

Browse Source
This commit is contained in:
AJ ONeal 2017-11-09 03:44:13 +00:00
parent 2500711b8c
commit 23765a97ef
5 changed files with 44259 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
index.html
View File

@ -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
&lt;script src="oauth3.core.js"&gt;&lt;/script&gt;
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>

33889
js/angular-1.6.6.js Normal file
View File

File diff suppressed because it is too large Load Diff

10075
js/angular-ui-router-1.0.10.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
js/issuer.js
View File

@ -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
View File

@ -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');
});
});
*/
};