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 >
2017-11-17 02:25:04 +00:00
< div class = "container" >
< div class = "jumbotron" >
< h1 > OAuth3< / h1 >
< p > A (mostly) client-side authentication and authorization framework for decentralized peer-to-peer and federated networks.
< / div >
< div class = "row" >
2017-11-17 06:15:53 +00:00
< div >
< h2 > OAuth3 Test Bed< / h2 >
<!--
< a class = "btn btn-primary" href = "azp.html" > Demo Authorized Party< / a >
< a class = "btn btn-primary" href = "issuer.html" > Demo Issuer< / a >
-->
< a class = "btn btn-primary" href = "playground.html" > Demo Authorized Party< / a >
< a class = "btn btn-primary" href = "playground.html" > Demo Issuer< / a >
< / div >
2017-11-09 03:44:13 +00:00
2017-11-17 02:25:04 +00:00
< div >
< h2 > Private, Peer-to-Peer, Anonymous: Pick any two... at a time< / h2 >
< ul >
< li > Privacy
< li > Peer-to-Peer
< li > Anonymity
< / ul >
< p > OAuth3's federated design allows it to work in all 3 modes of decentralization:
< ul >
< li > Private, Peer-to-Peer (Trusted model)
<!--
(Public / Private Keypair model)
For trusted parties OAuth3 defines how to exchange public keys on the client-side to
ensure that a resource owner's assets can be retrieved, without any involved.
-->
< li > Private, Anonymous (Escrow / Broker model)
<!--
(Escrow / Broker model)
When you want transactions to be both private and anonymous there
must be a mutual trusted authority to broker the transaction to ensure privacy without
disclosing identity. In the same way that a private escrow service can ensure a valid
between two untrusted participants, < em > any< / em > OAuth3 Issuer can broker identity and
privilege transactions between two parties.
-->
< li > Peer-to-Peer, Anonymous (Public Ledger model)
<!--
-->
< / ul >
2017-11-08 21:55:04 +00:00
< / div >
2017-11-17 02:25:04 +00:00
< h2 > Authentication, simplified< / h2 >
< ul >
< li > A single implementation
< li > No developer keys (uses tls authentication)
< li > Smart scope discovery
< / ul >
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 >
2017-07-27 17:55:03 +00:00
< / body >
2017-05-22 23:25:43 +00:00
< / html >
