Building Persona: federated and privacy-sensitive identity for the Web

This talk explores the challenges of the existing Web identity solutions and introduce the choices that were made during the development of Persona (formerly BrowserID), a new Open Source federated identity solution from Mozilla, designed and built to respect user privacy.

Transcript

1. François Marier – @fmarier B u i l d i n g P e r s o n a federated & privacy-sensitive identity for the web
6. solving the password problem on the web
7. Username: francois Password: **************** X Sign in
8. security
15. bcrypt per-user salt site secret password & lockout policies secure recovery
16. bcrypt per-user salt site secret password & lockout policies secure recovery
17. bcrypt per-user salt site secret password & lockout policies secure recovery
18. bcrypt per-user salt site secret password & lockout policies secure recovery
19. bcrypt per-user salt site secret password & lockout policies secure recovery
20. bcrypt per-user salt site secret password & lockout policies secure recovery 2013 2013 password password guidelines guidelines
22. conversion rate
23. # hits signup
24. # hits signup signup_complete
25. # hits signup signup_complete l o s t cust- omers
26. existing solutions
27. client certificates
28. centralized authorities
30. so... storing passwords is hard
31. so... storing passwords is hard no suitable alternatives
33. decentralized
34. privacy-sensitive decentralized
35. privacy-sensitive simple decentralized
36. privacy-sensitive simple open source decentralized
37. in your browser
38. how does it work?
39. francois@mozilla.com
40. getting a proof of email ownership
41. authenticate?
42. authenticate? public key
43. authenticate? public key signed public key
44. you have a signed statement from your provider that you own your email address
52. logging into a 3rd party site
53. Valid for: 2 minutes linux.conf.au assertion
54. Valid for: 2 minutes linux.conf.au check audience assertion
55. Valid for: 2 minutes linux.conf.au check audience check expiry assertion
56. Valid for: 2 minutes linux.conf.au check audience check expiry check signature assertion
57. assertion Valid for: 2 minutes linux.conf.au public key
58. assertion Valid for: 2 minutes linux.conf.au
59. assertion session cookie
60. achieving that vision
62. email providers browser vendors
63. email providers
64. fmarier@gmail.com
65. fmarier@gmail.com
66. fallback identity provider
70. persona.org account
71. support for all email providers
72. browser vendors
73. navigator.id.*
77. js
78. support for all modern browsers >= 8
79. support for all modern browsers >= 8
80. L I F D
81. Locally Isolated Feature Domain
82. wanted: trusted code running in the browser
83. login.persona.org
84. localStorage localStorage.setItem("key", serializedKey); var serializedKey = localStorage.getItem("key");
85. storage tied to login.persona.org
86. window.postMessage()
87. https://login.persona.org postMessage localStorage
88. https://login.persona.org localStorage questions? postMessage
89. live demo
90. using it on your site
92. <script src=”https://login.persona.org/include.js”> </script> </body></html>
93. navigator.id.watch({ loggedInEmail: “francois@mozilla.com”, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
94. navigator.id.watch({ loggedInUser: “francois@mozilla.com”, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
95. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
96. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { // do something } ); }, onlogout: function () { window.location = '/logout'; } });
97. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { window.location = '/'; } ); }, onlogout: function () { window.location = '/logout'; } });
99. navigator.id.request()
103. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { window.location = '/'; } ); }, onlogout: function () { window.location = '/logout'; } });
104. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { window.location = '/home'; } ); }, onlogout: function () { window.location = '/logout'; } });
105. def verify_assertion(assertion): page = requests.post( 'https://verifier.login.persona.org/verify', Data={ "assertion": assertion, "audience": 'http://123done.org'}) data = page.json return data.status == 'okay'
106. def verify_assertion(assertion): page = requests.post( 'https://verifier.login.persona.org/verify', Data={ "assertion": assertion, "audience": 'http://123done.org'}) data = page.json return data.status == 'okay'
107. { status: “okay”, audience: “http://123done.org”, expires: 1344849682560, email: “francois@mozilla.com”, issuer: “login.persona.org” }
108. { status: “failed”, reason: “assertion has expired” }
112. navigator.id.logout()
113. navigator.id.watch({ loggedInUser: null, onlogin: function (assertion) { $.post('/login', {assertion: assertion}, function (data) { window.location = '/home'; } ); }, onlogout: function () { window.location = '/logout'; } });
115. 1. load javascript library
116. 1. load javascript library 2. setup login & logout callbacks
117. 1. load javascript library 2. setup login & logout callbacks 3. add login and logout buttons
118. 1. load javascript library 2. setup login & logout callbacks 3. add login and logout buttons 4. verify proof of ownership
119. <?php if (!empty($_POST)) { $result = verify_assertion($_POST['assertion']); if ($result->status === 'okay') { print_header(); echo "<p>Logged in as: " . $result->email . "</p>"; echo '<p><a href="javascript:do_logout()">Logout</a></p>'; print_backLink(); print_footer($result->email); } else { print_header(); echo "<p>Error: " . $result->reason . "</p>"; print_backLink(); print_footer(); } } elseif (!empty($_GET['logout'])) { print_header(); echo "<p>You have logged out.</p>"; print_backLink(); print_footer(); } else { print_header(); echo "<p><a href=\"javascript:do_login()\">Login</a></p>"; print_footer(); } function print_header() { echo <<<EOF <!DOCTYPE html><html><head><meta charset="utf-8"></head> <body> <form id="login-form" method="POST"> <input id="assertion-field" type="hidden" name="assertion" value=""> </form> EOF; } function print_backLink() { echo "<p><a href=\"persona.php\">Back to login page</a></p>"; } function print_footer($email = 'null') { if ($email !== 'null') { $email = "'$email'"; } echo <<<EOF <script src="http://127.0.0.1:10002/include.orig.js"></script> <script> function do_login() { navigator.id.request(); } function do_logout() { navigator.id.logout(); } navigator.id.watch({ loggedInUser: $email, onlogin: function (assertion) { alert("onlogin: $email"); var assertion_field = document.getElementById("assertion-field"); assertion_field.value = assertion; var login_form = document.getElementById("login-form"); login_form.submit(); }, onlogout: function () { alert("onlogout: $email"); window.location = '?logout=1'; } }); </script></body></html> EOF; } function verify_assertion($assertion) { $audience = ($_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . $_SERVER['SERVER_NAME'] . ':' . $_SERVER['SERVER_PORT']; $postdata = 'assertion=' . urlencode($assertion) . '&audience=' . urlencode($audience); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://verifier.login.persona.org/verify"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); $json = curl_exec($ch); curl_close($ch); $res = json_decode($json); $res->status = 'okay'; $res->email = 'francois@mozilla.com'; return $res; } ?>
120. wanna help us solve the password problem?
121. add Persona to your project/site tell us about your experience email one site asking for it
122. add Persona to your project/site tell us about your experience email one site asking for it
123. add Persona to your project/site tell us about your experience email one site asking for it
124. grab some stickers!
125. 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
126. © 2013 François Marier <francois@mozilla.com> 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/ Elephant in room: https://secure.flickr.com/photos/bitboy/246805948/ Cookie on tray: https://secure.flickr.com/photos/jamisonjudd/4810986199/ Uncle Sam: https://secure.flickr.com/photos/donkeyhotey/5666065982/ Photo credits:
127. Who's using Persona?
128. 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" }
129. https://eyedee.me/.well-known/browserid: { "public-key": { "algorithm":"RS", "n":"8606...", "e":"65537" }, "authentication": "/browserid/sign_in.html", "provisioning": "/browserid/provision.html" } identity provider API
130. https://eyedee.me/.well-known/browserid: { "public-key": { "algorithm":"RS", "n":"8606...", "e":"65537" }, "authentication": "/browserid/sign_in.html", "provisioning": "/browserid/provision.html" } identity provider API
131. https://eyedee.me/.well-known/browserid: { "public-key": { "algorithm":"RS", "n":"8606...", "e":"65537" }, "authentication": "/browserid/sign_in.html", "provisioning": "/browserid/provision.html" } identity provider API
132. https://eyedee.me/.well-known/browserid: { "public-key": { "algorithm":"RS", "n":"8606...", "e":"65537" }, "authentication": "/browserid/sign_in.html", "provisioning": "/browserid/provision.html" } identity provider API
133. 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
134. 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
135. 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
136. 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