Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Easy logins for JavaScript web applications

Easy logins for JavaScript web applications

Handling user passwords safely is hard, but replacing passwords on the web in a reasonable way is even harder. Really, this should have been in the browser all along. In this talk you we will see how Persona attempts to solve this issue.

Francois Marier

October 08, 2013
Tweet

More Decks by Francois Marier

Other Decks in Programming

Transcript

  1. bcrypt / scrypt / pbkdf2 per-user salt site secret password

    & lockout policies secure recovery 2013 2013 password password guidelines guidelines
  2. navigator.id.watch({ loggedInEmail: “[email protected]”, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
  3. navigator.id.watch({ loggedInUser: “[email protected]”, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
  4. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
  5. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
  6. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { window.location = '/'; } ); }, onlogout: function () { window.location = '/logout'; } });
  7. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { window.location = '/'; } ); }, onlogout: function () { window.location = '/logout'; } });
  8. eyJhbGciOiJEUzEyOCJ9.eyJwdWJsaWMta2V5Ijp7ImFsZ29yaXRobSI6IkRTIiwieSI6ImNhZDg2ZDg yNWU0MjBkMGI4Njk5MjM4ZDM5ZTFjYjIyOGMyMTk1NWFiMzcwOTQ1YzExNzBhMzM4NjcyNDM0ZDJmNGY xZDg5ZjFkZjMzNmU1ZjZjZjk2YjhiOTlmMjgyNmFjNTYxZmI1YWMyYTc4ZjNhMzBkNGYxNTVhYjc3ZGE xYmY3MWU4ZGMzNjQ0MmU2NjQ3MmE5Mjg0N2I2YjFlNDRkMTJlM2IwMjVjOWZmNTFmNDdhMWE5ZWYyMGZ hOTVjMTcxZjBkMTYzNGE4ZTY4YTk5NWU3ZjFjY2FiYTJlOTRjYTI3ODE1ZWVkMTcxYjY1YTJmZGQzNTE 1NjY3OTI0ZjUiLCJwIjoiZmY2MDA0ODNkYjZhYmZjNWI0NWVhYjc4NTk0YjM1MzNkNTUwZDlmMWJmMmE 5OTJhN2E4ZGFhNmRjMzRmODA0NWFkNGU2ZTBjNDI5ZDMzNGVlZWFhZWZkN2UyM2Q0ODEwYmUwMGU0Y2M xNDkyY2JhMzI1YmE4MWZmMmQ1YTViMzA1YThkMTdlYjNiZjRhMDZhMzQ5ZDM5MmUwMGQzMjk3NDRhNTE 3OTM4MDM0NGU4MmExOGM0NzkzMzQzOGY4OTFlMjJhZWVmODEyZDY5YzhmNzVlMzI2Y2I3MGVhMDAwYzN mNzc2ZGZkYmQ2MDQ2MzhjMmVmNzE3ZmMyNmQwMmUxNyIsInEiOiJlMjFlMDRmOTExZDFlZDc5OTEwMDh

    lY2FhYjNiZjc3NTk4NDMwOWMzIiwiZyI6ImM1MmE0YTBmZjNiN2U2MWZkZjE4NjdjZTg0MTM4MzY5YTY xNTRmNGFmYTkyOTY2ZTNjODI3ZTI1Y2ZhNmNmNTA4YjkwZTVkZTQxOWUxMzM3ZTA3YTJlOWUyYTNjZDV kZWE3MDRkMTc1ZjhlYmY2YWYzOTdkNjllMTEwYjk2YWZiMTdjN2EwMzI1OTMyOWU0ODI5YjBkMDNiYmM 3ODk2YjE1YjRhZGU1M2UxMzA4NThjYzM0ZDk2MjY5YWE4OTA0MWY0MDkxMzZjNzI0MmEzODg5NWM5ZDV iY2NhZDRmMzg5YWYxZDdhNGJkMTM5OGJkMDcyZGZmYTg5NjIzMzM5N2EifSwicHJpbmNpcGFsIjp7ImV tYWlsIjoiZm9vQG1vY2tteWlkLmNvbSJ9LCJpYXQiOjEzNzY1MzY0NjM1MTgsImV4cCI6MTM3NjU0MDA 2MzUxOCwiaXNzIjoibW9ja215aWQuY29tIn0.IeUR0_3ayAZkdNSXjF4aaCwSHnHa4X1lzrjX-qkNcPI bXx1hmQQPwg~eyJhbGciOiJEUzEyOCJ9.eyJleHAiOjEzNzY1MzY3MDc2MzUsImF1ZCI6Imh0dHA6Ly9 sb2NhbGhvc3QifQ.NJ8H1qZcWXbXfPJSdgB_mORHQ442ZkY0XYfdQsZZsIjooG7k7qWyVw
  9. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { window.location = '/home'; } ); }, onlogout: function () { window.location = '/logout'; } });
  10. const verify = require('browserid-verify')(); verify(assertion, 'http://123done.org', function(err, email, response) {

    if (err) { return console.log(err); } if (email) { session.user = response.email; } else { delete session.user; } });
  11. const verify = require('browserid-verify')(); verify(assertion, 'http://123done.org', function(err, email, response) {

    if (err) { return console.log(err); } if (email) { session.user = response.email; } else { delete session.user; } });
  12. const verify = require('browserid-verify')(); verify(assertion, 'http://123done.org', function(err, email, response) {

    if (err) { return console.log(err); } if (email) { session.user = response.email; } else { delete session.user; } });
  13. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion},

    function (data) { window.location = '/home'; } ); }, onlogout: function () { window.location = '/logout'; } });
  14. 1. load javascript library 2. setup login & logout callbacks

    3. add login and logout buttons 4. verify proof of ownership
  15. 1. load javascript library 2. setup login & logout callbacks

    3. add login and logout buttons 4. verify proof of ownership no API key needed
  16. To learn more about Persona: https://login.persona.org/ http://identity.mozilla.com/ https://developer.mozilla.org/docs/Persona/Why_Persona https://developer.mozilla.org/docs/Persona/Quick_Setup https://github.com/mozilla/browserid-cookbook

    https://developer.mozilla.org/docs/Persona/Libraries_and_plugins http://123done.org/ https://wiki.mozilla.org/Identity#Get_Involved @fmarier http://fmarier.org
  17. identity provider API https://eyedee.me/.well-known/browserid: { "public-key": { "algorithm":"RS", "n":"8606...", "e":"65537"

    }, "authentication": "/browserid/sign_in.html", "provisioning": "/browserid/provision.html" }
  18. identity provider API 1. check for your /.well-known/browserid 2. try

    the provisioning endpoint 3. show the authentication page 4. call the provisioning endpoint again
  19. identity provider API 1. check for your /.well-known/browserid 2. try

    the provisioning endpoint 3. show the authentication page 4. call the provisioning endpoint again
  20. identity provider API 1. check for your /.well-known/browserid 2. try

    the provisioning endpoint 3. show the authentication page 4. call the provisioning endpoint again
  21. identity provider API 1. check for your /.well-known/browserid 2. try

    the provisioning endpoint 3. show the authentication page 4. call the provisioning endpoint again
  22. © 2013 François Marier <[email protected]> This work is licensed under

    a Creative Commons Attribution-ShareAlike 3.0 New Zealand License. Top 500 passwords: http://xato.net/passwords/more-top-worst-passwords/ Parchment: https://secure.flickr.com/photos/27613359@N03/6750396225/ Restaurant dinner: https://secure.flickr.com/photos/yourdon/3977084094/ Stop sign: https://secure.flickr.com/photos/artbystevejohnson/6673406227/ Photo credits: