Facebook Connect est une librairie qui permet aux sites web de déléguer leur processus d’identification à Facebook. L’intégration de Facebook Connect dans un site web permet ainsi de s’affranchir du processus d’inscription. Facebook Connect simplifie l’inscription et l’identification en utilisant l’identité Facebook de chaque visiteur.
L’API Facebook Connect propose plusieurs fonctions :
- Trusted Authentification, qui permet aux internautes de se connecter aux services partenaires avec leur compte Facebook (même principe qu’Open ID).
- Real Identity, qui permet aux internautes d’afficher et de revendiquer leur identité réelle (même principe que Real Name d’Amazon).
- Friend Linking, qui permet aux internautes de porter leur profil vers d’autres services Web (même principe que Data Availability).
- Dynamic Privacy, qui permet aux internautes d’exporter leurs données personnelles et leurs données de confidentialité vers d’autres systèmes (même principe que Data Portability).
- Social Distribution, qui permet aux membres de notifier leurs amis des actions qu’ils effectuent sur les sites partenaires (même principe que le projet Beacon).
Dans ce billet, nous allons :
- Expliquer les stratégies d’intégration de l’api Facebook Connect avec une application externe.
- Créer une application Facebook pour l’intéraction entre Facebook et notre exemple.
- Installer le plugin Facebook Connect.
- Configurer notre exemple pour utiliser les services Facebook Connect.
- Créer un module de connexion avec Facebook Connect.
Cet article s’adresse aux personnes ayant déjà une expérience autour du framework Grails. Pour les autres, je vous invite vivement à lire la série d’articles NoThunes, naissance d’un projet Grails publiés par Aurélien Maury.
Note technique : L’exemple est réalisé avec Grails v1.3.7.
Intégration de l’api Facebook Connect
Facebook Connect permet aux applications externes de se connecter à Facebook pour récupérer et/ou envoyer des informations. Dans cet article, nous allons nous pencher sur l’identification des internautes sur des applications externe en utilisant leurs identités Facebook. Dans ce sens, Facebook Connect peut être utilisé comme le seul moyen d’inscription et d’identification sur un site web comme il peut être utilisé en appui d’un formulaire d’identification classique avec login et mot de passe.
Nous distinguons ainsi deux stratégies d’intégration de l’api Facebook Connect :
- L’identification
- L’accélération du processus d’inscription
Identification
Une première intégration simple consiste à proposer à des visiteurs de laisser un commentaire sur un blog via un module de connexion Facebook. Un moyen pratique pour identifier rapidement un individu.
Red Bull Connect, par exemple, permet aux utilisateurs de lire le contenu des sites Red Bull et de les commenter tout en y retrouvant ses amis Facebook.
Accélération du processus d’inscription
Une deuxième intégration plus complexe permet d’accélérer le processus d’inscription en récupérant des données personnelles (email, nom, prénom, photo, …) et en pré-remplissant un formulaire d’inscription. Cette méthode permet ainsi d’accélérer la création du compte tout en possédant les données personnelles dans sa base.
Les étapes d’inscription d’un nouveau membre sont les suivantes :
- Pré-inscription avec Facebook connect en pré-remplissant un formulaire d’inscription.
- Finalisation de la création du compte utilisateur en complétant le formulaire d’inscription.
- Liaison du compte utilisateur crée avec son profil Facebook.
CoachClub (site de coaching sportif et bien être), par exemple, intègre le service Facebook Connect pour accélérer l’inscription des utilisateurs.
L’utilisateur peut ensuite s’authentifier via un formulaire d’identification classique en utilisant son compte utilisateur (email et mot de passe) ou via le formulaire d’identification Facebook Connect en utilisant son compte Facebook.
Premiers pas
Pour démarrer, il est nécessaire de créer une application Facebook afin de définir quelques règles d’interaction entre votre site et Facebook (url de base de votre site, redirection suite à une déconnexion, obtention d’une clé pour accéder aux services de l’API, …).
Nous commençons par créer une nouvelle application Facebook. Une fois l’application créée, notez bien les clés (API et secret) que nous allons utiliser par la suite.
Allez sur l’onglet « Site internet », et renseignez les informations « URL du site » et « Nom de domaine du site ».
Notez l’utilisation de local.localhost comme url pour rendre notre application locale accessible par Facebook. Cela nous permet de tester l’intégration de Facebook Connect dans un environnement de développement. N’oubliez pas d’ajouter la ligne : 127.0.0.1 local.localhost dans le fichier hosts.
Pour tester l’intégration de Facebook Connect sur les autres environnements (test, intégration, production …), Il est nécessaire de créer une nouvelle application par environnement.
Installation du plugin
Pour démarrer, nous allons installer le plugin Facebook Connect par le lancement de la commande :
grails install-plugin facebook-connect
Une fois le plugin installé, l’étape suivante sera de démarrer votre application en lançant la commande grails run-app. L’application plante inopinément, une grande trace java indique un classNotFoundException dans la classe FacebookConnectService.groovy. Pas de panique ! C’est un petit bug connu que le créateur du plugin n’a malheureusement pas pris soin de corriger. Le problème est facile à corriger : il suffit de modifier le code source de la classe en question.
Pour cela, nous allons :
- Ouvrir le fichier
.../.grails/[n]/projects/[t]/plugins/facebook-connect-0.2/grails-app/services/FacebookConnectService.groovy - Remplacer la méthode
afterPropertiesSetavec le code ci-dessous :
void afterPropertiesSet() {
def config = null
try {
config = Class.forName("FacebookConnectConfig").newInstance()
}
catch(ClassNotFoundException e) {
log.info("No compiled config class for FB")
}
if (config != null) {
// compiled config class found, we must be running as a WAR
facebookConnectConfig = new ConfigSlurper().parse(config.getClass())
}
else {
// no compiled class exists for the config, we must be running the Grails built-in web server
GroovyClassLoader loader = new GroovyClassLoader(getClass().getClassLoader())
Class clazz = loader.parseClass(new File("grails-app/conf/FacebookConnectConfig.groovy"))
facebookConnectConfig = new ConfigSlurper().parse(clazz)
}
}
- Recompiler le projet et redémarrer l’application pour voir le changement opéré en lançant la commande
grails run-app.
Configuration des environnements
L’installation du plugin va générer le fichier grails-app/conf/FacebookConnectConfig.groovy. Ce fichier est utilisé par le plugin pour initialiser les clés nécessaires à l’utilisation du module de connexion Facebook Connect.
import grails.util.GrailsUtil
def env = GrailsUtil.getEnvironment()
switch (env) {
case "development" :
facebookConnect {
APIKey = "97f6038da39fe966****************"
SecretKey = "1278ee6899867e55****************"
}
break
case "integration" :
facebookConnect {
APIKey = ""
SecretKey = ""
}
break
case "preprod" :
facebookConnect {
APIKey = ""
SecretKey = ""
}
break
case "production" :
facebookConnect {
APIKey = ""
SecretKey = ""
}
break
case "debug" :
facebookConnect {
APIKey = ""
SecretKey = ""
}
}
N’oubliez pas la règle: Une application Facebook par environnement.
Module de connexion via Facebook Connect
FacebookUserTagLib
Nous allons créer un taglib pour afficher / cacher des fragments de notre page en fonction de l’état de connexion de l’internaute.
Le fichier FacebookUserTagLib.groovy est à créer dans le répertoire grails-app/taglib :
class FacebookUserTagLib {
// FacebookConnectService qui provient du plugin Facebook Connect
def facebookConnectService
static namespace = 'gfb'
def isLoggedIn = { attrs, body ->
if(facebookConnectService.isLoggedIn(request)) {
out << body()
}
}
def isLoggedOut = { attrs, body ->
if(!facebookConnectService.isLoggedIn(request)) {
out << body()
}
}
}
Pages de test
Pour faire simple, nous allons ajouter le code suivant dans la page grails-app/views/index.gsp :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<gfb:isLoggedIn>
<g:render template="layouts/userLoggedIn" />
</gfb:isLoggedIn>
<gfb:isLoggedOut>
<g:render template="layouts/userLoggedOut" />
</gfb:isLoggedOut>
<g:facebookConnectJavascript />
</body>
</html>
Comme le montre le code ci-dessus, les tags gfb:isLoggedIn et gfb:isLoggedOut sont utilisés respectivement pour afficher/cacher des bouts de code de la page selon l’état de connexion de l’internaute.
Le tag g:facebookConnectJavascript permet d’initialiser la configuration nécessaire à l’utilisation du module de connexion Facebook Connect.
grails-app/views/layouts/_userLoggedOut
Le morceau de code suivant permet d’afficher le bouton de connexion Facebook Connect.
<fb:login-button onlogin="facebook_onlogin();"></fb:login-button>
<script type="text/javascript">
function facebook_onlogin() {
window.location='/fbc_sample';
}
</script>
grails-app/views/layouts/_userLoggedIn
Le bout de page suivant permet d’afficher quelques informations (photo de profil, nom et prénom) pour l’utilisateur connecté, ainsi que le bouton de déconnexion.
<fb:name uid="loggedinuser" useyou="false"></fb:name>
<br></br>
<fb:profile-pic uid="loggedinuser" size="normal" />
<br></br>
<input type="button"
value="Logout"
class="facebookButton"
onclick="FB.Connect.logout(facebook_onlogout);return false;" />
<script>
function facebook_onlogout() {
window.location='/fbc_sample';
}
</script>
Tester le module de connexion Facebook Connect
Commencer par démarrer votre application en lançant la commande :
grails-app run-app development
Sur votre navigateur favoris, tapez l’url de votre application en remplaçant 127.0.0.1 ou localhost par local.localhost.
Conclusion
Facebook Connect est une api très simple d’utilisation mais son intégration avec des technologies tierces peut s’avérer complexe. L’usage du plugin a permis de simplifier l’intégration de Facebook Connect avec notre application. Vous pouvez même faire évoluer le plugin en fonction de vos besoins. Dans un prochain billet, nous nous attarderons sur un exemple qui propose Facebook Connect en appui d’un formulaire d’identification classique avec email et mot de passe. Nous verrons aussi comment faire cohabiter l’api Facebook Connect avec Spring security dans une application Grails.