Intégrer une connexion Facebook à votre site React.

Je vois pas mal d’article qui montre comment faire une connexion Facebook, sur un site React, mais tous utilisent le framework Facebook. Sauf que, moi, je n’ai pas envie de charger leur framework (dans une balise script en plus) alors que je n’ai besoin que de la connexion. Je vais donc vous montrer ici comment j’ai manuellement implémenté la connexion Facebook dans une application React de test.

Avant de commencer

Afin de suivre ce mini-tutoriel, je vous invite à récupérer le code du projet :  facebook-login-without-sdk et de vous rendre à la branche feature/initialisation

$ git clone https://github.com/gkueny/facebook-login-without-sdk.git

$ cd facebook-login-without-sdk

$ git checkout  feature/initialisation

$ yarn

Ce projet a été créé à partir de la commande create-react-app et les modifications apportées sont les suivantes :

  • ajout de react-router et react-router-dom
  • création d’une route home et d’une route login avec un bouton de connexion et d’un composant logout
  • initialisation du css de l’application
Capture d'écran de la base de l'application de connexion Facebook
Capture d’écran de la base de l’application de connexion Facebook

Description du processus de connexion Facebook

Vous pouvez voir le processus de connexion à respecter ici : manually build a login flow. Je vais de mon côté vous le résumer point par point, puis nous implémenterons ces étapes par la suite.

Il est tout d’abord vital de retenir l’état de connexion de notre utilisateur. De notre côté, nous stockerons le token, récupéré depuis Facebook, afin de savoir si l’utilisateur est déjà connecté ou non. Attention, il nous sera nécéssaire de vérifier la validité du token. Nous implémenterons cela à la fin.

Si l’utilisateur n’est pas déjà connecté, nous utiliserons la boîte de dialogue Login afin de connecter l’utilisateur. Cela a l’avantage de zapper l’authentification Facebook si celui-ci est déjà connecté. Il faut, bien entendu, que l’on est déjà créé une application Facebook. Nous verrons cela dès la prochaine partie.

Une fois l’utilisateur connecté, nous devons enregistrer le token qui lui est associé. Nous pouvons le récupérer grâce à une url de redirection renseignée dans notre application Facebook. Cette url sera appelée à la fin du processus de connexion.

Enfin nous devons permettre à l’utilisateur de se déconnecter.

1. Création de l’application Facebook

Créons donc notre application Facebook. Rendez-vous à cette url : https://developers.facebook.com, inscrivez-vous ou connectez-vous,  puis créez une nouvelle application.

Création de l'application Facebook
Création de l’application

Ensuite, dans cette application, ajoutez le produit « Facebook Login » et renseignez l’url de votre application React (http://localhost:3000/ dans notre cas).

Une fois ceci fait, allez dans les paramètres du« Facebook Login », activez la « Connexion OAuth cliente » et la « Connexion OAuth web » puis ajoutez une url de redirection (http://localhost:3000/login dans notre cas).

Capture d'écran de la configuration du Facebook login
Configuration du Facebook login

 

2. Stockons l’état de connexion de l’utilisateur

Maintenant que notre application Facebook est créée, mettons en place un système afin de se souvenir de l’état de connexion de l’utilisateur.

Aller, allons-y ! Dans le fichier App.js nous allons stocker le token. On peux également en profiter pour mettre en place la route logout à la place de la route login si l’utilisateur est connecté :

Modifions également le header pour prendre en compte la route Logout.

3. Connexion Facebook

Toute la magie va se dérouler dans le fichier login.js et App.js. Lors du clic sur le bouton de login, nous allons ouvrir la boite de dialogue login en y spécifiant l’url de redirection (que nous avons préalablement renseigné dans l’app) et l’id de notre app Facebook.

Une fois le processus de connexion terminé, Facebook va rediriger l’utilisateur vers l’url spécifiée (http://localhost:3000/login)   en y ajoutant le token sous la forme : http://notre/url#access_token={token_user}. Nous devons donc, lors de l’initialisation du composant login (avec la fonction componentDidMount()) , vérifier si ce paramètre est présent et si oui, mettre à jour le token de notre application.

Bien entendu, n’importe qui pourrait appeler cette url et passer un faux token pour s’authentifier, mais ne vous inquiétez pas, nous prendrons en charge la vérification automatique du token à la fin de ce tutoriel.

Voici donc le code du fichier App.js :

et celui qui nous intéresse le plus, le fichier login.js :

et voilà !

4. Vérifier le token

Bien sûr, le token peut être incorrect, avoir expiré etc… Pour éviter à n’importe qui de se connecter sans l’avoir réellement fait, il nous est nécessaire de vérifier la validité de ce token.

Une solution possible est de faire un appel (peu couteux) à Facebook avec ce token et de ne l’enregistrer que si le code de retour est 200.

 

5. Déconnexion

La déconnexion est très simple, il suffit juste de passer le token à null.

Une dernière chose

Le token ainsi récupéré est à courte durée. Afin d’en obtenir un de plus longue durée il vous est nécessaire demander à votre serveur de faire l’appel pour vous (ceci afin de ne pas exposer la clé privée de votre application côté client). De plus avec notre méthode de vérification, nous ne sommes pas sures de savoir si c’est bien notre application qui a généré le token.

Pour avoir une vraie connexion Facebook, il nous faut donc échanger notre token de courte durée contre un de longue durée grâce à un serveur . Voici un serveur node.js très simple qui vous permettra d’effectuer cette action :

Et coté react il ne reste plus qu’à modifier notre fonction firstTokenFacebook(token) :

Le code du serveur est loin d’être optimisé, mais c’est pour que vous compreniez le concept et puissiez facilement l’adapter à un autre type de serveur (PHP par exemple).

De plus,  avec cette application si on recharge la page, le token est oublié et l’utilisateur déconnecté. Pour plus d’infos sur la manière de faire avec redux (par exemple), je vous redirige vers cet article : http://frenchreact.fr/proteger-son-application . Il vous suffit d’adapter la fonction checkUserStatus(), signInUser() et signOutUser(). Il vous faudra également checker le statut de connexion de l’utilisateur que lorsque le token est modifié si vous ne voulez pas consommer le nombre de requêtes maximum ,dans un intervalle de temps, permit par Facebook. Vous pouvez également stocker la durée de vie du token, qui est retourné par Facebook lors du login, afin de déconnecter automatiquement l’utilisateur au bout d’un certains temps.

Laisser un commentaire