Rethinking User Registration with BrowserID

Christian Heilmann, Mozilla, London Ajax, December 2011

Making identity simple

Punishing the user?

The need for login systems…

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

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

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

Enter BrowserID

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

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>

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;
?>

Response from the service

{
  "status": "okay",
  "email": "email@example.com",
  "audience": "http://thewebrocks.com",
  "expires": 1323782796120,
  "issuer": "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!');
      }
    }
  };
}