Ajoutez Facebook Login à votre application Node.js avec Passport.js

Temps de lecture: 4 minutes

October 18, 2019
Rédigé par
Felistas Ngumi
Contributeur
Les opinions exprimées par les contributeurs de Twilio sont les leurs

Ajoutez Facebook Login à votre application Node.js avec Passport.js

Presque toutes les applications exigent que les utilisateurs créent des comptes sur leurs sites Web afin d'utiliser certains services. Ce processus répétitif de configuration de nouveaux profils et de création de nouveaux mots de passe pour chaque application est non seulement long, mais frustrant, et au fil du temps, complique la gestion des comptes, en raison du nombre d'identifiants à mémoriser.

Grâce à OAuth, nous pouvons utiliser les applications de médias sociaux populaires telles que Google, Facebook et Twitter pour authentifier les utilisateurs. Ce processus facilite la mise en œuvre de l'authentification et augmente l'adoption grâce à la confiance existante créée avec le réseau social. Pourquoi ne pas l'intégrer à votre application ?

Dans ce tutoriel, je vais vous expliquer comment intégrer Facebook dans votre application Node.js.

Conditions préalables

Vous aurez besoin des dépendances suivantes pour effectuer ce tutoriel :

  1. Node
  2. Compte développeur Facebook
  3. Mongo Db

Mise en route

Suivez les instructions ci-dessous sur votre terminal préféré pour configurer votre environnement de développement :

$ mkdir demo
$ cd demo
$ git clone https://github.com/Felistas/NodeJs-Passport-Authentication.git
$ git checkout social-authentication 
$ cd NodeJs-Passport-Authentication

Ensuite, exécutez :

$ npm install
$ npm start

Pour confirmer que tout fonctionne comme prévu, ouvrez votre client REST favori (Insomnia est mon préféré) et faites une requête GET au point de terminaison suivant http://localhost:3000/users. Confirmez que la réponse est la suivante :

dashboard de Insomnia

Configuration du projet

Afin de comprendre comment le projet est configuré, nous allons parcourir les structures de dossiers individuelles qui suivent le modèle MVC (Model View Controller). En résumé, le modèle MVC définit le schéma des données dans la base de données et la manière dont elles seront stockées. Les contrôleurs contiennent la logique métier de l'application tandis que la vue contient tous nos chemins.

Dans le dossier app, nous avons des dossiers utilisateur et utils qui sont responsables respectivement de la configuration de la ressource utilisateur et de la base de données. Le fichier index.js, qui est le point d'entrée de notre application, est responsable de la configuration express. Dans ce projet, nous allons utiliser ES6 et Babel pour compiler le code. J'ai également configuré nodemon pour écouter les modifications apportées à l'application, puis j'ai rechargé le serveur.

OAuth 2

OAuth 2 est un framework d'autorisation qui permet aux applications tierces d'obtenir un accès limité aux services HTTP, soit pour le compte du propriétaire de la ressource, soit en permettant à ces applications tierces d'obtenir l'accès pour leur propre compte. Dans les deux cas, le propriétaire n'a pas besoin de fournir ses identifiants de connexion directement à l'application.

Dans notre cas, l'application que nous construisons serait l'application tierce. Facebook serait notre service HTTP et l'utilisateur final le propriétaire de la ressource. Ces trois rôles relèvent des rôles OAuth suivants :

  1. Propriétaire/utilisateur final de la ressource : il s'agit de l'utilisateur autorisant une application tierce à accéder à certaines ressources protégées à partir d'un serveur de ressources.
  2. Client : application tierce qui envoie des demandes de ressources protégées à un serveur de ressources pour le compte du propriétaire de la ressource.
  3. Serveur de ressources : héberge les ressources protégées, par exemple le profil utilisateur.
  4. Serveur d'autorisation : responsable de l'authentification du propriétaire de la ressource et de la fourniture d'un token d'accès aux clients.

Pour que l'authentification des utilisateurs se produise correctement, il convient de suivre une série d'étapes :

  1. Le client (qui est notre application dans ce cas) demande l'autorisation à l'utilisateur final.
  2. Une fois que l'utilisateur final a autorisé le client, un octroi d'application est émis.
  3. Notre client demande ensuite un token d'accès au serveur d'autorisation à l'aide de l'octroi d'autorisation.
  4. Le serveur d'autorisation valide l'octroi et authentifie le client. Si les deux processus réussissent, un token d'accès est octroyé au client.
  5. Notre client utilise ensuite le token d'accès pour demander la ressource protégée.
  6. Le serveur de ressources valide alors le token d'accès et, en cas de réussite, les ressources protégées demandées sont partagées avec le client.

Remarque : Auth2 a différents types d'octroi. Pour ce tutoriel, nous allons utiliser le type d'octroi de code d'autorisation.

Passport

Selon la documentation officielle, Passport, un logiciel médiateur d'authentification pour Node.js, prend en charge un certain nombre de stratégies, notamment Facebook, Google, Twitter, etc. Maintenant, nous allons retrousser nos manches et faire fonctionner l'authentification Facebook. Pour commencer, exécutez les commandes suivantes pour installer les différentes dépendances nécessaires :

$ npm install passport passport-facebook --save

Le package Passport-Facebook nous permet d'authentifier les utilisateurs à l'aide de Facebook. Dans app/user/user.controller.js, remplacez le code existant par les lignes de code suivantes :

import passport from "passport";
import dotenv from "dotenv";
import strategy from "passport-facebook";

import userModel from "../user/user.model";

const FacebookStrategy = strategy.Strategy;

dotenv.config();
passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(obj, done) {
  done(null, obj);
});

passport.use(
  new FacebookStrategy(
    {
      clientID: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
      callbackURL: process.env.FACEBOOK_CALLBACK_URL,
      profileFields: ["email", "name"]
    },
    function(accessToken, refreshToken, profile, done) {
      const { email, first_name, last_name } = profile._json;
      const userData = {
        email,
        firstName: first_name,
        lastName: last_name
      };
      new userModel(userData).save();
      done(null, profile);
    }
  )
);

Ensuite, dans app/user/user.router.js, remplacez le code existant par :

import express from "express";
import passport from "passport";
import userController from "./user.controller";


const userRouter = express.Router();

userRouter.get("/auth/facebook", passport.authenticate("facebook"));

userRouter.get(
  "/auth/facebook/callback",
  passport.authenticate("facebook", {
    successRedirect: "/",
    failureRedirect: "/fail"
  })
);

userRouter.get("/fail", (req, res) => {
  res.send("Failed attempt");
});

userRouter.get("/", (req, res) => {
  res.send("Success");
});
export default userRouter;

Ici, nous avons défini nos URL de callback et spécifié des chemins de réussite et d'échec en cas d'échec de l'authentification, c'est-à-dire les chemins / et /fail pour la réussite et l'échec respectivement.

Dans app/index.js, ajoutez l'extrait de code suivant.

import express from "express";
import { json } from "body-parser";
import passport from "passport";

import { connect } from "./utils/db";
import userRouter from "./user/user.routes";

const app = express();
const port = 3000;

app.use(passport.initialize());

app.use(json());
app.use("/", userRouter);

app.listen(port, async () => {
  await connect();
  console.log(`Server listening on ${port}`);
});

Pour une authentification réussie, nous devons enregistrer notre URL de callback et obtenir le secret client et l'ID client à partir de la console de développement d'application Facebook. Accédez à https://developers.facebook.com/ et créez une application.

Création d'une nouvelle application Facebook

Vous serez alors redirigé vers le tableau de bord de l'application, comme illustré ci-dessous :

paramétrage de l'application facebook

Nous allons maintenant configurer notre URL de callback en ajoutant une plate-forme sous l'onglet de base dans les paramètres :

Remarque :veillez à sélectionner un site Web comme type de plate-forme.

Credentials pour le paramétrage de l'application Facebook

Ensuite, créez un fichier .env dans notre répertoire de projet et ajoutez les éléments suivants :

FACEBOOK_CLIENT_ID=XXXXXXX
FACEBOOK_CLIENT_SECRET=XXXXXXX
FACEBOOK_CALLBACK_URL=http://localhost:3000/auth/facebook/callback

Assurez-vous d'obtenir les clés à partir de la console de l'application.

Test

Dans votre navigateur, collez l'URL suivante : http://localhost:3000/auth/facebook. L'écran ci-dessous devrait vous inviter à saisir vos identifiants Facebook.

Une fois vos identifiants validés, vous serez redirigé vers un écran de réussite, comme illustré ci-dessous :

Authentification par facebook réussie

Pour comprendre le flux de processus, décomposons les étapes :

  1. Notre application (c'est-à-dire le client) utilise Passport pour créer un lien vers notre serveur d'autorisation, c'est-à-dire le serveur d'autorisation Facebook. Le lien est similaire à https://www.facebook.com/login.php?skip_api_login=1&api_key=604879570044749&kid_directed_site=0&app_id=604879570044749&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv3.2%2Fdialog%2Foauth%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Fauth%252Ffacebook%252Fcallback%26client_id%3D604879570044237824749%26ret%3Dlogin%26fbapp_pres%3D0%26logger_id%3D9cdcc3d6-80fc-432c-aa6f-ede4b45eee43&cancel_url=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%23_%3D_&display=page&locale=en_GB qui s'affiche dans le navigateur. Il s'agit de l'écran d'authentification Facebook que vous avez vu ci-dessus.
  2. L'utilisateur final saisit ensuite ses identifiants Facebook.
  3. Le serveur d'autorisation authentifie l'utilisateur et le renvoie au client avec un code d'autorisation.
  4. Le client échange alors le code d'autorisation avec le serveur d'autorisation afin d'obtenir un token d'accès.
  5. Le client demande ensuite des ressources au serveur de ressources à l'aide de ce token d'accès. Dans notre cas de figure, les ressources incluent l'e-mail et le nom comme spécifié dans le profileFields de notre fichier de contrôleur.

Une fois que nous les avons obtenues, nous pouvons utiliser notre modèle utilisateur pour enregistrer les données dans la base de données configurée comme indiqué ci-dessus.

Conclusion

Dans ce tutoriel, nous avons appris à authentifier les utilisateurs à l'aide de Facebook dans une application Node.js. Vous pouvez voir le projet de travail complet ici. Le processus devrait également être similaire et direct pour d'autres plates-formes comme Google, Github et Twitter. Je serais heureux d'avoir votre retour ! Vous pouvez me contacter sur Twitter, LinkedIn ou m'envoyer un e-mail. Bonne personnalisation !

Articles associés

Ressources connexes

A newspaper article

Twilio Docs

Des API aux SDK en passant par les exemples d'applications

Documentation de référence sur l'API, SDK, bibliothèques d'assistance, démarrages rapides et didacticiels pour votre langage et votre plateforme.
An Open book

Centre de ressources

Les derniers ebooks, rapports de l'industrie et webinaires

Apprenez des experts en engagement client pour améliorer votre propre communication.
User group reactions

Ahoy

Le hub de la communauté des développeurs de Twilio

Meilleures pratiques, exemples de code et inspiration pour créer des expériences de communication et d'engagement numérique.