Blog technique sur les technologies web

Un article de laurent luce    Pas de commentaires

Dans cet article, je vais essayer de décrire au mieux comment j’ai integré Facebook à mon site Gourmious. Le but étant pour les utilisateurs de pouvoir poster leurs commentaires sur leurs plats préférés sur Gourmious et sur Facebook en même temps.

Je voulais garder l’authentification Django pour donner une option à ceux qui n’ont pas de compte Facebook ou à ceux qui ne veulent pas utiliser Gourmious avec Facebook.

Je voulais aussi que tous les utilisateurs de Gourmious aient un compte Gourmious et donc j’ai décidé de ne pas autoriser l’authentification si l’utilisateur n’a pas de compte Gourmious.

J’ai décidé de supporter les 3 scénarios suivants:

1- L’utilisateur a un compte Django, il s’identifie en utilisant son compte Facebook, je joins son compte Django avec son compte Facebook. Cela a besoin d’être effectué qu’une seule fois.

2- L’utilisateur n’a pas de compte Django et essaie de s’identifier avec son compte Facebook. Je lui demande tout d’abord de créer un compte Django puis je joins son compte Django avec son compte Facebook.

3- L’utilisateur s’identifie avec son compte Django.

Facebook oauth est plus facile à intégrer que l’ancien Facebook Connect. J’étais très content de migrer ma plate forme vers cette nouvelle méthode.

On présume que vous avez déjà un serveur avec votre app Django et que vous avez créer une appli Facebook.

On va utiliser l’appli Django django_facebook_oauth pour faciliter la tâche. vérifiez que vous avez simplejson d’installé avant de continuer.

Facebook utilise le protocole OAuth 2.0 pour l’authentification et l’autorisation. Je vous conseille de lire cet article avant de continuer:
Facebook authentication

Récuperez le code de l’appli Django Facebook oauth:

git clone http://github.com/dickeytk/django_facebook_oauth.git

Copiez le dossier django_facebook_oauth dans votre dossier appli Django et renommez le ‘facebook’.

On présume que votre dossier appli Django s’appelle ‘apps’.

Django settings.py

On a besoin de faire les changements suivants:

• Ajoutez ‘apps.facebook.backend.FacebookBackend’ à AUTHENTICATION_BACKENDS.
• Ajoutez ‘apps.facebook’ à INSTALLED_APPS
• Ajoutez votre ID Facebook: API_ID = xxxx.
• Ajoutez votre clé secrète Facebook: APP_SECRET = xxxx.

Django urls.py

Ajoutez la ligne suivante à urlpatterns:
(r », include(‘apps.facebook.urls’)),

Changements dans la base de données

On a besoin de créer une table pour associer l’ID Django d’un utilisateur avec son ID Facebook et pour sauvegarder le token de la session Facebook. Vous pouvez utiliser syncdb ou vous pouvez créer la table manuellement.

CREATE TABLE `facebook_facebookuser` (
  `id` int(11) NOT NULL auto_increment,
  `user_id` int(11) NOT NULL,
  `facebook_id` varchar(150) NOT NULL,
  `access_token` varchar(150) default NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `user_id` (`user_id`),
  UNIQUE KEY `facebook_id` (`facebook_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

Le flux de l’authentification Facebook

1- L’utilisateur cliques sur le bouton Facebook
2- La vue ‘authenticate’ de l’appli Django Facebook est appelée
3- L’URL Graph API de Facebook est appelée avec l’ID de votre appli Facebook, redirect uri = /authenticate, scope = ‘publish_stream’ pour demander l’autorisation de poster sur le compte Facebook de l’utilisateur.
4- La vue ‘authenticate’ de l’appli Django Facebook est appelé avec un code qui est le token pour la session Facebook.
5- L’authentification passe par la fonction authenticate() de l’appli Django Facebook.
6- Si l’utilisateur existe dans la table facebook_facebookuser, on l’identifie puis on renvoie vers la page d’accueil. Si l’utilisateur n’est pas dans la table, on lui demande de s’identifier avec son identifiant Django pour qu’on puisse joindre son compte Django à son compte Facebook.

Appli Django Facebook views.py

J’ai modifié views.py pour utiliser mon formulaire d’authentification pour joindre le compte Django de l’utilisateur à son compte Facebook au lieu d’utiliser le formulaire inclus dans l’appli Django Facebook.

Après que le token soit renvoyé et si l’utilisateur n’est pas dans la table Facebook, on ajoute un paramètre dans la session Django pour indiquer à la template que le formulaire d’authentification doit être affiché pour pouvoir joindre le compte Django au compte Facebook.

if user != None:
  login(request, user)
  return HttpResponseRedirect('/')
else:
  # lignes ajoutées
  request.session['ask_to_login_facebook'] = '1'
  return HttpResponseRedirect('/')
  #return HttpResponseRedirect('/register/')

Quand l’utilisateur s’identifie avec son identifiant Django, on ajoute une nouvelle entrée dans la table Facebook. On a besoin de faire cela qu’une fois. Après cela, l’utilisateur pourra s’identifié directement en utilisant le bouton Facebook.

Voici le code ajouté dans mon appli Django views.py:

# check credentials
user = authenticate(username=username, password=password)
if user is not None:
  if user.is_active:
    if 'fb_id' in request.session:
      fb_user = FacebookUser(user = user,
        facebook_id = request.session['fb_id'],
        access_token = request.session['fb_token'])
      fb_user.save()
      del request.session['fb_id']
      del request.session['fb_token']
      login(request, user)
      status = 0
    else:
      status = 1
  else:
    status = 1
    msg = _('Invalid password')

Appli Django Facebook backend.py

Juste une petite modification dans ce fichier pour ajouter dans la session le token Facebook pour pouvoir l’utiliser dans views.py de notre appli Django.

try:
  fb_user = FacebookUser.objects.get(facebook_id = str(profile["id"]))
except FacebookUser.DoesNotExist:
  request.session['fb_id'] = profile['id']
  # ligne ajoutée
  request.session['fb_token'] = access_token
  return None
fb_user.access_token = access_token
fb_user.save()

Template de l’appli Django

On ajoute la forme suivante à la template de notre appli Django pour afficher le bouton Facebook.

J’ai également ajouté une option ‘Poster sur Facebook’ sur le formulaire pour poster un commentaire sur un plat. Cela donne le choix à l’utilisateur de poster ou non le commentaire sur son compte Facebook en même temps.

Poster un message sur le compte Facebook de l’utilisateur

J’avais l’habitude d’utiliser le SDK Javascript de Facebook pour poster les messages. Maintenant, j’utilise le SDK Python de Facebook du côté serveur.

Ajoutez le fichier facebook.py (http://github.com/facebook/python-sdk/blob/master/src/facebook.py) dans le dossier de l’appli Django Facebook et renommez le ‘facebook_sdk.py’ .

On appelle la fonction put_wall_post() pour poster un message sur le compte Facebook de l’utilisateur.

Voila le code que j’utilise dans views.py de mon appli Django pour préparer les paramètres nécessaires à la fonction put_wall_post() .

def post_to_facebook(request):
  try:
    fb_user = FacebookUser.objects.get(user = request.user)
    # GraphAPI est la classe dans facebook_sdp.py
    graph = GraphAPI(fb_user.access_token)
    attachment = {}
    message = 'test message'
    caption = 'test caption'
    attachment['caption'] = caption
    attachment['name'] = 'test name'
    attachment['link'] = 'link_to_picture'
    attachment['description'] = 'test description'
    graph.put_wall_post(message, attachment)
    return 0
  except:
    logging.debug('Facebook post failed')

Voila, n’hesitez pas à ajouter des commentaires ou à m’envoyer des questions.

Si vous avez aimé cet article, ça serait cool d’aller sur mon site Gourmious pour découvrir et partager vos plats préférés au resto.