If you have’t heard Mozilla identity labs has introduced a new way to login into sites called browserid. We have all become familiar with the “sign in with twitter” and “connect with Facebook” buttons on sites that enable us to have a centralised login to many of our favourite web services.

These centralised logins are very useful, but are ultimately controlled by a company. So into the breach steps Mozilla offering an openid type login service. Browserid is open source and you can choose to use mozilla as an authentication service or you can set up your own. I’m going to show you how to setup this service as a login and using Mozilla as the authenticator.

So assuming you have a login image with an Id attribute of “login” the following code should work in most modern browsers. I’m using jquery as the javascript framework.



$('document').ready(function (){

$('img.login').click(function(){
navigator.id.getVerifiedEmail(gotVerifiedEmail);
});

});
//this function is called in the above function
function gotVerifiedEmail(assertionObj){
If(assertionObj){
//Ajax to a login controller
$.ajax({
url:"/yourcontroller/youraction",
data:{assertion:assertionObj},
dataType:"json",
type:"post",
success:function(data,textStatus,jqXHR){
// do your thing
},
error:function(){
// something went wrong with ajax call
}
});
}else{
// something went wrong
}
}

So that’s the JavaScript part however we still need to verify the assertion with Mozilla. You can do this with JavaScript too. In the above code you would replace the call to your controller with
The following URL:
“https://browserid.org/verify?assertion=”+window.encodeURIComponent(assertionObj)+”&audience=”+window.encodeURIComponent(window.location.host);

In my controller class I do the following in a grails app:

def browserIdLogin ={

If(params.assertion){
def url = new URL(
"https://browserid.org/verify?assertion=${URLEncoder.encode(params.assertion)}&audience=
${URLEncoder.encode(request.getHeader('HOST'))}");

def jsonResponse= JSON.parse(url.text)

Println jsonResponse
}

}

// this will output something like [audience:localhost:8080, issuer:browserid.org:443, email:[email protected], status:okay, valid-until:1310908947530]

So you now you are dealing with an authentic user with authenic email address. Now you can do as you please. if this user already has an account you can load up their account details and set the session parameters etc or if they have no account you can send them to complete an account creation (if you need more details than the email address). After they complete this they can then sign in without needing to remember a password etc.

In php you could use the CURL library or open a socket etc or you could even just use


email;
?>

Anyway hope this is helpful. There is plenty of info on browserid and they also have example code.

© 2012 Craig Brookes Suffusion theme by Sayontan Sinha