Comment intégrer Facebook Connect à vos applications Web?

La mode est aux réseaux sociaux, par conséquent, la plupart des acteurs du Web grand public se doivent de proposer à leurs utilisateurs la possibilité d’interactions entre leur application Web et les réseaux sociaux.
Parmi les plus populaires du moment, il y a Facebook, qui avec “Facebook Connect" propose une solution permettant aux applications tierces de se connecter au compte Facebook de l’utilisateur pour y récupérer et y envoyer des informations. Cela a pour conséquence d’augmenter la visibilité du site Web tiers sur Facebook.
L’application Web sur laquelle je travaillais ne faisant pas exception, j’ai procédé à des développements afin d’y intégrer des fonctionnalités d’interaction offertes par Facebook.

Dans ce contexte, j’ai été amené à parcourir l’internet de long en large, à la recherche des informations nécessaires sur cet outil encore jeune et volatile, dont j’offre ici quelques raccourcis.

L’utilisateur

Cas d’utilisation de départ: un utilisateur veut créer un compte sur votre site Web, il va devoir remplir un formulaire d’inscription. Là, il peut soit tout saisir à la main, soit faire remplir automatiquement les champs du formulaire en récupérant les informations de son compte Facebook.

L’accès au profil Facebook de l’utilisateur passe par l’intermédiaire d’une Application Facebook.

Si l’utilisateur n’a pas de session Facebook ouverte avec le navigateur courant,
ou si l’utilisateur n’a pas encore autorisé l’application à accéder à ses informations, alors le bouton de connexion apparaît:  Bouton Facebook Connect
En cliquant dessus, l’utilisateur est invité à s’authentifier sur Facebook et à accorder à l’application la permission d’accéder à ses informations de base, qui comprennent le nom, la photo du profil, le sexe, les réseaux, les identifiants d’utilisateur, la liste d’amis et d’autres informations que j’ai communiquées publiquement.
Des autorisations supplémentaires sont demandées pour d’autres informations telles que l’adresse e-mail et la date de naissance.

Demande de permission

L’application Facebook demande à l’utilisateur sa permission pour accéder à ses informations personnelles.

Ensuite l’application Web interroge le profil de l’utilisateur à travers cette “Application Facebook", pour pouvoir ensuite les réutiliser.

Le développeur

Du point de vue du développement, il faut bien sûr créer cette “Application Facebook".
Étant donnée l’utilisation que nous en faisons ici (l’application ne fait strictement rien), le développement de cette application consiste simplement à entrer quelques paramètres dans un formulaire du configuration.

Pour créer l’application, rendez-vous sur http://www.facebook.com/developers/
Autorisez l’application développeur à accéder à vos informations.
Puis cliquez sur  Bouton créer Application

Attention, là, il y a une complication potentielle:
Comme je crée cette application dans un contexte professionnel, j’ai créé un profil Facebook spécialement à cet effet.
Toutefois, mais pour pouvoir créer une application,

Votre compte doit être vérifié avant que vous ne puissiez effectuer cette action. Veuillez vérifier votre compte en ajoutant votre téléphone mobile ou votre carte de crédit.

Ils envoient un code de confirmation par SMS, mais pour la carte de crédit, je ne sais pas !

Par contre, je n’ai eu aucun problème de ce genre en utilisant mon compte personnel, qui, créé il y a bien plus longtemps et actif régulièrement, bénéficie déjà du statut vérifié requis.

Le paramétrage

L’onglet About

Sur le premier onglet, les seules informations requises sont le nom et les adresse-mail de contact, d’ailleurs déjà pré-remplie.
Vous pouvez fournir une icône qui apparaîtra sur les posts que votre application fera sur le mur de l’utilisateur, ainsi qu’une image qui apparaitra notamment sur la popup de demande de permissions.

application_about

Premier onglet du formulaire de création d’application Facebook

L’onglet Web Site

Sur le deuxième onglet, deux informations importantes sont fournies: Application Id et Application Secret.
Pour la situation présente, seule la première (Application ID) nous intéresse. Cette clé est l’identifiant de votre application, dont votre site Web aura besoin pour se connecter à l’application.
En ce qui concerne, la deuxième (Application Secret), elle est utilisée dans le cas d’une application qui est utilisée directement sur Facebook, les exemples d’applications de ce type ne manquent pas, e.g: l’application développeur qui nous utilisons ici pour créer/configurer l’application.

Il y a deux paramètres à fournir: Site URL, et Site Domain.
Le premier est obligatoire, le second optionnel.
En fait, au moment de la création de l’application, Site URL n’est pas obligatoire, mais devient rapidement nécessaire: dès l’instant que l’on veut tester l’application.

Site URL est l’adresse du site qui utilise l’application, cela permet de limiter l’utilisation de l’application à votre site Web uniquement.
En effet, il est possible de récupérer le code source de l’appel à l’application pour l’injecter dans un autre site, sans cette limitation, il serait possible pour un site d’utiliser l’application d’un autre!

Site Domain est le nom de domaine de votre site, renseigner ce paramètre permet l’accès à l’application depuis les sous-domaines
e.g: si le domaine est example.com, on peut alors accéder à l’application depuis preprod.example.com (le site de pré-production).

application_website

Deuxième onglet du formulaire de création d’une application Facebook

Lors de la phase de développement, vous pouvez très bien donner à Site URL une valeur comme http://localhost:8080/mywebapp/, qui est une adresse locale, non visible de l’extérieur (et donc par Facebook).

L’onglet Facebook Integration

Il n’est nécessaire de renseigner cette partie que si votre application sera utilisée directement sur Facebook. Dans le cas présenté ici, ce n’est pas le cas: l’application ne sert que de passerelle pour échanger des informations entre votre application Web et Facebook, même si il est possible d’afficher des popup de Facebook sur votre site.

Pour nos besoins, il n’est pas nécessaire d’entrer d’informations sur les autres onglets.

Le site Web

Afin de mettre en place cette fonctionnalité sur votre site Web,  il faut procéder à des modifications sur la page du formulaire que vos utilisateurs doivent remplir pour s’inscrire.

Commencez par ajouter un emplacement pour le bouton de connexion Bouton Facebook Connect à l’endroit où vous voulez le faire apparaitre.

<div id="fb-login-button"></div>

Puis ajoutez l’inclusion de l’API JavaScript.

<script src="http://connect.facebook.net/fr_FR/all.js" ></script>

Notez que dans l’URL, vous pouvez remplacer fr_FR par la locale que vous souhaitez.

Et ajoutez aussi:

<div id="fb-root"></div>

Cette balise est requise pour le fonctionnement de l’API.
L’expérience m’a montré qu’il était préférable de l’ajouter en haut de page, afin qu’au chargement de la page, elle soit créée et donc existe avant tout appel à l’API.

Ensuite, appelez cette fonction (ou du moins, le code de cette fonction):

function handleFacebook() {

	FB.init({appId: 'XXXXXXXXXXXXXX', xfbml: true, cookie: true});
	FB.getLoginStatus(function(response) {
			onStatus(response); // once on page load
			FB.Event.subscribe('auth.statusChange', onStatus); // every status change
		});

}

Notez, dans l’appel à FB.init, pour le paramètre appId, remplacez 'XXXXXXXXXXXXXX' par la valeur Application ID de votre Application Facebook.

Vous devez également déclarer ces fonctions, par exemple dans un fichier JS qui sera bien sûr inclus avant l’appel de la fonction précédente.

/**
* This will be called once on page load, and every time the status changes.
*/
function onStatus(response) {
	console.info('onStatus', response);
	if (response.session) {
		console.info('User logged in');
		if (response.perms) {
			console.info('User granted permissions');
		}else{
			console.info('User has not granted permissions');
		}
		document.getElementById('fb-login-button').innerHTML='';
		showAccountInfo();
	} else {
		console.info('User is logged out');
		showLoginButton();
	}
}

Le bouton de connexion est affiché si l’utilisateur n’est pas connecté ou n’a pas autorisé l’application.

/**
* This assumes the user is logged out, and renders a login button.
*/
function showLoginButton() {
	var button = '<fb:login-button perms="email,user_birthday" />';
	document.getElementById('fb-login-button').innerHTML = button;
	FB.XFBML.parse(document.getElementById('fb-login-button'));
}

Le bouton de connexion fb:login-button est issu du FBML (Facebook Markup Language).

L’attribut perms permet de spécifier les permissions supplémentaires (autres que pour les informations de base) que vous voulez demander à l’utilisateur. Il n’est pas obligatoire de demander toutes les permissions dès le début, une demande d’autorisation sera présentée à l’utilisateur pour chaque permission qu’il n’a pas encore accordé.

FB.XFBML.parse : il faut reparser le FBML mis à jour, car les navigateurs ne le reconnaissent pas.

function showAccountInfo() {
	FB.api(
		{
		method: 'fql.query',
		query: 'SELECT name, first_name, last_name, uid, email, birthday_date, sex  FROM user WHERE uid='+FB.getSession().uid
		},
		function(response) {
			console.info('API Callback', response);
			var user = response[0];

			document.getElementById('loginField').value = user.name;
			document.getElementById('email').value = user.email;
			document.getElementById('firstName').value = user.first_name;
			document.getElementById('lastName').value = user.last_name;

			var d = new Date(Date.parse(user.birthday_date));
			document.getElementById('birthdayDate').value = d.toString('dd/MM/yyyy');

			var sex = user.sex.charAt(0).toUpperCase();
			document.getElementById('gender').value = sex;
		}
	);
}

La requête est écrite en FQL (Facebook Query Language), très proche du SQL.
La requête aura toujours un et un seul résultat: c’est un recherche sur un uid qui existe car il y a une session en cours.
Ensuite, je remplis les champs de mon formulaire avec les valeurs récupérées.

Plus de documentation ici.

En Bonus

L’objet Date natif de JavaScript est assez pauvre, la librairie DateJs permet de l’enrichir, avec notamment le formatage des dates en chaine de caractère. D’où:

d.toString('dd/MM/yyyy')

Vous avez certainement remarqué les instructions:

console.info()

L’objet console n’existe pas sous des navigateurs autres que Firefox et Chrome.
C’est pourtant bien pratique pour débugger le JavaScript.
Voici donc un “hack” à ajouter tout au début de votre code JavaScript, afin de pouvoir laisser ces instructions de logging dans votre code et ne pas se préoccuper du navigateur.

if(typeof console !== 'object')
	console = {};
if((typeof console.debug) !== 'function'){
	if(typeof opera === 'object'){ //redirige les appels vers opera.postError();
		console = {
			debug : function(){return opera.postError(arguments);},
			info : function(){this.debug('[INFO] ',arguments);},
			log : function(){this.debug('[LOG] ',arguments);}
		};
	}
	else{ //Ne rien afficher sur les autres navigateurs
		console = {
			debug : function(){return true;},
			info : function(){return true;},
			log : function(){return true;}
		};
	}
}

Publication

Un certain nombre de fonctionnalités de Facebook sont accessibles sans avoir besoin d’application.

Bouton Partager

Voici le code XFBML à ajouter pour afficher le bouton

<div id="fb-share-button">
	<fb:share-button type="button_count" class="url" />
</div>

Bouton J'aime

Voici le code XFBML à ajouter pour afficher le bouton

<div id="fb-like-button">
	<fb:like layout="button_count" />
</div>

 

FB.XFBML.parse(document.getElementById('fb-share-button'));
FB.XFBML.parse(document.getElementById('fb-like-button'));

Dans les deux cas, si l’attribut href n’est pas spécifié, c’est l’URL courante qui est prise en compte.
À noter que dans ce cas les URL doivent être accessible depuis n’importe où (c’est l’intérêt de partager avec le monde), donc ne soyez étonné pas si ça ne fonctionne pas en phase développement, avec des URL de type http://localhost/….
Enfin, comme précédemment, il y a besoin de:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/fr_FR/all.js" ></script>

 

FB.XFBML.parse(document.getElementById('fb-share-button'));
FB.XFBML.parse(document.getElementById('fb-like-button'));

Sur le mur (wall)

Voici le code qui permet de poster des éléments sur le mur Facebook de l’utilisateur courant.

function facebookAppInit(){
	FB.init({appId: 'XXXXXXXXXX', status: true, cookie: true, xfbml: true});
}

function postOnFacebook(parameters){

	facebookAppInit();
	var params = parameters; /* global var, visible in callback */

	var callback = function(response){
		if (!response.session){
		console.info('not logged in');
		return;
		}

		FB.api('/me/feed', 'post', params, function(response) {
			if (!response || response.error) {
				var msg = response ? response.error.type+' - '+response.error.message : '';
				console.log('Error occured: '+msg);
			} else {
				console.log('Post ID: ' + response.id);
			}
			});
	}

	FB.login(callback, {perms:'publish_stream'});
};

Pour pouvoir publier, il faut une permission particulière: perms:'publish_stream'.
Si l’utilisateur ne l’a pas encore donné, il sera prompté à cet effet.

Les paramètres s’initialisent comme suit.
Ils sont tous optionnels, mais l’intérêt de poster RIEN est limité.

var params = {};
params['message'] = 'Exprimez-vous / What's on you mind?';
params['link'] = 'http://un.lien.com'; /* un lien à partager */
params['name'] = 'un nom pour le lien';
params['picture'] = 'http://adresse.de.l.image; /* une image pour faire joli */
params['description'] = 'la description pour le lien ou l'image';

params['url'] = 'http://url.pour.le.j.aime'; /* like !*/

À noter, le paramètre url est utilisé pour le j'aime / like
Le premier argument de FB.api est alors '/me/likes'.
Sauf que cela revient à poster un like avec votre propre bouton (qui n’est pas celui de Facebook), et cela ne semble pas être autorisé: Exception - (#3) app must be on whitelist

Il existe une limitation à cette utilisation, imposée par Facebook, au-delà d’environ 10 publications par jour par utilisateur, on obtient l’erreur: Exception - (#341) Feed action request limit reached.
La principale raison est de répondre à une problématique de spam potentiel.
Il est donc recommandé de publier manuellement en validant un formulaire dans une popup, auquel cas il faut remplacer l’appel à FB.api par un appel à FB.ui, comme suit:

FB.ui(
	{
	method: 'stream.publish',
	auto_publish: false,
	message: params['message'],
	attachment: {
		name: params['name'],
		href: params['link'],
		description: params['description']
	}
	},
	function(response) {
		if (!response || response.error) {
			var msg = response ? response.error.type+' - '+response.error.message : '';
			console.log('Error occured: '+msg);
		} else {
			console.log('Post ID: ' + response.id);
		}
	}
);

La popup qui apparaitra dans votre page ressemblera à celle-ci:

Popup publish

Popup permettant de saisir un texte à publier sur le mur de l’utilisateur

Le paramètre message correspond au test que l’on veut publier, les paramètres href, name et description, optionnels, correspondent à l’URL, le nom (à afficher) et la description d’un lien à attacher au post.

SSO (Single Sign-On)

Dans tous les cas, la première chose à faire est d’initialiser le contexte. XXXXXXXXX est toujours votre Application Id fourni par Facebook, que vous pouvez bien entendu paramétrer.

FB.init(
	{
	appId: 'XXXXXXXXX',
	status: true,
	cookie: true,
	xfbml: true
	});

Connexion

Il est pratique de se connecter simultanément à Facebook et à votre application, car si l’application interagit avec Facebook, elle aura besoin qu’une session soit ouverte.
Comme nous l’avons déjà vu jusqu’ici, l’API Facebook utilise beaucoup le concept de callback, qui dans les fait se traduit par le passage en argument d’une fonction à exécuter.

FB.getLoginStatus(handleGetLoginStatusResponse);

function handleGetLoginStatusResponse(response) {
	if (response.session) {
	  loginWithFacebookUid(response.session.uid);
	} else {
	  FB.login(handleLoginResponse, {perms:'publish_stream'});
	}
}

function handleLoginResponse(response){
	if (response.session) {
	  loginWithFacebookUid(response.session.uid);
	} else {
	  /* user not logged in */
	}
}

function loginWithFacebookUid(uid){
	/* custom code */
}

Dans ce code: si une session Facebook est déjà ouvert, alors on peut tenter de l’utiliser pour se connecter à l’application tierce, sinon il faut en ouvrir une.
À noter qu’il est nécessaire d’avoir recours à une autre fonction pour ce deuxième cas, car sinon, l’appel récursif serait infini tant que l’utilisateur refuse de s’authentifier sur Facebook.

Par ailleurs, lors de l’authentification, vous pouvez demander à l’utilisateur des permissions qui n’auraient pas encore été accordées, comme ici avec perms:'publish_stream', pour pouvoir publier sur le mur Facebook.

Se connecter avec l’uid Facebook

L’uid que vous récupérez dans la session est l’identifiant Facebook de l’utilisateur (une sorte de clé primaire). Cet identifiant est obtenu lorsque l’utilisateur donne son accord pour que votre application accède aux données de base de son compte Facebook et est ensuite associé au compte utilisateur sur votre application.

Déconnexion

Si l’on propose de se connecter simultanément à l’application et à Facebook, il est logique de gérer la déconnexion simultanée, d’autant que l’utilisateur peut facilement oublier qu’il est connecté à Facebook si il n’y accède que via votre application (aucune fenêtre n’est ouverte, mais une session est pourtant ouverte).

FB.getLoginStatus(handleResponse);

function handleResponse(response) {
	if (response.session) {
	  FB.logout(doLogout);
	} else {
		/* no facebook session */
	}
}

function doLogout(){
	/* log out your Web App */
}

De manière générale, prenez garde à la synchronisation des sessions entre votre application et Facebook. En effet, il se peut que vous expérimentiez le phénomène de connexions fantôme: vous êtes déconnectés de Facebook, mais votre application accède toujours au token qui référence une session qui n’est plus valide.

Conclusion

J’espère que cet article relatant mon retour d’expérience sur Facebook Connect permettra à mes lecteurs, qui voudraient intégrer cette fonctionnalité sur leur application Web, de gagner du temps dans cette démarche. Il est vrai que l’ensemble des informations nécessaires est dispersé sur le Web. Les exemples que j’ai proposé sont récents, exploitant la nouvelle API Graph, qui est incompatible avec les scripts plus anciens; le seul script JavaScript à inclure est http://connect.facebook.net/fr_FR/all.js.

Nombre de vue : 2111

COMMENTAIRES 15 commentaires

  1. Un article très instructif !
    A quand le “J’aime” sur le blog de So@t !!!

  2. Vince dit :

    Super article,
    Merci bcp pour ce retour d’expérience très intéressant!

  3. cyril dit :

    Très bon tutoriel, en plus avec le nouveau API. Merci à toi

  4. David dit :

    Super article, merci !

  5. Antoine dit :

    Article Excellent Merci Bcp !!
    Une petite question sur un problème que j’ai actuellement. Est-ce qu’il est possible d’obtenir une autorisation durable ? En gros lorsque la personne a accepté une fois, est-il possible de lui reposter des informations sur son wall ultérieurement?
    Merci de l’info et encore merci pour cet article!!

  6. Erwan Letessier dit :

    L’autorisation est enregistrée dans la partie “applications” du profil Facebook de l’utilisateur, donc elle demeure jusqu’à ce que l’utilisateur la retire.
    Par contre l’application demandera toujours l’ouverture d’une session Facebook (si il n’y en a pas d’ouverte).

  7. sabir dit :

    bonsoir,

    merci pour ce tutoriel

    en faite je l’ai intégrer sur mon site, ca fonctionne trés bien avec mon facebook et pas avec tous les autres?

    est ce que ca vous a déja arrivé ?

    merci d’avance

    PS: j’ai créer l’API facebook avec le mien celui qui fonctionne

  8. Paul dit :

    Super tuto, merci !

  9. Thomas dit :

    Bonjour,

    Déjà merci pour le tuto 🙂
    J’ai une question, quand je réalise le tuto, sur desktop, tout marche !
    Je souhaite a présent intégrer ma page web dans une application sur iphone. L’appli est juste une webview avec en url ma page toute simple.

    Le bouton “connexion” est bien visible, je clique et j’ai donc ma page pour le login, je saisis l’email et le mot de passe de mon compte FB et clique sur login, et la … page blanche, impossible de revenir sur ma page principale…

    il faut que je ferme l’appli et que je reviennes dessus pour voir que mon status est bien modifié.

    Avez-vous une idée du probleme ?

    Merci 🙂

  10. Ed dit :

    déjà fait sur mon site. mais le tutoriel est vraiment bien fait – c’est très simple et clair.

  11. hyoub dit :

    est ce que on peut exploiter le numero de telephone d’un user de l’api facebook

  12. hyoub dit :

    dans le cas si oui quelle le paramètre a utilise merci

  13. MARIGNAN dit :

    excellent article.
    merci

  14. Cerise dit :

    Svp je voudrais savoir si c’est le langage php et si ça à marché pour quelqu’un avec la nouvelle application facebook?

  15. khouloud dit :

    est-ce-que c’est possible de me donne le code pour intégrer Mail Connecter à mon applications Web?
    et merci

AJOUTER UN COMMENTAIRE