2017-05-22 23:25:43 +00:00
<!DOCTYPE html>
< html >
2017-07-27 17:55:03 +00:00
< 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" -->
2017-07-27 17:55:03 +00:00
< / 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
2017-07-27 17:55:03 +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
2017-07-27 17:55:03 +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
2017-07-27 17:55:03 +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" > < / 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 >
2017-08-01 17:39:20 +00:00
< 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" > < / 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 >
< 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 >
2017-11-08 21:55:04 +00:00
< / div >
2017-11-09 03:44:13 +00:00
< 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 >
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
2017-07-27 17:55:03 +00:00
< / body >
2017-05-22 23:25:43 +00:00
< / html >
