Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

NodeJS - ExpressJS : L'authentification Google+ avec PassportJS

Par Laurent PHILIBERT Publié le 14/09/2016 à 18:57:55 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 Google+.

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 Google+ 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 Google+. 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 Google Developers afin d’obtenir votre API ID ainsi que votre App Secret.

GooglePlus API Developer

Pour cela, veuillez-vous rendre sur ce lien : Google+ API Developers

Une fois sur ce lien, veuillez cliquer sur le menu déroulant en haut à côté du logo Google APIs puis sur « Créer un projet », rentrez le nom de votre application puis cliquez sur « Créer ». Le projet se génère alors. Une fois cela effectué, cliquez sur Google+ API et activez-la. Enfin, cliquez sur « Identifiants » dans le menu latéral gauche, créez vos identifiants « ID client oAuth », configurez l’écran d’autorisation en rentrant le nom de votre produit (votre application) et l’URL de la page d’accueil, choisissez votre type d’application (pour nous ce sera Application web) et enfin cliquez sur « Créer ». Vous aurez donc votre ID Client et votre code secret.

Installation des packages

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

		    	npm install –save passport-google-oauth   
		    

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 ID Client et votre code secret :

				var id = {
				    google: {
				        clientID: 1234567890,
				        clientSecret: 'ceciEstUnSecret',
				        callbackURL: 'http://localhost:3000/authentification/google/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 GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
				var config = require('./oauth.js');

				passport.use('google', new GoogleStrategy({
				      clientID        : config.google.clientID,
				      clientSecret    : config.google.clientSecret,
				      callbackURL     : config.google.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 Google+, le clientSecret et la callbackURL saisis nous pouvons écrire le développement relatif à la connexion de l’utilisateur depuis Google+ 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('/google',
				    passport.authenticate('google', { scope : ['profile','email'] }
				    ));

				router.get('/google/callback',
				    passport.authenticate('google', {
				        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('/google',
				    passport.authenticate('google', { scope : ['profile','email'] }
				));
			

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

				router.get('/google/callback',
				    passport.authenticate('google', {
				        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.waves-effect.red.pull-right(href="/auth/google", role="button")
				                  i.fa.fa-google-plus
			

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.waves-effect.red.pull-right(href="/auth/google", role="button")
				                  i.fa.fa-google-plus
			

Conclusion

Couplé à PassportJS, la connexion ou l’inscription à votre application depuis Google+ 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 Google+ 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