| Catégorie | API |
| Commentaires | 0 commentaires |
| Demo | Voir |
| Sources | Télécharger |
| Catégorie | API |
| Commentaires | 0 commentaires |
| Demo | Voir |
| Sources | Télécharger |
Authentifier vos utilisateurs via Facebook Connect est une chose très simple grâce au SDK Javascript que met Facebook à notre disposition. Il ne vous faudra que quelques minutes et un peu de Javascript pour effectuer cette tâche. Commençons sans plus tarder.
Avant de pouvoir authentifier vos utilisateurs avec Facebook, vous allez devoir créer une application sur le site de Facebook. Pour se faire, rendez vous sur cette page puis cliquez sur le bouton Create New App en haut à droite avant de completer les informations demandées.
Une fois votre application créée, vous pouvez compléter quelques informations supplémentaires en vous rendant dans les paramètres de l'application.
Le fait d'avoir un logo et une petite description fait un peu plus sérieux. Rendez vous ensuite dans l'onglet Web Site. Vous y trouverez deux clés et deux champs. Remplissez au moins le premier champ (Site URL), Facebook s'en servira lors de l'authentification des utilisateurs. La clé qui nous intéresse est Application ID. Notez là quelque part, on va en avoir besoin.
Ouvrez la page sur laquelle vous souhaitez que les utilisateurs puissent se connecter dans votre editeur de texte. Ajoutez le code suivant dans votre page.
<div id="fb-root"></div> <script src="http://connect.facebook.net/fr_FR/all.js"></script> <script> FB.init({ appId : 'VOTRE_APPLICATION_ID', status : true, // verifie le statut de la connexion cookie : true, // active les cookies pour que le serveur puisse accéder à la session xfbml : true // active le XFBML (HTML de Facebook) }); </script>
Le bloc ayant l'id fb-root sert à Facebook pour stocker des éléments, il ne nous intéresse pas mais il doit impérativement être placé avant les balises . Nous appellons ensuite le SDK Javascript. Notez dans l'url le fr_FR. Ce paramètre sert à définir la langue dans laquelle Facebook affichera la fenêtre de connexion, le bouton de connexion, etc. Si vous souhaitez que Facebook communique en anglais, mettez en_US.
La seconde balise accueillera tout le reste de notre code Javascript. Pour le moment, notre code contient une seule fonction : FB.init(). Cette fonction se charge d'initialiser le SDK, elle prend 4 paramètres.
Je vous conseille de laisser les 3 derniers paramètres à true (activé).
Maintenant que le SDK est chargé et initialisé, nous allons pouvoir afficher le bouton de connexion à Facebook.
Insérez le code suivant à l'endroit où vous souhaitez que le bouton de connexion soit affiché.
<div class="box"> <div id="social_networks"> <div id="facebook_button_box"> <fb:login-button show-faces="true" width="450" perms="email,user_birthday,read_stream"></fb:login-button> </div> </div> <div id="social_networks_profiles"> <div id="facebook_profile" style="display:none;"> <div id="facebook_profile_image" style="width:50px;height:50px;margin-left:20px;float:left;"> </div> <div id="facebook_profile_text" style="height:50px;margin-top:-3px;margin-left:5px;float:left"> </div> <div class="clear"></div> <ul id="facebook_user_data"> </ul> </div> <div class="clear"></div> </div> </div>
Ce code est celui de la page de démonstration, si vous souhaitez juste afficher le bouton de connexion, utilisez le code suivant :
<fb:login-button show-faces="true" width="450" perms="email,user_birthday,read_stream"></fb:login-button>
Vous pouvez personnaliser ce bouton sur cette page. Je vais succinctement détailler mon code HTML. Tout le code est contenu dans une boîte principale ayant la classe .box. Cette boîte en contient deux autres : #facebookbuttonbox et #socialnetworksprofiles #facebook_profile. La première contient le bouton de connexion et est affichée lorsque l'utilisateur n'est pas connecté. La seconde contient les informations sur l'utilisateur et n'est affichée que lorsque l'utilisateur est connecté (à quoi bon l'afficher sinon ?!). Lorsque l'utilisateur est connecté, les rôles s'inversent. On cache la boîte contenant le bouton de connexion et on affiche celle contenant les informations de l'utilisateur.
Revenons au bouton de connexion. Il contient plusieurs attributs :
L'attribut le plus intéressant est perms car il nous permet de demander des autorisations (séparées par une virgule) permettant d'accéder aux informations privées de l'utilisateur. La liste des permissions disponibles est affichée sur cette page. Ici, nous demandons plusieurs permissions :
Il y a bien d'autres permissions disponibles permettant de publier des messages, aimer des pages, etc, mais ils ne nous intéressent pas ici.
Nous sommes maintenant parés à authentifier nos utilisateurs.
Lorsqu'un utilisateur arrive sur la page, il y a 4 cas possibles :
L'utilisateur se verra donc afficher les fenêtres suivantes :
Les cas 1 et 2 seront traités par une fonction et les cas 3 et 4 par une seconde fonction.
Commençons par la fonction qui va connecter l'utilisateur à Facebook lorsqu'il est déconnecté.
$(document).ready(function() { FB.Event.subscribe('auth.login', function(response) { // Code à executer lorsque l'utilisateur se connecte }); });
J'encadre le code avec $(document).ready(function() {}); car j'utiliserai jQuery par la suite. Je m'assure donc que le code ne s'executera qu'une fois la page complètement chargée.
Nous avons donc notre première fonction : FB.Event.suscribe(). Cette fonction sert à surveiller des évènements particuliers et relatifs à Facebook sur la page. La liste complète des évènements disponibles est affichée sur cette page. Ici, l'évènement que l'on surveille est auth.login. Cet évènement est déclenché lorsque l'utilisateur se connecte. Le deuxième paramètre est une fonction de callback prenant un paramètre : response. Ce paramètre est un objet contenant 3 propriétés mais il ne nous intéresse pas donc je ne le détaillerai pas.
Maintenant que l'utilisateur est connecté, nous allons pouvoir récupérer les informations basiques de l'utilisateur et celles pour lesquelles nous avons demandé une permission. Pour récupérer ces informations, nous allons devoir une utiliser une autre méthode du SDK : FB.api(). Cette fonction prend deux paramètres : l'url (fonction) de l'API que l'on souhaite intérroger et une fonction de callback qui prend en pramètre une variable contenant la réponse de l'API. L'url vient s'ajouter à http://graph.facebook.com. Vous trouverez plus d'infos sur la Graph API de Facebook sur cette page.
Nous allons dans un premier temps utiliser l'adresse /me pour récupérer les informations basiques de l'utilisateur connecté, à savoir :
FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) { // response est un objet contenant les informations basiques de l'utilisateur }); });
L'image de profil de l'utilisateur n'est pas disponible dans les informations basiques mais nous allons pouvoir la récupérer grâce à son identifiant. Ensuite, nous insérons ces informations dans notre page à l'aide de la méthode html() de jQuery.
FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture'; $('#facebook_profile_image').html('<img src="' + url + '" alt="#" />'); $('#facebook_profile_text').html('<p><a href="' + response.link + '"><strong>' + response.name + '</strong></a><br /><a href="#" id="facebook_logout">Deconnexion</a>'); }); });
Nous avons demandé lors de la connexion l'accès à l'adresse email et à la date de naissance de l'utilisateur. Ces deux éléments vont donc eux aussi apparaître dans l'objet response.
FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture'; $('#facebook_profile_image').html('<img src="' + url + '" alt="#" />'); $('#facebook_profile_text').html('<p><a href="' + response.link + '"><strong>' + response.name + '</strong></a><br /><a href="#" id="facebook_logout">Deconnexion</a>'); var user_data = '<ul><li>Votre date de naissance : ' + response.birthday + '</li><li>Votre adresse email : ' + response.email + '</li><li>Votre bio : ' + response.bio + '</li>'; $('#facebook_user_data').html(user_data); }); });
Nous insérons donc nos puces dans la liste #facebookuserdata. Nous avons donc récupéré les informations de profil de l'utilisateur. Nous allons également récupérer ses 3 derniers statuts.
Nous devons donc appeler une nouvelle fois la fonction FB.api() mais avec un premier paramètre différent. Pour récupérer les status, nous devons appeler l'url /me/posts qui retournera par défaut les 25 derniers statuts de l'utilisateur.
FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture'; $('#facebook_profile_image').html('<img src="' + url + '" alt="#" />'); $('#facebook_profile_text').html('<p><a href="' + response.link + '"><strong>' + response.name + '</strong></a><br /><a href="#" id="facebook_logout">Deconnexion</a>'); var user_data = '<ul><li>Votre date de naissance : ' + response.birthday + '</li><li>Votre adresse email : ' + response.email + '</li><li>Votre bio : ' + response.bio + '</li>'; $('#facebook_user_data').html(user_data); FB.api('/me/posts', function(response) { var messages = '<li>Vos 3 derniers statuts : <ul>'; $.each(response.data, function(key, value) { messages += '<li>' + value.message + '</li>'; return (key != 2); }); messages += '</ul></li></ul>'; $('#facebook_user_data').append(messages); }); }); });
Ici, response est un objet contenant plusieurs sous objets. Nous allons donc parcourir ces objets à l'aide de la méthode $.each() de jQuery. Voici la structure de l'objet response.
Nous allons donc directement parcourir l'objet data qui contient la liste des statuts et récupérer la propriété message contenant le texte du statut que nous allons ajouter à notre liste.
return (key != 2);
Cette instruction étrange sert à quitter la boucle each lorsque nous avons listé 3 statuts. On met 2 car key est l'index du tableau data qui commence à 0. Maintenant que nous avons nos statuts et qu'ils sont insérés dans la page, nous allons pouvoir cacher la boîte contenant le bouton de connexion et afficher celle contenant les informations sur l'utilisateur. Insérez le code suivant juste avant la fin de la fonction FB.Event.subscribe().
$('#facebook_button_box').hide(); $('#facebook_profile').show();
Et voilà, nous y sommes ! L'utilisateur est maintenant authentifié et nous avons récupéré les informations qui nous intéressaient.
Nous allons maintenant pouvoir aborder le cas (3 et 4) où l'utilisateur est déjà connecté. Pour se faire, ajoutons la fonction suivante après la première.
FB.getLoginStatus(function(response) { if (response.session) { // Code à executer si l'utilisateur est connecté } });
La fonction FB.getLoginStatus() va vérifier si l'utilisateur est connecté à Facebook et a donné sa permission pour qu'on récupère ses informations. La fonction de callback retourne l'objet response qui contient une propriété session. Cette propriété va nous dire si l'utilisateur est connecté. Si il est bel et bien connecté, on peut faire exactement la même chose que dans la fonction précédente.
Vous pouvez donc copier tout le code contenu dans la fonction FB.Event.subscribe() et le coller dans la condition if (response.session) {}.
Il nous reste une dernière chose à faire (la plus facile !), c'est déconnecter l'utilisateur si il clique sur le lien Déconnexion. Pour cela, nous allons faire appel à la fonction FB.logout(). Voici le code :
$('#facebook_logout').live('click', function() { FB.logout(function(response) { $('#facebook_button_box').show(); $('#facebook_profile').hide(); }); return false; });
Et enfin, le code final contenant les 3 fonctions :
$(document).ready(function() { FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture'; $('#facebook_profile_image').html('<img src="' + url + '" alt="#" />'); $('#facebook_profile_text').html('<p><a href="' + response.link + '"><strong>' + response.name + '</strong></a><br /><a href="#" id="facebook_logout">Deconnexion</a>'); var user_data = '<ul><li>Votre date de naissance : ' + response.birthday + '</li><li>Votre adresse email : ' + response.email + '</li><li>Votre bio : ' + response.bio + '</li>'; $('#facebook_user_data').html(user_data); FB.api('/me/posts', function(response) { var messages = '<li>Vos 3 derniers statuts : <ul>'; $.each(response.data, function(key, value) { messages += '<li>' + value.message + '</li>'; return (key != 2); }); messages += '</ul></li></ul>'; $('#facebook_user_data').append(messages); }); }); $('#facebook_button_box').hide(); $('#facebook_profile').show(); }); FB.getLoginStatus(function(response) { if (response.session) { FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture'; $('#facebook_profile_image').html('<img src="' + url + '" alt="#" />'); $('#facebook_profile_text').html('<p><a href="' + response.link + '"><strong>' + response.name + '</strong></a><br /><a href="#" id="facebook_logout">Deconnexion</a>'); var user_data = '<li>Votre date de naissance : ' + response.birthday + '</li><li>Votre adresse email : ' + response.email + '</li><li>Votre bio : ' + response.bio + '</li>'; $('#facebook_user_data').html(user_data); FB.api('/me/posts', function(response) { var messages = '<li>Vos 3 derniers statuts : <ul>'; $.each(response.data, function(key, value) { messages += '<li>' + value.message + '</li>'; return (key != 2); }); messages += '</ul></li>'; $('#facebook_user_data').append(messages); }); }); $('#facebook_button_box').hide(); $('#facebook_profile').show(); } }); $('#facebook_logout').live('click', function() { FB.logout(function(response) { $('#facebook_button_box').show(); $('#facebook_profile').hide(); }); return false; }); });
Vous avez maintenant une page en mesure d'authentifier vos utilisateurs avec leur compte Facebook. Ce n'est pas très compliqué mais comme la documentation est entièrement en anglais, ce n'est pas facile pour tout le monde de comprendre comment fonctionne la Graph API de Facebook.
Au risque de paraître pour un rabat-joie, je vous demande de respecter la vie privée de vos utilisateurs. Ne faites rien sans leur consentement explicite. Essayez dans la mesure du possible de leur proposer un lien pour se déconnecter de votre site quand ils le souhaitent.
Voici une liste de quelques liens utiles :
N'hésitez pas à laisser un commentaire sur le tutoriel, ou à le partager sur les réseaux sociaux, ça me fait toujours plaisir et m'encourage à continuer mon oeuvre pour un monde meilleur.
Si le tutoriel contient un point que vous ne comprenez pas, sur lequel vous aimeriez avoir des explications, n'hésitez pas à poser votre question sur le Google Group de Syrinxoon Tuts, je viendrai rapidement répondre à votre question.
Enfin, signe ultime de remerciement, vous pouvez me faire un don pour m'aider à payer les frais du serveur en cliquant sur le bouton Donate ci-dessous ⇓
Abonnez vous au flux des tutoriels
Enregistrez vous pour commenter
Marquer ce tutoriel comme lu