[TUTO PHP] Connexion + inscription facebook, google etc

Tous des cas sociaux...

Ces réseaux sociaux, on ne s'en passe plus... On a tous nos faiblesses, à tel point qu'on ne prend même plus le temps de remplir des formulaires d’inscription sur des sites qui pourtant en vaudraient la peine. Aujourd'hui nous allons étudier une librairie PHP (HybridAuth) permettant aux visiteurs de se connecter ou de s'inscrire sur notre site via leurs comptes Facebook, twitter, Google, etc.

 

Même si je ne cautionne pas trop ce genre de procédure, ça peut s’avérer utile pour nos visiteurs. Le top avec HybridAuth c'est qu'on ne va pas s’embêter à chercher toutes les fonctionnalités de chaque réseau pour l’implémenter manuellement dans notre site vu qu'on est face à un "tout en un" - Un seul fichier de configuration à paramétrer.

 

Principe

On va mettre en place autant de boutons que nous avons de réseaux sociaux à proposer. Dans ce cas de figure nous ne travaillerons qu'avec Google et Facebook. Voilà les différentes étapes sur lesquelles nous allons travailler une fois que le visiteur aura cliquer sur un bouton.

1 - On initialise la librairie
2 - On tente de créer la connexion vers le service demandé (Google ou Facebook)
3 - On vérifie si le client est connecté au service
4 - On récupère ses infos
5 - On vérifie l'existence d'un compte sur notre site en comparant l'adresse email. Si le compte existe on authentifie l'utilisateur. Si le compte n'existe pas, on envoie l'utilisateur vers le formulaire d'inscription en pré-remplissant les champs à l'aide des informations récupérées lors de l'authentification au service concerné.

Apps

Le côté un peu relou de la chose c'est qu'il faut créer une application Google et Facebook afin de pouvoir récupérer nos Id etc... Les consoles de gestion peuvent faire peur mais n'ayez craintes, nous n’auront pas besoin d'explorer tout le panel pour mettre en place la librairie.

Google :
Rendez-vous ici : https://code.google.com/apis/console/
1 - Créez un nouveau projet
2 - Créez un nouveau "Client ID"
3 - Attribuez-lui les domaines et sous-domaine avec lesquels vous travaillez.
Attention, la ligne Redirect URIs doit être sous la forme suivante :
=> http://www.mon-site.fr/hybridauth/?hauth.done=Google
4 - Gardez bien au chaud  votre client ID et votre client secret

Facebook :
Rendez-vous ici : https://developers.facebook.com/apps
1 - Créez une nouvelle application
2 - Donnez lui un nom, attribuez-lui un domaine d'activité (un seul possible)
3 - Gardez bien au chaud votre ID de l’application ainsi que la clé secrète
!Attention : J'ai passé des heures à résoudre un problème de connexion avec Facebook car j'avais le mode "bac à sable" activé dans le gestionnaire de l'application Facebook. Alors ne faites pas la même erreur que moi.

Installation

1 - Rendez-vous sur le site officiel de HybridAuth à cette adresse : http://sourceforge.net/projects/hybridauth/files/ et téléchargez la dernière version de la librairie.
2 - Uploadez le répertoire hybridauth à la racine de votre site.
3 - Configurez rapidement la librairie en vous connectant à "mon-site.fr/hybridauth/install.php et suivez les étapes.
Si vous avez des soucis d'installation c'est ici que ça se passe http://hybridauth.sourceforge.net/downloading.html 

Configuration 

1 - On va vérifier notre fichier de configuration  /hybridauth/config.php et s'assurer que l'installation s'est bien passée.
Important, la ligne suivante : "base_url" => "http://www.mon-site.fr/hybridauth/" doit bien pointer vers le dossier HybridAuth (là où se trouve votre fichier de configuration)
2 - On va créer un lien Google ainsi qu'un lien Facebook (à vous de jouer pour les mettre en valeur avec du CSS)

<a href="/login.php?provider=Google" title="Connexion Google">Google</a>
<a href="/login.php?provider=facebook" title="Connexion Facebook">Facebook</a>

3 - On modifie notre fichier login.php

if(isset($_REQUEST["provider"]))
{
   
   //On appelle la librairie
   $config = $_SERVER['DOCUMENT_ROOT']."/hybridauth/config.php";
   require_once( $_SERVER['DOCUMENT_ROOT']."/hybridauth/Hybrid/Auth.php" );
   //Initialisation
   try{$hybridauth = new Hybrid_Auth( $config );
      //On  affecte le provider
      $provider = @ trim( strip_tags( $_GET["provider"] ) );
      // On tente une authentification
      $adapter = $hybridauth->authenticate( $provider );
      $adapter = $hybridauth->getAdapter( $provider );
      //On récupère les informations du profile
      $user_data = $adapter->getUserProfile();
      /* les variables sont stockées dans $user_data.
      On interroge notre base de données pour voir si l'adresse email($user_data->email) est déjà attachée à un compte*/
      if($user)//Si le compte existe on authentifie
      {
         //Création des variables de session 
      }
      else
      {
         /*Sinon on redirige le visiteur vers le formulaire d'inscription en récupérant au préalable les données qui nous intéressent en vue de pré-remplir les champs*/
         header('location:/inscription.php?email='.$user_data->email);
         exit; 
      }
   }
catch( Exception $e ){  

    // In case we have errors 6 or 7, then we have to use Hybrid_Provider_Adapter::logout() to 
    // let hybridauth forget all about the user so we can try to authenticate again.
    // Display the recived error, 
    // to know more please refer to Exceptions handling section on the userguide
    switch( $e->getCode() ){ 
        case 0 : echo "Unspecified error."; break;
        case 1 : echo "Hybriauth configuration error."; break;
        case 2 : echo "Provider not properly configured."; break;
        case 3 : echo "Unknown or disabled provider."; break;
        case 4 : echo "Missing provider application credentials."; break;
        case 5 : echo "Authentication failed. " 
                  . "The user has canceled the authentication or the provider refused the connection."; 
        case 6 : echo "User profile request failed. Most likely the user is not connected "
                  . "to the provider and he should to authenticate again."; 
               $adapter->logout(); 
               break;
        case 7 : echo "User not connected to the provider."; 
               $adapter->logout(); 
               break;
    } 
    echo "<br /><br /><b>Original error message:</b> " . $e->getMessage();
    echo "<hr /><h3>Trace</h3> <pre>" . $e->getTraceAsString() . "</pre>";  
}
}

Listes des éléments que l'on peut exploiter dans $user_data :
displayName
firstName
lastName
photoURL
profileURL
webSiteURL
gender
description
email
emailVerified
region
birthDay
birthMonth
birthYear
language

Conclusion : 

Seuls les points importants et indispensables ont été soulevés. Je vous recommande vivement d'aller plus loin en personnalisant vos apps ainsi que votre page de login au maximum.

Hopla, s'en est terminé, nous avons vu comment rendre les gens encore plus fainéant qu'avant. Retrouvez-nous très prochainement pour un nouvel épisode de "Je suis le mouvement parce-que je n'en ai malheureusement pas le choix" ^^.