349 lines
15 KiB
HTML
349 lines
15 KiB
HTML
<!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>
|
|
<!-- link rel="stylesheet" type="text/css" href="/css/daplie-installer-overrides.css" -->
|
|
</head>
|
|
|
|
<body>
|
|
<div class="fade mock-main">
|
|
|
|
<!-- 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? -->
|
|
|
|
<!-- <button class="btn btn-secondary js-authz-show js-authz-remember-me-not">Just this once</button>-->
|
|
|
|
<!-- Step 5: ask for permissions -->
|
|
|
|
<div class="dap-bordered js-userid-container">
|
|
<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>
|
|
<form method="post" action="">
|
|
<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>
|
|
</form>
|
|
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
|
|
<!-- <p class="dap-line-around">or</p>
|
|
<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>
|
|
<a href="./loginwhatis.html" target="_blank"><p class="dap-centered-text dap-help-text">What is this?</p></a> -->
|
|
</div>
|
|
|
|
<div class="dap-bordered js-authn">
|
|
<p class="org-title">daplie.me</p>
|
|
<!-- <div class="dap-normal-text">
|
|
<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"> </span></p>
|
|
<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>
|
|
<p class="error-msg"></p>
|
|
</div>
|
|
<div class="dap-centered-div dap-space-on-top form-group">
|
|
<label class="js-remember-label dap-normal-text">
|
|
<img src="./img/pressed-check.png" class="check js-remember-status">
|
|
<!-- <span class="fa fa-2x fa-purple fa-square-o dap-remember-margin js-remember-status"></span> -->
|
|
<span class="dap-remember-me noselect">Remember this device.</span>
|
|
<input class="js-remember-checkbox hidden" type="checkbox"></input>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary submit-btn dap-full-button-green js-submit-code-btn" disabled>Submit</button>
|
|
<!-- <a href="./authnocode.html" target="_blank" class="btn btn-primary">Send Code Again</a> -->
|
|
<button class="btn btn-primary js-edit-email-button" type="button">Edit My Email</button>
|
|
</form>
|
|
<!-- <a href="./authnocode.html" target="_blank">
|
|
<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>
|
|
</a> -->
|
|
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
|
|
</div>
|
|
|
|
<div class="dap-bordered dap-normal-text js-authz">
|
|
<p class="org-title">daplie.me</p>
|
|
<!-- <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>
|
|
<img class="dap-lab-logo" src="./img/Daplie-Badge-Purple.png" alt="Daplie Labs Logo">
|
|
</div> -->
|
|
<p class="dap-centered-text dap-normal-text almost-done-text">Almost done. Now it's time to set your preferences.</p>
|
|
<br>
|
|
|
|
<form class="js-authorization-decision" action="#">
|
|
<ul class="js-scopes-container dap-app-auth-list">
|
|
<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"> </span>
|
|
<input class="checkbox js-scope-toggle js-auth-checkbox hidden" type="checkbox">
|
|
</li>
|
|
</ul>
|
|
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</form>
|
|
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
|
|
</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">
|
|
<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>
|
|
<img src="./img/sponsored-by.png" class="sponsored-by-logo">
|
|
</div>
|
|
</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-12">
|
|
<h2>Go ahead, test our login</h2>
|
|
|
|
<div ng-if="vm.error" ng-bind="vm.error.message" class="alert alert-warning">err</div>
|
|
<div ng-if="vm._working" class="alert alert-info">
|
|
<marquee>taking my sweet time to do something in the background...</marquee>
|
|
</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()">
|
|
<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()">
|
|
<button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.fn.toggleAdvanced()">hide advanced</button>
|
|
<button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.fn.toggleAdvanced()">show advanced</button>
|
|
<button class="btn btn-primary" ng-click="vm.fn.login()" ng-disabled="!vm.validated.provider">Login</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>Debug & Status Info:</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>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<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/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>
|