![]() |
![]() |
Partie 2.2: Gestionnaire de connexion avec FacebookDe $1Table des matières
Cette partie s'inspire de la documentation des API Facebook disponible en anglais: https://developers.facebook.com/docs...ogin/overview/ L'objectif pour notre application est d'avoir un double système d'inscription/connexion: un basé sur le formulaire que l'on a développé dans la partie 1 de ce cours, et un basé sur Facebook (Google+ propose également un gestionnaire de connexion, mais on a choisi Facebook pour ce cours). Facebook propose une manière personnalisée et sûre pour que les utilisateurs se connecte à votre application. On utilisera les SDK Facebook JavaScript et PHP. Créer une nouvelle applicationLa première étape est de créer une application Facebook. Pour celà, rendez-vous dans l'onglet Applications->Create a New App sur la page https://developers.facebook.com/ Vous choisissez un nom, un namespace, et une catégorie. Par exemple ici:
La notion de namespace est similaire aux namespaces XML: On peut créer de nouveaux types d'actions (dessiner, deviner, ...) et de nouveaux types d'objets (Dessin, ...) pour votre application, et enrichir ainsi l'Open Graph de Facebook avec votre application. Le namespace est important pour différencier deux actions "dessiner" de deux applications différentes par exemple. Dans le cas de mon application, le nom de l'action dans l'Open Graph sera "pict-async-juste-leblanc:dessiner". Vous arrivez sur le tableau de bord de votre application. Facebook a généré pour vous un identifiant d'application (public, utilisé par toutes les API même l'API Javascript) et une clé secrète (utilisée par l'API PHP par exemple). L'onglet Paramètres->Général permet de modifier le nom et le namespace de l'application. Vous devez ici ajouter une nouvelle plateforme: "Site web", et inscrire l'URL de votre site, par exemple, http://localhost:8080/chemin/vers/application. Ainsi, vous êtes certain que les API javascript et php avec les identifiant de votre application ne fonctionneront que sur ce site (question de sécurité). L'onglet Détails de l'application vous permet d'ajouter des descriptions et icônes à l'application. Vous remplirez ceci avant de me rendre votre projet. L'onglet Rôle est important maintenant. Si vous travaillez en binôme, les deux membres du binôme peuvent être administrateurs, et vous m'ajouterez également comme administrateur (pour corriger plus facilement votre application, mon identifiant est 514006276). Comme votre application est encore en phase de développement et n'est pas rendue public, vous pouvez ajouter d'autres personnes pour qu'elles testent votre application. Vous pouvez ajouter facilement vos amis facebook, ou ajouter une personne à l'aide de son identifiant, qu'on peut obtenir à l'addresse suivante: https://developers.facebook.com/tools/explorer/ L'onglet Open Graph permet de créer des histoires, actions et objets personnalisés pour votre application. On y reviendra si on a le temps. Informations importantes pour les connexions via FacebookFacebook utilise l'open protocol OAuth2 (Google+ également) pour protéger les informations des utilisateurs, et les laisser controler ce que l'application aura le droit d'accéder comme information (informations sur les amis, le profil, les posts du mur, ...) , ou de faire en leur nom (publier, notifier, aimer, ...). Lorsque quelqu'un se connecte à l'application via Facebook, l'application peut accéder à tout ce que l'utilisateur a de public (quelques informations du profil, mentions j'aime, liste d'amis par exemple). Accéder à d'autres informations est sécurisé par des permissions. L'application peut demander à l'utilisateur ces permissions lors du login, ou plus tard. Certaines de ces permissions seront optionnelles pour l'utilisateur, d'autes seront obligatoires. Faites donc attention à ne pas être trop intrusif, ou alors l'utilisateur refusera de se connecter à votre application via Facebook. Il y a différentes catégories de permissions, consultable ici: https://developers.facebook.com/docs/reference/login/
Lorsque l'utilisateur se connecte pour la première fois à l'application, ou lorsque l'application requiert une nouvelle permission, une boîte de dialogue générée par Facebook s'ouvre. La boîte explique clairement les différentes permissions demandées par l'application. L'utilisateur peut alors accepter (ou pas) les permissions, et définir qui pourra voir les publications que l'application aura faites en son nom par exemple. Facebook propose différentes procédure de connexion pour les différents terminaux et projets. De manière générale la procédure de connexion via Facebook contient les étapes suivantes:
On utilisera le SDK JavaScript pour permettre la connexion via Facebook. Avant de voir en détail comment faire, il y a une dernière notion importante qu'il faut comprendre: les Jetons d'Accès (Access Tokens). Un jeton d'accès est une chaîne de caractère aléatoire qui donne à l'application un accès temporaire et sécurisé à l'API facebook. Un jeton peut être créé pour une personne, une page Facebook, ou une application. Le token est généré en dernier dans la procédure de connexion. Les SDKs Facebook que l'on va utiliser gèrent automatiquement la génération et le stockage des jetons. Ce jeton stocke les informations des permissions qui ont été données par l'utilisateur, quelle application l'utilise, et une date de péremption. Un tel jeton doit être passé en paramètre pour quasiment tous les appels à l'API Facebook, pour une question de sécurité. Ce qu'il est très important de savoir, c'est que les jetons d'accès sont portables. C'est à dire qu'une fois que l'application a obtenu un jeton d'accès pour un utilisateur avec le SDK JavaScript par exemple, le même jeton peut être envoyé au serveur et être utilisé par le SDK PHP par exemple. celà implique une facilité d'utilisation, mais également une toute petite faille de sécurité. En effet, une addon malicieuse installée sur le navigateur, ou un hijacker (c.f., http://en.wikipedia.org/wiki/Browser_hijacking) peut récupérer l'ID de l'application et le jeton d'accès, pour ensuite spamer le mur de l'utilisateur, ses amis, récupérer des informations sensibles, etc... tout ça au nom de votre application. Facebook propose une solution pour éviter cette faille: dans l'onglet paramètres->avancé de votre application: App Secret Proof for Server API calls. Si vous activez cette option, alors tout appel à l'API Open Graph depuis votre serveur devra avoir un paramètre supplémentaire appsecret_proof. Le SDK PHP envoie ce paramètre par défaut, donc autant activer cette option de sécurité. Connexion avec le SDK JavaScriptUtiliser le SDK JavaScript de Facebook est le plus simple et le plus rapide pour implémenter le Login Facebook. Cette section s'inspire de la page https://developers.facebook.com/docs...n-flow-for-web Premier code simpleLe code suivant charge et initialise le SDK JavaScript dans votre page HTML. Complétez les champs demandés. <html> <head></head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit =function(){ FB.init({ appId :'{your-app-id}', status :true,// vérifier le statut de connexion cookie :true,// autoriser les cookies pour permettre au serveur (et le SDK PHP) d'accéder à la session xfbml :true// analyser le XFBML (déprécié par Facebook, c.f., https://developers.facebook.com/blog/post/568/) }); // Ici on s'abonne à l'évèement JavaScript auth.authResponseChange. Cet évènement est généré pour tout // changement dans l'authentification, comme la connexion, la déconnexion, ou le rafraîchissement de la session. // Donc lorsqu'un utilisateur déjà connecté tente se se connecter à nouveau, le cas correct ci-dessous sera géré FB.Event.subscribe('auth.authResponseChange',function(response){ // Est-ce que l'utilisateur est connecté au moment où l'évènement est généré ? if(response.status ==='connected'){ console.log("Y'a quelqu'un"); // c.f. l'objet response passé en paramète du callback est un objet JSON décrit après ce code. testAPI(); } else if (response.status ==='not_authorized'){ console.log("Y'a quelqu'un, mais il n'est pas connecté à l'application"); // Dans ce cas, la personne est loguée Facebook, mais pas à l'application. // Donc on appelle FB.login() pour afficher la boîte de dialogue de connexion à l'application. // On ferait pas comme ça pour une vrai application, pour deux raisons: // (1) Un popup créé automatiquement par JavaScript serait bloqué par la plupart des navigateurs // (2) c'est pas cool de sauter au cou de l'utilisateur dès le chargement de la page comme ça. FB.login(); }else{ console.log("l'utilisateur n'est pas connecté à Facebook"); // Dans ce cas, la personne n'est pas connectée à Facebook. Donc on appelle la méthode login(). // A ce moment, on ne sait pas si l'utilisateur s'est déjà connecté à l'application. // si ils ne se sont jamais connecté à l'application, ils verront la boîte de dialogue de connection // à l'application juste après s'être connecté à Facebook. FB.login(); } }); }; // Charger le SDK de manière asynchrone (comme pour les boutons j'aime et partager) (function(d){ var js, id ='facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if(d.getElementById(id)){return;} js = d.createElement('script'); js.id = id; js.async =true; js.src ="//connect.facebook.net/fr_FR/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); // Ici on fait un requête très simple à l'API Open Graph lorsque l'utilisateur est connecté function testAPI(){ console.log('Bienvenue ! On récupère vos informations.... '); FB.api('/me',function(response){ console.log('Bienvenue, '+ response.name +'.'); }); } </script> <!-- Ci-dessous, le bouton de connexion classique c'est la meilleur méthode pour laisser l'utilisateur se connecter. Ce bouton actionne la fonction FB.login(). --> <div class="fb-login-button" data-max-rows="1" data-show-faces="true"></div> </body> </html> Comprenez et testez ce code. Vérifiez les messages qui apparaissent dans la console Javascript. Vérification de l'état de connexionL'objet response dans le code ci-dessus contient des informations sur le status de connexion de l'utilisateur. On peut l'obtenir par deux moyens.
L'objet response est un objet JSON de la forme suivante: { status: 'connected', authResponse: { accessToken: '...', expiresIn:'...', signedRequest:'...', userID:'...' } }
Vérifiez la forme de l'objet response dans la console. La connexionLa méthode FB.login() ouvre une popup, et devrait donc être appelée seulement lorsqu'un utilisateur clique sur un bouton HTML pour que le navigateur ne la bloque pas. La méthode FB.login() a un paramètre optionnel scope qui peut contenir une liste séparée par des virgules de permissions demandées à l'utilisateur. Lorsque la popup est ouverte, l'utilisateur peut choisir d'accepter ou de refuser de se connecter, et il peut accepter ou refuser certaines permissions. Quel que soit son action, on reçoit en retour une réponse qui indique si l'utilisateur s'est connecté, ou a annulé. il s'agit de l'objet authResponse. Comme JavaScript est asynchrone (et très habituellement), cet objet est passé en paramètre du callback de la méthode FB.login(), le callback étant une fonction passée en paramètre de la méthode FB.login(). FB.login(function(response) { if (response.authResponse) { // La personne s'est connectée } else { // La personne a annulé } }, {scope: 'user_about_me,friends_about_me,publish_actions'}); Ensuite, le SDK JavaScript effectue automatiquement la confirmation d'identité, la génération et le stockage du jeton d'accès et de l'état de connexion. On peut alots commencer à requêter l'Open Graph de la part de l'utilisateur. DéconnexionL'utilisateur est déconnecté de l'application en appelant la méthode FB.logout(). Il faut attacher cette méthode à un bouton ou un lien de la manière suivante: FB.logout(function(response) { // Person is now logged out }); Cette méthode déconnecte l'utilisateur de Facebook également. Permier apperçu des appels vers l'Open GraphNotre petite page de connexion effectue un appel simple à l'API Open Graph. Observez la réponse obtenue (écrivez le paramètre response du callback de la méthode FB.api() dans la console). L'API Open Graph est un service web, il s'agit d'envoyer des requêtes HTTP de type GET, POST, ou DELETE (ou UPDATE dans le cas général) à une URL qui identifie un objet ou un ensemble d'objets, avec des paramètres qui spécifient qui on est, ou ce qu'on veut faire à cet objet. On reçoit alors une réponse, qui peut être de différente nature. Pour l'API Open Graph, on reçoit un objet JSON. Dans la console de développeur de votre navigateur, étudiez la requête HTTP qui a été envoyée par la page HTML:
Le SDK JavaScript un peu plus en détailLe SDK est chargé de manière asynchrone par le bout de code JavaScript suivant: <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '{your-app-id}', status : true, xfbml : true }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> Ce code charge ET initialise le SDK. la méthode fbAsyncInit est appelée juste après le chargement du SDK.
Le script //connect.facebook.net/en_US/all.js est minifié, pour la prod. Je vous conseille d'utiliser le mode debug pour le développement, il y aura plus de log dans la console et des vérifications des arguments lors des appels à l'API Graph par exemple. Le mode débug est activé en appelant le script suivant: js.src = "//connect.facebook.net/en_US/all/debug.js"; Le script //connect.facebook.net/en_US/all.js est également localisé en anglais des Etats-Unis. On utilisera fr_FR pour le français de France, etc. Au final, pour le développement de votra application, mieux vaut appeler le script suivant: //connect.facebook.net/fr_FR/all/debug.js La documentation de référence du SDK JavaScript est très simple et disponible ici: https://developers.facebook.com/docs...ript/reference Core methods
Exemple d'utilisation de la méthode ui:Le code suivant demande à l'utilisateur de poster un message sur son mur. Testez (dans la console par exemple): FB.ui( { method: 'feed' } ); On peut complexifier un peu le message par défaut. Testez: FB.ui( { method: 'feed', name: 'The Facebook SDK for Javascript', caption: 'Bringing Facebook to the desktop and mobile web', description: ( 'A small JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s identity, ' + 'social graph and distribution power to your site.' ), link: 'https://developers.facebook.com/docs/reference/javascript/', picture: 'http://www.fbrell.com/public/f8.jpg' }, function(response) { if (response && response.post_id) { alert('Post was published.'); } else { alert('Post was not published.'); } } ); Exemple d'utilisation de la méthode apiLa méthode API permet d'accéder à l'Open Graph. Le code suivant demande à l'utilisateur la permission publish_actions, si on ne l'a pas déjà, et le callback de la méthode fait un appel de type POST à l'API Graph, à l'adresse graph.facebook.com/me/feed (le mur de l'utilisateur courant), avec un objet en paramètre qui contient le message à poster. Testez: FB.api('/me/feed', 'post', {message: 'Hello, world!'}); Si on est sûr que l'utilisateur est connecté et a donné la permission de publier à l'application, la méthode ci-dessus suffi. Sinon, la meilleur méthode est de s'en assurer en intégrant cette méthode dans le callback de la fonction FB.login(), avec un paramètre additionnel scope, comme ci-dessous. FB.login(function(){ FB.api('/me/feed', 'post', {message: 'Hello, world!'}); }, {scope: 'publish_actions'}); Facebook Login Methods
Events
JQuerySi vous voulez utiliser JQuery, on peut charger le SDK avec la méthode $.getScript() et alléger le code, + quelques modifications du comportement de JQuery. Utilisation de la méthode uiEtudiez et testez chacun les cas d'utilisation suivants de la méthode ui (seulement pour le SDK JavaScript !): https://developers.facebook.com/docs...ference/FB.ui/
Pour l'application Pictionary aynchrone, un utilisateur connecté doit pouvoir choisir n'importe lequel de ses amis facebook comme "nouveau partenaire de jeu", et lui faire un dessin. L'application devra alors demander l'autorisation à l'utilisateur d'accéder à certaines informations de son ami pour créer une ébauche de ligne dans la base de données. Une fois que le dessin est effectué, si la personne pour qui on dessine ne s'est pas inscrite à l'application, on demandera à l'utilisateur de lui envoyer une requête pour lui proposer de venir deviner le dessin. Utilisation de l'API GraphAvec tout ce qu'on a vu, vous devriez être capable de comprendre un minimum l'outil d'exploration de l'API Graph de Facebook accessible ici: https://developers.facebook.com/tools/explorer/ On y retrouve:
Reste à comprendre le principe du Graphe. Les noeuds, et les arcs. Structure du GrapheC'est tout simple. Tout objet dans facebook a une URI (Universal Resource Identifier, comme les URL mais pour tout et n'importe quoi, c'est un concept du web sémantique). L'URI d'un objet est de la forme http://graph.facebook.com/{node-id} Les noeuds sont de différents types (user, page, application, photo...). Un noeud possède des champs (fields). Enfin, d'un noeud partent un ensemble d'arcs qui sont étiquetés. On peut retrouver la liste des types par défaut ici: https://developers.facebook.com/docs...-api/reference Par exemple, d'un noeud de type Personne a les champs named et installed (qui permet de savoir si l'utilisateur a installé l'application qui fait la demande). Les arcs friends, likes, etc., renvoient vers la liste des amis et des likes de cette personne. c.f., https://developers.facebook.com/docs...eference/user/ Vous pouvez consulter la documentation ici: https://developers.facebook.com/docs/graph-api/ pour comprendre l'architecture du graphe, les types d'appels à l'API, et les types de réponses. Un arc mène d'un noeud vers une liste de noeuds, par exemple: http://graph.facebook.com/{user1-id}/friends On accède à un noeud en particulier de l'une des manières suivantes: http://graph.facebook.com/{user-1-id}/friends/{user-2-id} http://graph.facebook.com/{user-2-id} Bien sûr, on peut enchaîner les arcs. Accès au GrapheLes trois méthodes GET, POST, et DELETE permettent respectivement d'accéder, publier, et supprimer un noeud ou un arc. Par exemple, on peut accéder à la liste des posts d'un utilisateur (arc feed d'un noeud de type user) comme cela, c.f., https://developers.facebook.com/docs...nce/user/feed/ GET graph.facebook.com/{user-id}/feed HTTP/1.1 Bien sûr, il faut avoir la permission corresponda. On ajoutera un post ainsi: POST graph.facebook.com/me/feed HTTP/1.1 message=This+is+a+test+message En Javascript, le GET est par défaut. Ces deux utilisations sont respectivement: /* make the API call */ FB.api( "/me/feed", function (response) { if (response && !response.error) { /* handle the result */ } } ); /* make the API call */ FB.api( "/me/feed", "POST", { "message": "This is a test message" }, function (response) { if (response && !response.error) { /* handle the result */ } } ); Et c'est pas beaucoup plus compliqué en PHP. Sur chaque page de la documentation du Graph API, vous trouverez un exemple de code pour JavaScript, et pour PHP. Ici on voit que lorsqu'on poste un message, on utilise un paramètre HTTP nommé message. Par défaut, on doit également envoyer le jeton d'accès. Les SDK JavaScript et PHP s'en chargent de manière transparente. Effectuez une requête sur l'API Graph, et vérifiez la requête HTTP envoyée par votre navigateur. Contrôle supplémentaire avec des paramètes de requête HTTPOn peut contrôler un peu plus finement ce qu'on veut avec des paramètes de requête HTTP, c.f., https://developers.facebook.com/docs...ing-graph-api/ Recherche sur l'API GraphOn peut chercher plein d'objets différents à l'adresse /search. Le format de la recherche est: GET graph.facebook.com/search?q={your-query}&[type={object-type}](#searchtypes) le paramètre q est le texte que l'on cherche, le ou les paramètres type sont les types d'objet parmi lesquels on cherche. c.f., https://developers.facebook.com/docs...ing-graph-api/ pour plus de détails. Utilisation de FQLLe FQL est le SQL du Graph de Facebook. C'est aussi simple que ça. On y accède à l'adresse /fql. Le format de la requête est: SELECT [fields] FROM [table] WHERE [conditions] Restrictions
On a accès aux fonction simples:
ExemplesRécupérer le nom d'un utilisateur: SELECT name FROM user WHERE uid = me() Récupérer quelques informations sur l'utilisateur et ses amis: SELECT uid, name, pic_square FROM user WHERE uid = me() OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) ATTENTION: il faut échapper au minimum le symbole '=' de la requête, par le code %3D ConclusionMaintenant, vous avez toutes les cartes en mains pour commencer à faire une jolie application HTML+JavaScript avec le SDK Facebook JavaScript. J'imagine que vous avez déjà la tête plein d'idées, alors à vous de jouer. Votre projet de Pictionary Asynchrone devra permettre d'utiliser le SDK JavaScript pour améliorer l'experience utilisateur. Travail pour l'application PictionaryComme précisé ci-dessus, un utilisateur connecté doit pouvoir choisir n'importe lequel de ses amis facebook comme "nouveau partenaire de jeu", et lui faire un dessin. L'application devra alors demander l'autorisation à l'utilisateur d'accéder à certaines informations de son ami pour créer une ébauche de ligne dans la base de données. Une fois que le dessin est effectué, si la personne pour qui on dessine ne s'est pas inscrite à l'application, on demandera à l'utilisateur de lui envoyer une requête pour lui proposer de venir deviner le dessin. Vous pouvez utiliser le SDK PHP (très similaire au SDK JavaScript) pour remplir la base de données USERS. |
||||||||||||||||||||||||
Powered by MindTouch Deki Open Source Edition v.8.08 |