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.

1. Building Persona
federated & privacy-sensitive
identity for the web
François Marier – @fmarier

6. solving the
password problem
on the web

7. X
Username:
francois
Password:
****************
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
0 1 3
2
per-user salt
o rd
site secret
s s w s
p a & lockoutne
li policies
password
id e
g u
secure recovery

22. conversion
rate

23. # hits
signup

24. # hits
signup signup_complete

25. # hits
lost
cust-
omers
signup signup_complete

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. decentralized
privacy-sensitive

35. decentralized
privacy-sensitive
simple

36. decentralized
privacy-sensitive
simple
open source

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. assertion
linux.conf.au
Valid for: 2 minutes

54. assertion
linux.conf.au
Valid for: 2 minutes
check audience

55. assertion
linux.conf.au
Valid for: 2 minutes
check audience
check expiry

56. assertion
linux.conf.au
Valid for: 2 minutes
check audience
check expiry
check signature

57. assertion
public key
linux.conf.au
Valid for: 2 minutes

58. assertion
linux.conf.au
Valid for: 2 minutes

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. postMessage
localStorage
https://login.persona.org

88. postMessage
localStorage
https://login.persona.org
questions?

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. function do_login() {
<?php
navigator.id.request();
}
if (!empty($_POST)) {
function do_logout() {
$result = verify_assertion($_POST['assertion']);
navigator.id.logout();
if ($result->status === 'okay') {
}
print_header();
echo "<p>Logged in as: " . $result->email . "</p>";
navigator.id.watch({
echo '<p><a href="javascript:do_logout()">Logout</a></p>';
loggedInUser: $email,
print_backLink();
onlogin: function (assertion) {
print_footer($result->email); alert("onlogin: $email");
} else {
var assertion_field =
print_header();
document.getElementById("assertion-field");
echo "<p>Error: " . $result->reason . "</p>"; assertion_field.value = assertion;
print_backLink();
var login_form = document.getElementById("login-form");
print_footer();
login_form.submit();
} },
} elseif (!empty($_GET['logout'])) {
onlogout: function () {
print_header();
alert("onlogout: $email");
echo "<p>You have logged out.</p>";
window.location = '?logout=1';
print_backLink();
}
print_footer();
});
} else {
</script></body></html>
print_header();
EOF;
echo "<p><a href="javascript:do_login()">Login</a></p>";
}
print_footer();
}
function verify_assertion($assertion) {
$audience = ($_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://')
function print_header() {
. $_SERVER['SERVER_NAME'] . ':' . $_SERVER['SERVER_PORT'];
echo <<<EOF $postdata = 'assertion=' . urlencode($assertion) . '&audience='
<!DOCTYPE html><html><head><meta charset="utf-8"></head>
. urlencode($audience);
<body>
<form id="login-form" method="POST"> $ch = curl_init();
<input id="assertion-field" type="hidden" name="assertion" value="">
curl_setopt($ch, CURLOPT_URL,
</form>
"https://verifier.login.persona.org/verify");
EOF; curl_setopt($ch, CURLOPT_POST, true);
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata);
function print_backLink() {
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
echo "<p><a href="persona.php">Back to login page</a></p>";
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
}
$json = curl_exec($ch);
curl_close($ch);
function print_footer($email = 'null') {
if ($email !== 'null') {
$res = json_decode($json);
$email = "'$email'";
$res->status = 'okay';
}
$res->email = 'francois@mozilla.com';
echo <<<EOF
return $res;
<script src="http://127.0.0.1:10002/include.orig.js"></script>
}
<script> ?>

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. Photo credits:
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/
© 2013 François Marier <francois@mozilla.com>
This work is licensed under a
Creative Commons Attribution-ShareAlike 3.0 New Zealand License.

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. 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"
}

130. 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"
}

131. 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"
}

132. 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"
}

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