Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

NodeJS - ExpressJS : L'authentification Facebook avec PassportJS

Par Laurent PHILIBERT Publié le 14/09/2016 à 18:27:59 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Préambule

Dans cet article, vous apprendrez à utiliser et comprendrez la bibliothèque qui vous permettra de vous enregistrer et vous authentifier sur votre application web depuis votre compte Facebook.

Introduction

Comme nous l’avons vu dans cet article, vous pouvez créer un module simple et efficace d’authentification avec PassportJS. Tout en utilisant cette dernière, nous verrons aujourd’hui comment la coupler avec Facebok afin d’obtenir une authentification plus simple d’utilisation pour les futurs utilisateurs de votre application.

Pour des raisons de pratiques, je ne développerai pas ici les méthodes de mise en place de PassportJS mais seulement celles de Facebook. Je vous demanderai donc de reprendre l’article détaillant l’utilisation de PassportJS.

Dans cet article, nous utiliserons une base de données orientée documents, comme vous vous en doutez, nous utiliserons MongoDB. Il faut savoir qu’elle permet de stocker de façon plus souple des données qui ne sont pas homogènes. Elle permet également de gérer de grandes quantités de données en facilitant l’extension, on parle alors de scaling.

Comment l'utiliser ?

Pour commencer, vous devez créer un projet sur Facebook Developer afin d’obtenir votre API ID ainsi que votre App Secret.

Facebook Developer

Pour cela, veuillez-vous rendre sur ce lien : Facebook Developers Une fois sur ce lien, veuillez cliquer sur « Add a New App», rentrez le nom de votre application, l’email qui représente votre application et le type de votre application. Une fois cela effectué, créez l’App ID. Vous avez donc accès à votre identifiant et mot de passe d’application pour utiliser l’API Facebook.

Installation des packages

Allez dans le dossier de votre projet et lancez l’installation de ce node package :

		    	npm install –save passport-facebook  
		    

Fichier de configuration pour l'API d'authentification

Veuillez créer à la racine de votre projet un fichier appelé oAuth.js où vous déclarerez votre App ID et votre App Secret :

				var id = {
				    facebook: {
				        clientID: 1234567890,
				        clientSecret: 'ceciEstUnSecret',
				        callbackURL: 'http://localhost:3000/authentification/facebook/callback'
				    }
				};

				module.exports = id;
			

Configuration de l’API

Une fois que cela est effectué, revenez sur votre fichier app.js et rajoutez ces lignes permettant d’utiliser votre API :

				var FacebookStrategy = require('passport-facebook').Strategy;
				var config = require('./oauth.js');

				passport.use('facebook', new FacebookStrategy({
				      clientID        : config.facebook.clientID,
				      clientSecret    : config.facebook.clientSecret,
				      callbackURL     : config.facebook.callbackURL,
				      profileFields: ['id', 'emails', 'name']
				    },

				    function(access_token, refresh_token, profile, done) {
				      process.nextTick(function() {
				        Account.findOne({ 'username' : profile.emails[0].value }, function(err, user) {
				          if (err)
				            return done(err);
				          if (user) {
				            if (err)
				              return done(err);
				            else
				              return done(null, user);
				          } else {
				            if (err)
				              return done(err);

				            Account.register(new Account({ username : profile.emails[0].value }), profile.id, function(err, account) {
				              if (err)
				                return done(err);
				              else
				                return done(null, account);
				            });
				          }
				        });
				      });
				    }
				));
			

Au début, nous appelons juste le node package module qui nous permettra d’utiliser l’API Facebook. Une fois le clientID, le clientSecret et la callbackURL saisis nous pouvons écrire le développement relatif à la connexion de l’utilisateur depuis Facebook et si le compte n’existe pas, nous créons le compte avec l’email de l’utilisateur.

Le routing

Maintenant, passons à la création des routes. Je parle notamment de la callback. Pour cela, comme vous avez dû le remarquer dans le fichier oAuth.js, nous appelons une URI qui commence par « /authentification ».

Nous allons donc créer le fichier authentification.js que nous mettrons dans le dossier routes et qui ressemblera à ceci :

				var express = require('express');
				var passport = require('passport');
				var router = express.Router();

				router.get('/', function(req, res, next) {
				    res.redirect("/");
				});

				router.get('/facebook',
				    passport.authenticate('facebook', { scope : 'email' }
				));

				router.get('/facebook/callback',
				    passport.authenticate('facebook', {
				        successRedirect : '/',
				        failureRedirect : '/login'
				    })
				);

				module.exports = router;
			

Expliquons un peu ces routes...

				router.get('/', function(req, res, next) {
				    res.redirect("/");
				});
			

La première est simple, si nous tapons l’URI « /authentification » nous serons redirigés sur la page d’accueil.

				router.get('/facebook',
				    passport.authenticate('facebook', { scope : 'email' }
				));
			

La seconde permet simplement de lancer le processus d’authentification par Facebook (connexion et inscription).

				router.get('/facebook/callback',
				    passport.authenticate('facebook', {
				        successRedirect : '/',
				        failureRedirect : '/login'
				    })
				);
			

La troisième et dernière route est un peu plus complexe. Il s’agit de la callback. Si l’authentification réussit, nous renvoyons l’utilisateur vers la page d’accueil. Si elle échoue, nous le renvoyons sur la page de connexion classique.

Une fois que tout cela est en place, vous devez déclarer et appeler cette route depuis app.js

				var authentification = require('./routes/authentification');

				app.use('/authentification/', authentification);
			

Les vues

Maintenant, passons aux vues. Comme je vous l’ai dit dans l’introduction, je reprendrai le code de l’article montrant comment utiliser PassportJS (ici) pour créer une authentification simple et rapide.

Voici donc la vue d’inscription :

				extends layout
				block content
				   .container
				      .content_div_class
				         h1 #{title}
				         p.lead #{subTitle}
				         br
				         form(role='form', action="/register",method="post", style='max-width: 300px;')
				            .form-group
				               input.form-control(type='text', name="username", placeholder='mail address')
				            .form-group
				               input.form-control(type='password', name="password", placeholder='password')
				            .btn-group
				               button.blue.btn.btn-default.waves-effect.waves-light(type='submit') register
				               a.btn.btn-social-icon.btn-facebook.waves-effect.pull-right(href="/authentification/facebook", role="button")
				                  i.fa.fa-facebook
			

Et la vue de connexion :

				extends layout
				block content

				   .container
				      .content_div_class
				         h1 #{title}
				         p.lead #{subTitle}
				         br
				         form(role='form', action="/login",method="post", style='max-width: 300px;')
				            .form-group
				               input.form-control(type='text', name="username", placeholder='mail address')
				            .form-group
				               input.form-control(type='password', name="password", placeholder='password')
				            .btn-group
				               button.blue.btn.btn-default.waves-effect.waves-light(type='submit') login
				               a.btn.btn-social-icon.btn-facebook.waves-effect.pull-right(href="/authentification/facebook", role="button")
				                  i.fa.fa-facebook
			

Conclusion

Couplé à PassportJS, la connexion ou l’inscription à votre application depuis Facebook peut s’avérer vraiment utile et important. En effet, cela peut inciter les utilisateurs à choisir votre application étant donné que la connexion et l’inscription ne se font qu’en un clic grâce aux réseaux sociaux. De plus, cela peut lui permettre de pré-remplir son profil avec celui de son Facebook et donc lui faire économiser plusieurs formulaires peu intéressants à remplir !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels