issuer.html/index.html

705 lines
33 KiB
HTML
Raw Normal View History

2017-05-22 23:25:43 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Facilitator: OAuth3.org</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.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">
<script src="https://use.fontawesome.com/3af0faae66.js"></script>
2017-11-09 03:44:13 +00:00
<!-- link rel="stylesheet" type="text/css" href="/css/daplie-installer-overrides.css" -->
</head>
2017-05-22 23:25:43 +00:00
2017-11-08 21:55:04 +00:00
<body>
<div class="fade mock-main">
2017-05-22 23:25:43 +00:00
<!-- STEP 1: ask the user where they want to log in -->
<!-- STEP 2: ask the user for their email -->
<!-- STEP 3+4: ask for login code and to remember device -->
<!-- TODO: remember-me-not implementation? -->
2017-05-22 23:25:43 +00:00
<!-- <button class="btn btn-secondary js-authz-show js-authz-remember-me-not">Just this once</button>-->
2017-05-22 23:25:43 +00:00
<!-- Step 5: ask for permissions -->
2017-05-22 23:25:43 +00:00
2017-06-19 19:53:03 +00:00
<div class="dap-bordered js-userid-container">
2017-07-12 16:44:28 +00:00
<p class="org-title">daplie.me</p>
<p class="dap-centered-text dap-normal-text welcome-text center-it">Welcome to a new way to login. daplie.me helps you create an Internet ID that allows you to choose what info is shared about you when you login into a site or app online.</p>
2017-05-22 23:25:43 +00:00
<form method="post" action="">
2017-06-19 19:53:03 +00:00
<div class="form-group">
<input type="email" class="form-control dap-input js-oauth3-email emailInput" placeholder="Enter an email address to start"></input>
</div>
<button class="dap-full-button-green js-authn-show btn btn-primary" disabled>Send authentication email</button>
2017-05-22 23:25:43 +00:00
</form>
2017-07-10 22:26:43 +00:00
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
2017-06-19 19:53:03 +00:00
<!-- <p class="dap-line-around">or</p>
2017-05-22 23:25:43 +00:00
<div class="dap-social-media dap-normal-text">
<span class="fa fa-2x fa-gray fa-facebook-square js-facebook-login"></span>
<span class="fa fa-2x fa-gray fa-twitter-square js-twitter-login"></span>
<span class="fa fa-2x fa-gray fa-google-plus-square js-google-login"></span>
<span class="fa fa-2x fa-gray fa-github-square js-github-login"></span>
<span class="fa fa-2x fa-gray fa-plus-square js-gitlab-login"></span>
</div>
<br>
2017-06-19 19:53:03 +00:00
<a href="./loginwhatis.html" target="_blank"><p class="dap-centered-text dap-help-text">What is this?</p></a> -->
2017-05-22 23:25:43 +00:00
</div>
<div class="dap-bordered js-authn">
2017-07-12 16:44:28 +00:00
<p class="org-title">daplie.me</p>
2017-06-19 19:53:03 +00:00
<!-- <div class="dap-normal-text">
2017-05-22 23:25:43 +00:00
<span class="fa fa-3x icon-centered-3x fa-purple fa-envelope"></span>
</div>
<p class="dap-centered-text dap-scrunch-top dap-normal-text">A special sign-in code was sent to:</p>
<p class="dap-centered-text dap-scrunch-both dap-purple-text"><span class="js-user-email">&nbsp;</span></p>
2017-06-19 19:53:03 +00:00
<p class="dap-centered-text dap-scrunch-bottom dap-med-text">Please enter the code below:</p> -->
<p class="code-sent-text">Hi, thanks for signing up.</p>
<p class="code-sent-text">Please enter the code sent to:</p>
<p class="code-sent-text email-address displayed"></p>
<p class="code-sent-text pb-40">Be sure to check your spam.</p>
<form class="twelve-digit-code" method="post" onsubmit="">
<div class="form-group">
<p class="code-lasts-text">Code lasts for 15 minutes.</p>
<input type="hidden" class="js-authn-otp-uuid">
<input class="dap-input js-authn-otp-code form-control" placeholder="XXXX-XXXX-XXXX" maxlength="14"></input>
2017-07-12 16:08:56 +00:00
<p class="error-msg"></p>
2017-06-19 19:53:03 +00:00
</div>
<div class="dap-centered-div dap-space-on-top form-group">
2017-05-22 23:25:43 +00:00
<label class="js-remember-label dap-normal-text">
2017-07-07 17:29:22 +00:00
<img src="./img/pressed-check.png" class="check js-remember-status">
2017-06-19 19:53:03 +00:00
<!-- <span class="fa fa-2x fa-purple fa-square-o dap-remember-margin js-remember-status"></span> -->
2017-05-22 23:25:43 +00:00
<span class="dap-remember-me noselect">Remember this device.</span>
2017-06-19 19:53:03 +00:00
<input class="js-remember-checkbox hidden" type="checkbox"></input>
2017-05-22 23:25:43 +00:00
</label>
</div>
<button type="submit" class="btn btn-primary submit-btn dap-full-button-green js-submit-code-btn" disabled>Submit</button>
2017-07-07 16:50:15 +00:00
<!-- <a href="./authnocode.html" target="_blank" class="btn btn-primary">Send Code Again</a> -->
2017-07-07 17:13:51 +00:00
<button class="btn btn-primary js-edit-email-button" type="button">Edit My Email</button>
2017-05-22 23:25:43 +00:00
</form>
2017-06-19 19:53:03 +00:00
<!-- <a href="./authnocode.html" target="_blank">
2017-05-22 23:25:43 +00:00
<p class="dap-centered-text dap-help-text">I didn't receive my code...</p>
</a>
<a href="./authnopass.html" target="_blank">
<p class="dap-centered-text dap-help-text">Why am I not using a password?</p>
2017-06-19 19:53:03 +00:00
</a> -->
2017-07-10 22:26:43 +00:00
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
2017-05-22 23:25:43 +00:00
</div>
<div class="dap-bordered dap-normal-text js-authz">
2017-07-12 16:44:28 +00:00
<p class="org-title">daplie.me</p>
2017-06-19 19:53:03 +00:00
<!-- <br> -->
<!-- <div class="dap-user-plus-app">
2017-05-22 23:25:43 +00:00
<span class="fa fa-3x fa-purple fa-user-circle"></span>
<span class="fa fa-2x fa-gray fa-plus"></span>
2017-06-19 19:53:03 +00:00
<img class="dap-lab-logo" src="./img/Daplie-Badge-Purple.png" alt="Daplie Labs Logo">
</div> -->
2017-07-27 19:06:05 +00:00
<p class="dap-centered-text dap-normal-text almost-done-text">Almost done. Now it's time to set your preferences.</p>
2017-05-22 23:25:43 +00:00
<br>
<form class="js-authorization-decision" action="#">
<ul class="js-scopes-container dap-app-auth-list">
2017-06-19 19:53:03 +00:00
<li class="checkbox dap-purple-text js-auth-li-enabled">
<img src="./img/pressed-check.png" class="check">
<span class="dap-small-text js-scope-desc noselect">&nbsp;</span>
<input class="checkbox js-scope-toggle js-auth-checkbox hidden" type="checkbox">
2017-05-22 23:25:43 +00:00
</li>
</ul>
<div>
2017-06-19 19:53:03 +00:00
<button class="dap-full-button-green js-login-allow btn btn-primary" type="button">AUTHORIZE THIS APP</button>
<button class="dap-full-button-pink js-login-deny btn btn-primary" type="button">Cancel</button>
2017-05-22 23:25:43 +00:00
</div>
</form>
2017-07-10 22:26:43 +00:00
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
2017-05-22 23:25:43 +00:00
</div>
<!-- TODO: Remove Inline Style - Hidden until added into process -->
<div style="display: none" class="dap-bordered dap-normal-text">
<br>
<div class="dap-user-plus-app">
<span class="fa fa-3x fa-purple fa-user-circle"></span>
<span class="fa fa-2x fa-gray fa-plus"></span>
<span class="fa fa-3x fa-purple fa-laptop"></span>
</div>
<p class="dap-centered-text dap-scrunch-top dap-normal-text">It looks like your user agent is</p>
<p><span class="js-sniffed-device"></span></p>
<p class="dap-centered-text dap-scrunch-bottom dap-med-text">How long would you like to trust this device?</p>
<button class="dap-3-4-button-green js-authz-remember-me">FOREVER</button>
<button class="dap-1-4-button-purple js-authz-remember-me-not">ONE DAY</button>
<span class="dap-help-text dap-3-4-span">Great if you aren't paranoid.</span>
<span class="dap-help-text dap-1-4-span">Great if you're paranoid.</span>
<br>
<br>
<br>
<br>
<p class="dap-centered-text dap-help-text">What is this?</p>
</div>
<div class="dap-bordered dap-normal-text js-logout-container">
2017-06-19 19:53:03 +00:00
<p class="dap-centered-text sign-out-text">Sign out of Daplie and all Applications?</p>
<button type="button" class="dap-full-button-green js-logout btn btn-primary">Sign Out</button>
2017-07-10 22:26:43 +00:00
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
2017-05-22 23:25:43 +00:00
</div>
2017-11-08 21:55:04 +00:00
</div>
2017-11-09 03:44:13 +00:00
<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>
2017-11-08 21:55:04 +00:00
</div>
2017-11-09 03:44:13 +00:00
<div class="row">
<div class="col-md-12">
<h2>Go ahead, test our login</h2>
2017-11-13 23:14:28 +00:00
<div ng-if="vm.error" class="alert alert-warning"><span ng-bind="vm.error.message"></span><button class="btn btn-danger pull-right" type="button" ng-click="vm.error = null">X</button></div>
2017-11-13 20:35:23 +00:00
<div ng-if="vm._working" class="alert alert-info">
<marquee>taking my sweet time to do something in the background...</marquee>
</div>
2017-11-14 00:59:43 +00:00
<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>
2017-11-13 20:35:23 +00:00
2017-11-09 03:44:13 +00:00
<label>Address:</label>
2017-11-14 00:59:43 +00:00
<input type="text" placeholder="ex: john@example.com (optional)" class="form-control" ng-model="vm.form.id" ng-change="vm.fn.changeUser()">
2017-11-09 03:44:13 +00:00
<label ng-if="vm.advanced">Identity Issuer:</label>
2017-11-14 00:59:43 +00:00
<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()">
2017-11-13 23:14:28 +00:00
<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>
2017-11-14 19:55:06 +00:00
<label><input type="checkbox" ng-model="vm.conf.debug" ng-change="vm.fn.updateDebug()"/> Debug OAuth3 Flow?</label>
2017-11-09 03:44:13 +00:00
</div>
2017-11-08 21:55:04 +00:00
</div>
2017-11-09 03:44:13 +00:00
<div class="row">
2017-11-13 20:35:23 +00:00
<div class="col-md-12">
<br/>
<br/>
<br/>
</div>
</div>
<div class="row">
<div class="col-md-12">
2017-11-09 03:44:13 +00:00
<div class="row">
<div class="col-md-12">
2017-11-13 20:35:23 +00:00
<h2>Debug & Status Info:</h2>
2017-11-09 03:44:13 +00:00
</div>
</div>
2017-11-16 03:00:11 +00:00
<div class="row">
<div class="col-md-12">
<h3>JavaScript Framework</h3>
<small>(yes, real runs-in-a-web-browser - and even on Android - ES5.1)</small>
<br>
<label><input name="framework" type="radio" ng-model="vm.framework" ng-value="'none'"/> ES5.1</label> (no framework)
<label><input name="framework" type="radio" ng-model="vm.framework" ng-value="'jquery'"/> jQuery</label>
<label><input name="framework" type="radio" ng-model="vm.framework" ng-value="'angularjs'"/> AngularJS</label>
<label><input name="framework" type="radio" ng-model="vm.framework" ng-value="'nodejs'"/> node.js</label>
<br>
<label><input name="framework" type="checkbox" checked="checked" disabled="disabled"/> azp<small>@oauth3.org</small></label>
<label><input name="framework" type="checkbox" ng-model="vm.components.issuer"/> issuer<small>@oauth3.org</small></label>
<br>
<pre ng-if="'nodejs' === vm.framework"><code>var OAUTH3 = require('oauth3.org');</code></pre>
<pre ng-if="'nodejs' !== vm.framework"><code>&lt;script src="/assets/oauth3.org/oauth3.core.js">&lt;/script><span ng-if="vm.components.issuer">
&lt;script src="/assets/oauth3.org/oauth3.crypto.js">&lt;/script>
&lt;script src="/assets/oauth3.org/oauth3.issuer.js">&lt;/script></span><span
ng-if="'none' === vm.framework || 'jquery' === vm.framework"></span><span ng-if="'angularjs' === vm.framework">
&lt;script src="/assets/oauth3.org/oauth3.ng.js">&lt;/script></span>
</code></pre>
</div>
</div>
2017-11-09 03:44:13 +00:00
<div class="row">
2017-11-14 00:59:43 +00:00
<br>
<br>
<div class="col-md-3">
<strong>Client URI</strong>: <span ng-bind="vm.conf.client_uri"></span>
2017-11-09 03:44:13 +00:00
<br>
2017-11-13 23:14:28 +00:00
(this is the URL of the application as per window.location.href)
2017-11-09 03:44:13 +00:00
</div>
2017-11-14 00:59:43 +00:00
<div class="col-md-9">
2017-11-09 03:44:13 +00:00
<input class="form-input" type="text" ng-model="vm.clientUri">
<button class="btn btn-default" ng-click="vm.api.clientUri()">Set</button>
2017-11-14 00:59:43 +00:00
<pre><code>OAUTH3.clientUri({ host: "<span ng-bind="vm.clientUri"></span>", port: null, pathname: '/' });</code></pre>
</div>
</div>
<div class="row">
<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>
2017-11-14 23:40:32 +00:00
<pre><code>issuer: <span ng-bind="vm.form.userProvider"></span></code></pre>
2017-11-14 00:59:43 +00:00
</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>
2017-11-14 23:40:32 +00:00
</div>
</div>
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Directives Discovery</strong>:
<br>
(this is how we learn if a server support oauth3 and to what extent)
</div>
<div class="col-md-9">
<button class="btn btn-default" ng-click="vm.fn.changeProvider()">Discover Directives</button>
2017-11-14 00:59:43 +00:00
<pre><code>OAUTH3.urls.discover("<span ng-bind="vm.form.provider"></span>", opts);</code></pre>
2017-11-16 22:21:02 +00:00
<pre ng-if="vm.urls.directives"><code><span ng-bind="vm.urls.directives"></span></code></pre>
2017-11-14 00:59:43 +00:00
<pre><code>OAUTH3.discover("<span ng-bind="vm.form.provider"></span>", opts);</code></pre>
2017-11-16 22:21:02 +00:00
<pre ng-if="vm.urls.discovery"><code><span ng-bind="vm.urls.discovery"></span></code></pre>
2017-11-14 00:59:43 +00:00
<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>
2017-11-14 19:55:06 +00:00
<div class="row">
<br>
<br>
<div class="col-md-3">
<strong>Scopes</strong>: <span ng-bind="vm.form.scopes"></span>
<br>
(these are used to lookup the descriptions of grant permissions)
</div>
<div class="col-md-9">
<input class="form-input" type="text" ng-model="vm.form.scopes" placeholder="ex: authn@oauth3.org,photos@example.com,dns@domains.org">
<button class="btn btn-default" ng-click="vm.api.discoverScopes()" ng-disabled="!vm.form.scopes">Discover Scopes</button>
<ul>
<li ng-repeat="scope in vm.defaults.scopes">
<label>
<input type="checkbox" ng-model="scope.checked" ng-change="vm.fn.updateScopes()"/>
<strong ng-bind="scope.name">name</strong>
</label>
<span ng-bind="scope.desc">desc</span>
</li>
</ul>
<pre><code>OAUTH3.urls.scope(directives, opts);</code></pre>
2017-11-16 22:21:02 +00:00
<pre ng-if="vm.urls.scope"><code><span ng-bind="vm.urls.scope"></span></code></pre>
<pre ng-if="vm.urls.discoverScope"><code><span ng-bind="vm.urls.discoverScope"></span></code></pre>
2017-11-14 19:55:06 +00:00
<pre><code>OAUTH3.discoverScopes(directives, opts);</code></pre>
<button ng-if="vm.scopesObj" class="btn btn-default" ng-click="vm.fn.clearScopes()">[X]</button>
<pre ng-if="vm.scopesObj"><code><span ng-bind="vm.scopesObj | json"></span></code></pre>
</div>
</div>
2017-11-14 00:59:43 +00:00
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
2017-11-14 20:02:01 +00:00
<strong>Authorization Dialog URL</strong>
2017-11-14 00:59:43 +00:00
<br>
2017-11-14 20:02:01 +00:00
(this is what opens the login dialog box with the checkboxes and such)
2017-11-14 00:59:43 +00:00
</div>
<div class="col-md-9">
2017-11-16 22:21:02 +00:00
<button class="btn btn-default" ng-click="vm.api.implicitGrant()" ng-disabled="!vm.directives || !vm.validated.provider">Open Authorization Dialog</button>
2017-11-14 00:59:43 +00:00
<pre><code>OAUTH3.urls.implicitGrant(directives, opts);</code></pre>
2017-11-16 22:21:02 +00:00
<pre ng-if="vm.urls.implicitGrant"><code><span ng-bind="vm.urls.implicitGrant"></span></code></pre>
2017-11-14 00:59:43 +00:00
<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>
2017-11-09 03:44:13 +00:00
</div>
</div>
2017-11-16 22:21:02 +00:00
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Logout Dialog URL</strong>
<br>
(this is what opens the logout dialog)
</div>
<div class="col-md-9">
<button class="btn btn-default" ng-click="vm.api.logout()" ng-disabled="!vm.directives || !vm.validated.provider">Open Logout Dialog</button>
<pre><code>OAUTH3.urls.logout(directives, opts);</code></pre>
<pre ng-if="vm.urls.logout"><code><span ng-bind="vm.urls.logout"></span></code></pre>
<pre><code>OAUTH3.logout(directives, opts);</code></pre>
</div>
</div>
2017-11-14 23:40:32 +00:00
<div class="row">
<h2>1st Party and App Login</h2>
2017-11-14 20:02:01 +00:00
<br>
<br>
<div class="col-md-3">
2017-11-14 23:40:32 +00:00
<strong>Credential Meta URL</strong>
2017-11-16 03:00:11 +00:00
<br>
2017-11-14 23:40:32 +00:00
<strong>(Not implemented... anymore)</strong>
2017-11-14 20:02:01 +00:00
<br>
(this is the endpoint that reports if the user exists and what their proof-strategy is)
</div>
<div class="col-md-9">
2017-11-14 23:40:32 +00:00
<button class="btn btn-default" ng-click="vm.api.authn.credentialMeta()" ng-disabled="true || !vm.directives || !vm.form.id">Check user details</button>
<pre><code>OAUTH3.authn.loginMeta(directives, { email: "<span ng-bind="vm.form.id"></span>" });</code></pre>
<pre ng-if="vm.urls.credentialMeta"><code><span ng-bind="vm.urls.credentialMeta"></span></code></pre>
<pre ng-if="vm.responses.credentialMeta"><code><span ng-bind="vm.responses.credentialMeta"></span></code></pre>
2017-11-14 20:02:01 +00:00
</div>
</div>
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Credential OTP URL</strong>
<br>
(this is the URL that sends your one-time password via email)
</div>
<div class="col-md-9">
2017-11-16 03:00:11 +00:00
<button class="btn btn-default" ng-click="vm.api.authn.otp()" ng-disabled="!vm.directives || !vm.form.id">Send OTP to user</button>
2017-11-14 23:40:32 +00:00
<pre><code>OAUTH3.authn.otp(directives, { email: "<span ng-bind="vm.form.id"></span>" });</code></pre>
<div ng-if="vm.urls.otp">
<pre><code><span ng-bind="vm.urls.otp.method"></span> <span ng-bind="vm.urls.otp.url"></span>
<span ng-if="vm.urls.otp.headers" ng-bind="vm.urls.otp.headers | json"></span>
<span ng-bind="vm.urls.otp.data | json"></span>
</code></pre>
<pre ng-if="vm.responses.otp"><code><span ng-bind="vm.responses.otp.status"></span>
<span ng-if="vm.responses.otp.headers" ng-bind="vm.responses.otp.headers | json"></span>
<span ng-bind="vm.responses.otp.data | json"></span>
</code></pre>
</div>
2017-11-14 20:02:01 +00:00
</div>
</div>
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Resource Owner Password URL</strong>
<br>
(this is the URL that native apps and APIs use to login)
<br>
(it's also a bit of a misnomer, it should be *proof* rather than password)
</div>
<div class="col-md-9">
2017-11-16 03:00:11 +00:00
<input class="form-input" type="text" ng-model="vm.form.otpCode" ng-change="vm.api.urls.resourceOwnerPassword()" placeholder="ex: XXXX-XXXX-XXXX">
<button class="btn btn-default" ng-click="vm.api.authn.resourceOwnerPassword()" ng-disabled="!vm.form.otpUuid || !vm.form.otpCode">Exchange Proof for Session</button>
<br>
<input class="form-input disabled" type="text" ng-model="vm.form.otpUuid" disabled>
2017-11-16 22:21:02 +00:00
<pre><code>OAUTH3.authn.resourceOwnerPassword(directives, <span ng-bind="vm.api.authn._ropOpts_ || 'opts'"></span>);</code></pre>
2017-11-16 03:00:11 +00:00
<div ng-if="vm.urls.resourceOwnerPassword">
<pre><code><span ng-bind="vm.urls.resourceOwnerPassword.method"></span> <span ng-bind="vm.urls.resourceOwnerPassword.url"></span>
<span ng-if="vm.urls.resourceOwnerPassword.headers" ng-bind="vm.urls.resourceOwnerPassword.headers | json"></span>
<span ng-bind="vm.urls.resourceOwnerPassword.data | json"></span>
</code></pre>
2017-11-16 22:21:02 +00:00
</div>
</div>
</div>
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Session</strong>
<br>
(this is the object that contains meta data about the session, including the access token itself)
</div>
<div class="col-md-9">
<pre ng-if="vm.responses.resourceOwnerPassword"><code><span ng-bind="vm.responses.resourceOwnerPassword.status"></span>
2017-11-16 03:00:11 +00:00
<span ng-if="vm.responses.resourceOwnerPassword.headers" ng-bind="vm.responses.resourceOwnerPassword.headers | json"></span>
<span ng-bind="vm.responses.resourceOwnerPassword.data | json"></span>
</code></pre>
2017-11-16 22:21:02 +00:00
2017-11-14 20:02:01 +00:00
</div>
</div>
2017-11-16 03:00:11 +00:00
<div class="row" ng-if="vm.validated.provider">
2017-11-14 00:59:43 +00:00
<br>
<br>
<div class="col-md-3">
2017-11-16 22:21:02 +00:00
<strong>Access Token</strong>
2017-11-16 03:00:11 +00:00
<br>
2017-11-16 03:23:35 +00:00
(this is the access token)
2017-11-09 03:44:13 +00:00
</div>
2017-11-14 00:59:43 +00:00
<div class="col-md-9">
2017-11-16 22:21:02 +00:00
<pre><code>OAUTH3.jwt.decode(token);</code></pre>
2017-11-16 03:00:11 +00:00
<textarea class="form-control" ng-model="vm.accessToken" ng-change="vm.api.jwt.decode()"></textarea>
2017-11-16 22:21:02 +00:00
<button class="btn btn-default" ng-click="vm.api.jwt.decode()" ng-disabled="!vm.refreshToken">Decode Access Token</button>
2017-11-16 03:00:11 +00:00
<textarea ng-if="vm.refreshToken" class="form-control" ng-model="vm.refreshToken" ng-change="vm.api.jwt.decodeRefresh()"></textarea>
2017-11-16 22:21:02 +00:00
<button ng-if="vm.refreshToken" class="btn btn-default" ng-click="vm.api.jwt.decodeRefresh()" ng-disabled="!vm.refreshToken">Decode Refresh Token</button>
2017-11-16 03:00:11 +00:00
2017-11-16 05:32:23 +00:00
<pre ng-if="vm.ropToken"><code ng-bind="vm.ropToken | json"></code></pre>
2017-11-09 03:44:13 +00:00
</div>
</div>
2017-11-14 00:59:43 +00:00
2017-11-16 03:00:11 +00:00
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
2017-11-14 00:59:43 +00:00
<div class="col-md-3">
2017-11-16 22:21:02 +00:00
<strong>Token Issuer's Public Key</strong>
2017-11-16 03:00:11 +00:00
<br>
2017-11-16 03:23:35 +00:00
<strong>(not implemented)</strong>
<br>
(this is the URL that inspects and verifies the token)
2017-11-09 03:44:13 +00:00
</div>
2017-11-14 00:59:43 +00:00
<div class="col-md-9">
2017-11-16 22:21:02 +00:00
<button class="btn btn-default" ng-click="vm.api.authn.jwk()" ng-disabled="!vm.directives">Fetch Token Issuer's Public Key</button>
<pre><code>OAUTH3.authn.jwk(directives, token);</code></pre>
2017-11-16 03:00:11 +00:00
2017-11-16 22:21:02 +00:00
<div ng-if="vm.urls.jwk">
<pre><code><span ng-bind="vm.urls.jwk.method"></span> <span ng-bind="vm.urls.jwk.url"></span>
<span ng-if="vm.urls.jwk.headers" ng-bind="vm.urls.jwk.headers | json"></span>
<span ng-bind="vm.urls.jwk.data | json"></span>
2017-11-16 03:00:11 +00:00
</code></pre>
2017-11-16 22:21:02 +00:00
<pre ng-if="vm.responses.jwk"><code><span ng-bind="vm.responses.jwk.status"></span>
<span ng-if="vm.responses.jwk.headers" ng-bind="vm.responses.jwk.headers | json"></span>
<span ng-bind="vm.responses.jwk.data | json"></span>
2017-11-16 03:00:11 +00:00
</code></pre>
2017-11-16 22:21:02 +00:00
</div>
</div>
</div>
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Verify JWT</strong>
<br>
<strong>(not implemented)</strong>
<br>
(ppids can be verified via the public key of the issuer)
</div>
<div class="col-md-9">
<label>JWK</label>
<textarea class="form-control" ng-model="vm.responses.jwk.data"></textarea>
<br>
<label>Access Token</label>
<textarea class="form-control" ng-model="vm.accessToken"></textarea>
<br>
<button class="btn btn-default" ng-click="vm.api.jwt.verify()" ng-disabled="!vm.directives || !vm.responses.jwk.data">Verify JWT</button>
<pre><code>OAUTH3.jwt.verify(token, jwk);</code></pre>
<pre><code><span ng-bind="vm.responses.verify"></code></pre>
2017-11-16 03:00:11 +00:00
</div>
2017-11-09 03:44:13 +00:00
</div>
</div>
2017-11-14 00:59:43 +00:00
2017-11-16 22:21:02 +00:00
<div class="row" ng-if="vm.validated.provider">
<br>
<br>
<div class="col-md-3">
<strong>Exchange Opaque Token</strong>
<br>
<strong>(not implemented)</strong>
<br>
(Opaque tokens are issued serverside - like a traditional OAuth2 token - and do not contain a subject and, therefore, cannot identify a user directly.
They may be used by multiple audiences client-side, but must be exchanged by authorized parties for a ppid access token to verify identity serverside.
They can be refreshed without changing the JTI.)
</div>
<div class="col-md-9">
<textarea class="form-control" ng-model="vm.form.opaqueToken"></textarea>
<button class="btn btn-default" ng-click="vm.api.authz.exchange()" ng-disabled="!vm.directives || !vm.responses.jwk.data">Exchange Opaque Token</button>
<textarea ng-if="vm.refreshToken" class="form-control" ng-model="vm.refreshToken"></textarea>
2017-11-16 03:00:11 +00:00
2017-11-16 22:21:02 +00:00
<pre><code>OAUTH3.authz.exchange(directives, token);</code></pre>
<div ng-if="vm.urls.exchange">
<pre><code><span ng-bind="vm.urls.exchange.method"></span> <span ng-bind="vm.urls.exchange.url"></span>
<span ng-if="vm.urls.exchange.headers" ng-bind="vm.urls.exchange.headers | json"></span>
<span ng-bind="vm.urls.exchange.data | json"></span>
</code></pre>
<pre ng-if="vm.responses.exchange"><code><span ng-bind="vm.responses.exchange.status"></span>
<span ng-if="vm.responses.exchange.headers" ng-bind="vm.responses.exchange.headers | json"></span>
<span ng-bind="vm.responses.exchange.data | json"></span>
</code></pre>
</div>
</div>
</div>
2017-11-16 03:00:11 +00:00
2017-11-09 03:44:13 +00:00
<div class="row">
2017-11-16 03:23:35 +00:00
<br>
<br>
2017-11-14 00:59:43 +00:00
<div class="col-md-3">
2017-11-16 05:32:23 +00:00
<strong>Approved Apps</strong>
2017-11-16 03:23:35 +00:00
<br>
(these are the public keys generated on remember-me devices and the opaque tokens issued to remember-me-not devices)
2017-11-09 03:44:13 +00:00
</div>
2017-11-14 00:59:43 +00:00
<div class="col-md-9">
2017-11-16 05:32:23 +00:00
<button class="btn btn-default" ng-click="vm.api.authz.grants()" ng-disabled="!vm.form.accessToken">List App Grants</button>
2017-11-16 03:23:35 +00:00
<br>
2017-11-16 05:32:23 +00:00
<pre><code>OAUTH3.urls.grants(directives, opts);</code></pre>
<pre><code>OAUTH3.authz.grants(directives, <span ng-bind="vm.api.authz._grantsOpts_"></span>);</code></pre>
<div ng-if="vm.urls.grants">
<pre><code><span ng-bind="vm.urls.grants.method"></span> <span ng-bind="vm.urls.grants.url"></span>
<span ng-if="vm.urls.grants.headers" ng-bind="vm.urls.grants.headers | json"></span>
<span ng-bind="vm.urls.grants.data | json"></span>
2017-11-16 03:23:35 +00:00
</code></pre>
2017-11-16 05:32:23 +00:00
<pre ng-if="vm.responses.grants"><code><span ng-bind="vm.responses.grants.status"></span>
<span ng-if="vm.responses.grants.headers" ng-bind="vm.responses.grants.headers | json"></span>
<span ng-bind="vm.responses.grants.data | json"></span>
2017-11-16 03:23:35 +00:00
</code></pre>
</div>
2017-11-09 03:44:13 +00:00
...
</div>
</div>
2017-11-14 00:59:43 +00:00
2017-11-09 03:44:13 +00:00
<div class="row">
2017-11-14 00:59:43 +00:00
<div class="col-md-3">
2017-11-09 03:44:13 +00:00
Approved Applications:
</div>
2017-11-14 00:59:43 +00:00
<div class="col-md-9">
2017-11-09 03:44:13 +00:00
...
</div>
</div>
</div>
2017-11-13 20:35:23 +00:00
</div>
<div class="row">
<div class="col-md-12">
<br/>
<br/>
<br/>
</div>
</div>
<div class="row">
2017-11-16 22:21:02 +00:00
<div class="col-md-12">
<h2>Live API</h2>
<small>these are what's actually on the object</small>
<pre><code ng-bind="vm.apistr"></code></pre>
</div>
</div>
<div class="row">
2017-11-13 20:35:23 +00:00
<div class="col-md-12">
2017-11-09 03:44:13 +00:00
<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>
2017-11-08 21:55:04 +00:00
</div>
2017-11-09 03:44:13 +00:00
</div>
2017-11-08 21:55:04 +00:00
</div>
</div>
2017-05-22 23:25:43 +00:00
2017-11-09 03:44:13 +00:00
<!--[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>
2017-05-22 23:25:43 +00:00
</body>
2017-05-22 23:25:43 +00:00
</html>