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 >
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 > < script src="/assets/oauth3.org/oauth3.core.js">< /script>< span ng-if = "vm.components.issuer" >
< script src="/assets/oauth3.org/oauth3.crypto.js">< /script>
< script src="/assets/oauth3.org/oauth3.issuer.js">< /script>< / span > < span
ng-if="'none' === vm.framework || 'jquery' === vm.framework">< / span > < span ng-if = "'angularjs' === vm.framework" >
< script src="/assets/oauth3.org/oauth3.ng.js">< /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
< 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 >
