Intégrer Facebook Connect sur son site

Décembre 2016



Prérequis


Tout d'abord avant d'aborder ce tutoriel, vous devez disposer de solide connaissance en PHP et en JavaScript puisque ces APIs se laissent difficilement appréhender. Ce tutoriel est jeune et peut donc contenir des imperfections, merci de faire part de vos remarques dans les commentaires. Les commentaires ne sont pas un lieu de support, pour cela vous disposez du forum. Lisez bien ce tutoriel dans son intégrité.

Enregistrer son Application


Pour bénéficier des APIs de Facebook, vous devez enregistrer une application. Une fois cette application enregistrée, elle vous fournira une clé secrète et une ID d'application qui sont indispensable pour interagir avec Facebook.

Récupérer PHP SDK


Cette librairie de fonction vous mâchera une bonne partie de votre boulot :
Uploadez sur votre serveur /src/facebook.php

Intégrez Facebook connect

Installez le bouton


Facebook vous propose deux manière de construire votre bouton : La méthode xfbml et l'autre méthode. Nous étudierons l'autre méthode, plus souple je pense.

L'autre méthode est assez simple, ce n'est qu'un simple bouton auquel nous associons des fonctions issues de la librairie JavaScript SDK.

Je vous donne un code JavaScript, qui réunit l'essentiel de ce qu'on a besoin pour faire notre bouton :

<script type="text/javascript">    
function fblogout() {    
          FB.logout(function () {    
     window.location.reload(); });    
    }    
      window.fbAsyncInit = function() {    
        FB.init({    
          appId   : '<?php echo $facebook->getAppId(); ?>',    
          session : <?php echo json_encode($session); ?>,    
          status  : true,    
          cookie  : true,    
          xfbml   : true    
        });    

        FB.Event.subscribe('auth.login', function() {    
          window.location.reload();    
        });    
      };    

      (function() {    
        var e = document.createElement('script');    
        e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js';    
        e.async = true;    
        document.getElementById('fb-root').appendChild(e);    
      }());    
          //your fb login function    
          function fblogin() {    
     FB.login(function(response) {    
              //...    
            }, {perms:'read_stream,publish_stream,offline_access'});    
   redir();    
          }    
        </script>

A ce niveau-là c'est très simple, pour vous connecter vous appelez la fonction fblogin() lors de l'évènement "clic" (onclick). Pour vous déconnecter il vous suffira d'appeler fblogout().
Concrètement elles vont faire quoi ces fonctions ?

fblogin() : vérifie que l'utilisateur est connecté à facebook, si vous êtes connecté elle vérifiera que vous disposez des droit nécessaire. Les droits sont personnalisable : perms:'read_stream,publish_stream,offline_access' à modifier avec cet article de référence.

fblogout() : Cette fonction déconnectera l'utilisateur de Facebook.

Récupérer les données


Il va falloir dans un premier temps récupérer les données, le code suivant va donc vérifier que le visiteur est bien connecter à Facebook, si c'est bien le cas et si vous avez les permissions dans ce cas les données sont automatiquement enregistré dans un tableau ($me). Notez que vous devez noter votre appid et votre clé secrète ainsi que changer le chemin de votre fichier facebook.php.

require 'function/facebook/facebook.php';    
$facebook = new Facebook(array(  'appId'  => '',  'secret' => '',  'cookie' => true,));    
$session = $facebook->getSession();    
$me = null;    

if($session){    
 try {    
  $uid = $facebook->getUser();    
  $me = $facebook->api('/me');    
 }    
 catch(FacebookApiException $e){    
  error_log($e);    
 }    
} 

remarque : if($session) pour tester la présence de session facebook et if($me) pour savoir si vous disposez des données de l'utilisateur.

Donc une fois les données récupérées, vous allez devoir les utiliser différemment selon votre site : créer un compte membre lors de la connexion ou s'en servir uniquement de connexion.
Si vous disposez de votre propose système d'inscription et de connexion alors il ne servira que de connexion sinon vous pouvez l'utiliser comme système d'inscription.

Admettons que vous en servez seulement comme un système de connexion, à la réception des données vous devez vérifier si vous connaissez ce membre, et la méthode la plus simple est de vérifier l'existence du mail dans votre base. Si l'utilisateur est inscrit alors vous avez plus qu'à créer vos variables de sessions comme vous l'aurez fait avec votre propre système de connexion.
  • Cet article vous présente les étape essentiel à votre système de connexion.

Problèmes que vous risquez rencontrer


"Comment savoir que l'utilisateur s'est déconnecté de Facebook ?"
Dans un monde parfait on testerait seulement la présence de la variable $me et si elle n'existe pas on détruit les variable de session. Sauf que la vie est mal faites et que vous avez décidé d'avoir 2 système de connexion et qu'en faisant ça vous déconnecterez les utilisateurs qui se sont connecté sans facebook (puisque $me n'existe pas dans ce cas). Donc le plus simple est de créer une variable de session $_SESSION['facebook'] qui attesterait que vous vous êtes bien connecté à l'aide de facebook. Et là si cette session existe mais que la variable $me non, ça voudra dire que l'utilisateur s'était connecté à l'aide de facebook et s'est déconnecté depuis donc on le déconnecte.

__ à compléter __

Ressources


Facebook développeur

A voir également :

Ce document intitulé «  Intégrer Facebook Connect sur son site  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.