Partie 2.2: Gestionnaire de connexion avec Facebook

Créer une nouvelle application

La 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:

• DessineQqch
• dessine-qqch
• Divertissement

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 Facebook

Facebook 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/

• obtenir l'email (optionnel pour l'utilisateur): doit être demandé à part.
• permissions étendues (optionnel pour l'utilisateur): pour accéder à des données perso, pouvoir publier et supprimer des données.
  • c.f., la page https://developers.facebook.com/docs...d-permissions/
  • Les plus importantes sont: read_stream, user_online_presence, friends_online_presence, publish_actions.
• propriétés de profil étendu: permissions non optionnelles, pour accéder aux informations du profile les plus sensibles.
  • c.f., la page https://developers.facebook.com/docs...le-properties/
• permissions pour l'open graph: vont nous permettre de publier des actions (exemple: j'ai dessiné, j'ai deviné, ...) sur l'Open Graph, et récupérer les actions des autres applications.
  • c.f., la page https://developers.facebook.com/docs...h-permissions/
  • la permission qui va nous intéresser le plus est: publish_actions. Elle permet à l'application de publier à l'Open Graph avec des actions prédéfinies par facebook, ou spécifiques à votre application.
• permissions pour les pages: permet de gérer une page que l'utilisateur administre

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: 

• Déterminer si l'utilisateur est déjà connecté
• Si il n'est pas connecté, ouvrir une boîte de dialogue pour l'inviter à se connecter
• Echange de codes de sécurité pour confirmer l'identité
• Générer un jeton d'accès (access token)

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 (celle de votre application est accessible dans l'onglet Paramètres->Avancé). 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é.

Connexion avec le SDK JavaScript

Utiliser 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

Le code suivant charge et initialise le SDK JavaScript dans votre page HTML. Complétez les champs demandés.

<html><head></head><body><divid="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();}elseif(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 en XFBML. Ce bouton utilise le SDK JavaScript pour présenter un bouton qui 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 qu'un message apparaît bien dans la console Javascript.