Presentation: Rethinking User Registration with BrowserID

Rethinking User Registration with BrowserID

Christian Heilmann, Mozilla, London Ajax, December 2011

Today I want to talk about login systems of the web, just how broken and annoying they are and how browserID is a good solution for this issue.

Making identity simple

Spartacus echo machine

One of the biggest problems of the web is that of identity - it is a wide ranging topic, and, at least to me the most important thing to fix.

Punishing the user?

Gatwick express

Let me tell you a story of woe about trying to get a ticket for the Gatwick express.

The need for login systems…

In a perfect world, we wouldn't have to validate users at all. Sadly the web is far from being perfect and the main issue is that when you make it simple for people to comment, spammers and trolls will be the people to do it. This video is a great example for that. The author raised a discussion that he could make any atheist change because of one simple question and allowed people to annotate his video to give their opinions on what he said. As you can see that backfired. The sad thing is that nearly none of the annotations have anything to do with the subject at hand.

Our identification systems suck!

  • Go to kittensrule.com
  • Click register
  • Enter a massive form with all your data.
  • Choose a user name that is not taken yet
  • Provide an email to verify your identity
  • Retrieve email
  • Go back to web site
  • Choose a "secure" password, like g0damn!7~l3tme!n

The normal system to get access to something is annoying and verbose

Coming back

  • Go to kittensrule.com
  • Click login
  • Enter username
  • Enter password - damn what was it again?
  • Try three times and get asked to reset it.
  • Retrieve email
  • Go back to web site
  • Choose a new "secure" password, like u77rbo||0x

Forcing users to remember usernames and passwords means they will forget them over and over again and go through the same annoying process.

What happens?

  • People use the same username and password everywhere
  • People constantly reset passwords
  • People open new accounts and let the old one sleep
  • We're wasting a lot of time, money and leave insecure trails ripe for abuse

What happens?

  • People use "1 Password" solutions
  • Epic battle of memorisable vs. safe passwords
  • People don't lock their systems at all

Third party login?

  • Simpler, but you over-share
  • Do you know what the third party login button records?
  • What if the service goes down or becomes irrelevant?

Lock-in

Puppy behind bars

Enter BrowserID

  • Go to kittensrule.com
  • Click button
  • Provide a verified email as your identity
  • Watch kittens! squee!

BrowserID shortcuts the whole system by making a verified email your identity.

Openphoto with BrowserID

What is BrowserID?

  • A very simple way to identify yourself on the web
  • Store your email(s) as your identity(ies)
  • The validation happens in the browser and with a trusted provider or on your own server

What is BrowserID?

  • BrowserID is a protocol, not a service and is fully decentralised
  • It is driven by Mozilla, but independent of it

What is BrowserID?

  • BrowserID works in any modern browser (and IE8)
  • Right now, it is a JavaScript library and a validation service
  • You can also have an add-on to avoid the popup

What is BrowserID?

  • Sites (email providers) can become identity providers
  • You do not give access to your emails, social graph, or other data.
  • Apps won't store your data at all = hacks are less dangerous
  • You can have several identities, and you can allow BrowserID to remember them.

Invoking a BrowserID verification

<script src="https://browserid.org/include.js"></script> <script> navigator.id.getVerifiedEmail(function(assertion) { if (assertion) { // now go and verify - simple XHR will do } else { alert('Whooooo are you? who? who? who? who?...'); } }); </script>

Asking the browser to verify with browserID is dead simple. All you need to do is ask it for getVerifiedEmail().

Plain JS example

(function(){ var request, but = document.querySelector('button'), h1 = document.querySelector('h1'); but.addEventListener('click', function(ev) { navigator.id.getVerifiedEmail(function(assertion) { if (assertion) { verify(assertion); } else { alert('I still don\'t know you...'); } }); }, false); function verify(assertion) { … } }());

Plain JS example

function verify(assertion) { request = new XMLHttpRequest(); var parameters = 'assert=' + assertion; request.open('POST', 'verify.php'); request.setRequestHeader('If-Modified-Since', 'Wed, 05 Apr 2006 00:00:00 GMT'); request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); request.setRequestHeader('Content-length', parameters.length); request.setRequestHeader('Connection', 'close'); request.send(encodeURI(parameters));

Verifying the email (via web service)

<?php $url = 'https://browserid.org/verify'; $assert = $_POST['assert']; $params = 'assertion='.$assert.'&audience=' . urlencode('http://thewebrocks.com'); $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,CURLOPT_POST,2); curl_setopt($ch,CURLOPT_POSTFIELDS, $params); $result = curl_exec($ch); curl_close($ch); echo $result; ?>

To verify the email you can host the code yourself or do a simple call to a web service right now provided by browserid.org.

Response from the service

{ "status": "okay", "email": "email@example.com", "audience": "http://thewebrocks.com", "expires": 1323782796120, "issuer": "browserid.org" }

To verify the email you can host the code yourself or do a simple call to a web service right now provided by browserid.org.

Plain JS example

request.onreadystatechange = function() { if (request.readyState == 4){ if (request.status && (/200|304/).test(request.status)) { response = JSON.parse(request.responseText); if(response.status === 'okay') { message = 'Well, hi there, '+response.email; var p = document.createElement('p'); p.innerHTML = message; but.parentNode.replaceChild(p,but); h1.innerHTML = 'Woohoo, I know you!'; } } else{ alert('couldn\'t log you in. Sad panda now!'); } } }; }

BrowserID

Freedom!

Happy puppy

Pragmatism

  • The browser and the hardware is already a way to identify
  • The privacy and the identity is the freedom and the task of the user
  • BrowserID verifies you - you can take that with you
  • Logged into a mail provider? Let's use that
  • Mobile support - let's not try data entry when it is not needed

Power and responsibility to the user

  • BrowserID is part of a larger movement to liberate users
  • Instead of duplicating what users do, we can tie into it
  • The web is the distribution platform

Apps / Web intents + activities

Open web apps is the next level of where apps on the web can go.

Web intents/activities rock!

  • Re-use of existing services without giving access
  • Keep storage of data in the hands of the user

How can you help?

Everybody can help

Inspired? Like what you see? We need you to make this happen!

More honesty, less ninjas!

Everybody can help

You don't need to be an expert and full of awesome to be part of this. We need people to be honest about their abilities and ask for support when they need it and the web needs supporters and spokespeople on all levels.

You can…

  • play with BrowserID
  • build apps in HTML5/CSS/JS - release is today!
  • review the BrowserID field guide
  • Join mailinglists, visit us on irc.mozilla.org #identity
  • Tweet, blog and talk about all of this!

Time to play!

Dog wants to play