Avec l'avènement du Web 2.0 et de ses fonctionnalités, l'ergonomie de nos sites web a radiqualement changé.

Nous allons étudier ici en détail la mise en place d'un formulaire de login en Ajax, basé sur la bibliothèque JQuery. Le formulaire de login de mon site fonctionne comme cela.

L'architecture

Le dispositif a besoin de 3 "briques" fonctionnelles :

• Le formulaire (HTML + CSS)
• Echange (bidirectionnel) de données entre le client et serveur (Javascript + JSON)
• Vérification du couple login/mot de passe (PHP + MySQL)

Pour simplifier, dans notre exemple, nous n'utiliserons pas de base MySQL mais nous vérifierons "en dur" les infos fournies par l'utilisateur.

Le formulaire (HTML + CSS)

On ne peut pas faire plus simple. Formulaire avec 2 champs et un bouton :

On se s'occupera pas du CSS associé car cela n'a pas d'utilité dans notre exemple

L'échange de données (Javascript + JSON)

L'envoi des infos saisies par l'utilisateur se fait par une fonction Javascript appelée lors du click sur le bouton "Envoyer". Cette fonction s'appuie sur la bibliothèque JQuery (http://jquery.com/). La fonction effectue un POST vers le script de vérification sur le serveur.

Le fonctionnement de la fonction est relativement simple (quand on connait un minimum Jquery !).

Ligne 1 : on affiche un joli icône animé de chargement dans un DIV prévu à cet effet (id="msg_login").

Ligne 2 et 3 : on récupère dans des variables les valeurs des champs login et password

ligne 4 : appel AJAX

ligne 5 : script appelé

ligne 6 : méthode utilisée

ligne 7 : pas de cache sur le client

ligne 8 : la réponse attendue du serveur est de type JSON

ligne 9 : valeurs du POST

ligne 10 : définition de la fonction déclenchée en cas de succès du POST

Le serveur répond {"grant": "1"} ou {"grant": "0"} si l'authentification a réussi ou échoué.

ligne 11 : si grant vaut "1", on recharge la page courante (les variables de session authentifiées ont été déclarées côté serveur)

Ligne 14 : si grant vaut "0", on écrit "Erreur de connexion !" dans le DIV (id="msg_login").

Ligne 15 : on vide le champ password

Vérification du couple login/mot de passe (PHP + MySQL)

Voici le contenu du script (/connexion.php) appelé par la fonction Javascript

Le script est simplifié à l'extrême (donc inutilisable tel quel !). L'idée est que si les infos fournies par l'utilisateur sont correctes, on déclare les variables de session qui font que l'on affiche la version adéquate du site (non décrit dans notre exemple) et l'on renvoie en réponse {"grant":"1"}.

Dans le cas contraire on renvoie {"grant":"0"}

La fonction Javascript "checkLogin" fera le reste côté client (voir paragraphe au dessus) !

Pour des sites intranet, demos, on a quelquefois besoin d'installer un serveur web sécurisé (https). Pour ce faire, un certificat est indispensable. Vous pouvez acheter un certificat émis par une autorité de confiance ou alors en générer un vous-même.
Dans le deuxième cas, il faudra installer manuellement le certificat sur les navigateurs clients.
Nous allons donc nous intéresser au deuxième cas et détailler les étapes de création du certificat.

Avant toute chose, il vous faut télécharger et installer OpenSSL (version Windows ou Linux)
Téléchargement d'OpenSSL

 Et voilà ! Vous êtes en possession des fichiers ca.key et ca.crt qui vous serviront à paramétrer votre serveur web (Apache ou IIS).

Pour les navigateurs clients, il faudra installer le ca.cer dans le magasin de certificats "Autorités principales de confiance" (Outils > Options Internet > Contenu).

 Pour un site en production un certificat émis par une autorité de confiance est indispensable car cela ne demande aucune manipulation particulière au client.

Pourquoi faire ?

L'idée est simple. Aujourd'hui, pratiquement tous les sites proposent un espace membre. C'est génial mais au bout d'un certain temps on se retrouve avec des dizaines de mots de passe pour accéder à autant de sites...
L'intérêt de l'authentification unique devient alors évidente afin de simplifier la vie des internautes !
J'ai implémenté ce principe sur mon site. D'ailleurs, n'hésitez pas à tester et me prévenir en cas de bug ! 
A noter que Google propose la même chose avec ses comptes Gmail...

Comment ça marche ?

Le fonctionnement est très simple, pas de web service mais un simple échange crypté entre les serveurs de Microsoft et le votre par le biais du navigateur du client.

1. Un internaute demande une page de votre site. C'est sa première visite et il ne s'est jamais authentifié avec son Windows Live ID.
    
2. Le site web propose un lien de connexion vers le site de Microsoft Live ID. 
    
3. L'internaute clique ce lien.
    
4. Le site de Microsoft propose la page de login de Windows Live ID.
    
5. L'internaute s'identifie. Sur la page de login, l'utilisateur renseigne ses login/mot de passe Windows Live
    
6. Windows Live ID authentifie l'utilisateur. Le server d'authentification Microsoft vérifie le compte.
    
7. Le site Windows Live ID redirige. Si les informations de connexion saisie par l'internaute sont correctes, le site Windows Live ID le redirige alors vers votre site avec un token l'identifiant de manière unique.
    
8. A votre site de jouer ! Vous savez maintenant que cet internaute possède bien un identifiant Live ID et vous connaissez le token permettant de l'identifier de manière unique.

Mise en place

Il faut tout d'abord déclarer son site (ou application) sur le site de Microsoft ici : https://msm.live.com/app/registration.aspx 
Il vous faudra fournir le nom du site, l'url de retour après authentification, le mot de passe, la méthode de cryptage...
Ensuite un id d'application vous est fourni et vous permet de mettre en place la mécanique.
Il suffit ensuite de renseigner un fichier de configuration avec ses infos (et bien le protéger sur votre site, comme avec .htaccess dans mon cas)

La documentation complète du SDK, ainsi que des exemples dans les langages les plus courants (ASP.NET, PHP, CGI...) se trouve ici : http://msdn.microsoft.com/en-us/library/bb676633.aspx (anglais)

Les exemples sont bien parlants mais ne traitent pas du tout l'intégration à votre site ou application...

Remarque

L'authentification ne vous répondra en aucun cas des informations sur l'utilisateur (comme le nom, l'email...). La seule chose retournée est le token qui identifie de manière unique le couple utilisateur/application.
IL vous faudra donc gérer dans votre site ou application les informations de l'utilisateur dans une table SQL par exemple. Une colonne de cette table sera le token du user.
Après authentification sur le site Windows Live, vous requetez sur le token, récuperez les infos du user et ouvrez une session sur votre site.
Et ça roule...
 

Ouf ! C'est pas trop tôt ! Le serveur qui héberge mon site chez Free est tombé le 25/04.
Je n'espérais plus qu'il reparte.

En parcourant les forums chez Free, j'ai appris que l'admin réseau était en congés, c'est pas de bol. ;o)

C'est de l'hébergement gratuit et de bonne qualité, alors il n'y a pas grand chose à dire, si ce n'est que mon référencement a dû prendre un mauvais coup.

Mon site est hébergé depuis 1999 chez Free, et depuis cette date, cela ne s'est produit que 2 fois. En espérant que la prochaine panne ne se produise que dans un futur très lointain ou que je me décide à prendre un nom de domaine et un hébergement payant !