BrowserID
Pierre Rudloff, 16/05/2012 | Source: Blog technique de MozFR
De plus en plus de sites utilisent des systèmes de connexion sans mot de passe comme Facebook Connect ou OpenID. Ces systèmes permettent à l'utilisateur de se connecter rapidement en un ou deux clics.
Mozilla a sorti il y a quelque temps BrowserID[1], un système de connexion similaire, simple à mettre en place et peu contraignant pour l'utilisateur puisqu'il suffit de fournir une adresse e-mail valide pour se connecter.
L'intérêt d'un tel système est de permettre aux utilisateurs de se connecter rapidement sans avoir à taper leur mot de passe à chaque fois. De plus, il simplifie pour vous la gestion des comptes et renforce la sécurité de votre site puisque vous n'aurez pas à stocker les mots de passe de vos utilisateurs.
L'autre intérêt de BrowserID, c'est que contrairement aux autres systèmes qui transmettent tout un tas d'information sur l'utilisateur[2], BrowserID n'utilise lui que l'adresse e-mail et ne piste pas l'utilisateur[3].
Ce système est relativement facile à intégrer à un site web. Cependant, sachez qu'il vous faudra quand même de bonnes bases en PHP et en JavaScript. Si ce n'est pas votre cas, sachez qu'il existe tout un tas de plugins pour des CMS comme Drupal, SPIP ou WordPress.
Côté client, il suffit de charger le script include.js[4] et de lier la fonction navigator.id.get au clic du bouton de connexion.
Exemple en JavaScript :
var login, connect, loginBtn;
login = function (assertion) {
"use strict";
if (assertion) {
document.location = "login.php?assertion=" + assertion;
}
};
connect = function () {
"use strict";
navigator.id.get(login);
};
loginBtn = document.getElementById("login");
if (loginBtn.addEventListener) {
loginBtn.addEventListener("click", connect, false);
} else if (loginBtn.attachEvent) {
loginBtn.attachEvent("onclick", connect);
}
Exemple avec jQuery :
/*global $*/
var login, connect;
login = function (assertion) {
"use strict";
if (assertion) {
document.location = "login.php?assertion=" + assertion;
}
};
connect = function () {
"use strict";
navigator.id.get(login);
};
$(".loginBtn").bind("click", connect);
Quand l'utilisateur cliquera sur le bouton, une fenêtre va s'ouvrir et lui demander d'entrer son adresse e-mail.
Si c'est la première fois qu'il utilise BrowserID, il devra la valider (en cliquant sur un lien dans un mail) et sinon, il pourra se connecter directement.
Une fois que l'utilisateur a validé sa connexion, le script envoie une assertion (un hash contenant les informations de connexion) à la page indiquée (login.php dans l'exemple ci-dessus).
Il faut donc récupérer cette assertion côté serveur et la renvoyer au serveur de BrowserID qui va vérifier qu'elle est valide.
L'assertion doit être envoyée à https://browserid.org/verify avec une requête POST. Le serveur renvoie ensuite un objet JSON contenant l'adresse e-mail de l’utilisateur et l'état de la connexion.
Exemple en PHP avec curl :
$url = "https://browserid.org/verify";
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt(
$curl, CURLOPT_POSTFIELDS, "assertion=".strval(
$_GET["assertion"]
)."&audience=".$_SERVER["HTTP_HOST"]
);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$response=json_decode(strval(curl_exec($curl)));
curl_close($curl);
if ($response->status==="okay") {
//C'est bon
echo "Vous êtes connecté en tant que ".$response->email.".";
} else {
//C'est pas bon
echo "Erreur : ".$response->reason;
}
Exemple avec jQuery :
/*global $*/
function login(assertion) {
"use strict";
$.ajax({
type: "POST",
url: "https://browserid.org/verify",
data: {
assertion: assertion
},
success: function (res) {
var response = JSON.parse(res);
if (response.status === "okay") {
alert(response.email);
} else {
alert("Erreur : " + response.reason);
}
}
});
}
Et voilà, c'est tout. Si le statut est okay, vous n'avez plus qu'à ouvrir une session pour le compte qui utilise cette adresse e-mail.
Vous trouverez ici une petite démonstration qui montre comment se passe la connexion. (Le code de la démo est disponible sur le serveur SVN de StrasWeb.)
Notes
[1] Le projet est en train d'être renommé Persona, plus d'informations ici.
[2] Par exemple, Facebook Connect transmet toute une partie des informations du profil Facebook (nom, sexe, photo, liste d'amis, etc.) à chaque site auquel vous vous connectez.
[3] Pour l'instant, l'adresse e-mail et le domaine sont transmis à browserid.org à chaque connexion, mais, à terme, le système devrait être décentralisé.
[4] Le système est implémenté en JavaScript mais il est prévu à terme de l'implémenter directement dans Firefox.
