Authentification Google NodeJS avec Passport et Express

Si vous avez déjà utilisé votre compte Google pour vous connecter à une application, vous avez peut-être remarqué à quel point c'est facile. Vous n'avez qu'à cliquer sur un bouton et vous n'avez pas besoin de saisir votre e-mail ou votre mot de passe. Bien que cela semble simple, ce qui se passe sous le capot est assez complexe. Cependant, des outils comme Passport facilitent la tâche.

Dans ce didacticiel, vous apprendrez à implémenter l'authentification Google dans Node à l'aide de Passport et Express.

Qu'est-ce qu'un passeport ?

Passeport (ou Passport.js) est un middleware d'authentification Node qui fournit plus de 500 stratégies pour authentifier les utilisateurs, y compris l'authentification sociale à l'aide de plates-formes telles que Google et Twitter.

Vous utiliserez passeport-google-oauth2 stratégie pour authentifier les utilisateurs sur Google.

Créer un système d'authentification Google dans Node

Voici un aperçu du système d'authentification que vous allez créer :

• Lorsqu'un utilisateur clique sur le bouton de connexion, il est dirigé vers la page de connexion Google où il se connecte.
  instagram viewer
• Google redirigera l'utilisateur vers votre application avec un jeton d'accès. Le jeton d'accès vous donne l'autorisation d'accéder aux informations de profil de cet utilisateur.
• Envoyez le jeton d'accès à Google pour obtenir les données de profil.
• Créez un nouvel utilisateur ou récupérez l'utilisateur existant de la base de données.
• Utilisez les JWT pour protéger les routes sensibles.

Comment configurer l'authentification Google dans NodeJS à l'aide de Passport

Suivez les étapes ci-dessous pour autoriser les utilisateurs avec Google OAuth,

Étape 1: Créer un ID client Google et un code secret client

Avant d'utiliser Google pour connecter les utilisateurs à votre application, vous devez enregistrer votre application auprès de Google pour obtenir l'ID client et le secret client à utiliser lors de la configuration de Passport.

Connectez-vous au Console Google Cloud et suivez les étapes suivantes pour enregistrer votre application.

Créez un nouveau projet. Dans la barre de menus, sélectionnez Identifiants et dans la liste déroulante, sélectionnez ID client OAuth.

Pour le type d'application, sélectionnez application Web. Ajoutez le nom préféré de votre application dans le champ Nom.

Sous les URI de redirection autorisés, utilisez http://localhost: 3000 et http://localhost: 3000/auth/google/rappel pour les URI de redirection autorisés.

Cliquez sur créer pour créer le client OAuth. Étant donné que les informations d'identification de l'application sont sensibles, vous devrez créer un .env fichier et ajoutez-y l'ID client et le secret client.

ID_CLIENT = 
CLIENT_SECRET = 

Étape 2: Configurer le serveur de nœud

Créer un dossier, utilisateur-google-auth, et accédez-y.

mkdir utilisateur-google-auth
cd utilisateur-google-auth

Initialiser npm créer package.json.

npm init -y

Puisque vous utiliserez express pour créer le serveur, installez-le en exécutant la commande suivante.

npm installer express

Ouvrez le dossier avec votre éditeur de texte préféré et créez un nouveau fichier app.js. Il servira de point d'entrée de votre candidature.

Créez le serveur NodeJS dans app.js.

const express = require("express");
const app = express();
const PORT = 3000 ;
app.listen (PORT, () => {
 console.log(`Écoute sur le port ${PORT}`);
});

Étape 2: configurer MongoDB

Vous stockerez les données utilisateur reçues de Google dans un Base de données MongoDB. Avant d'enregistrer les informations utilisateur, vous devez définir la structure dans laquelle les données seront stockées. La mangouste est parfaite pour cela. Il fournit un moyen assez simple de créer des modèles de données.

Installer mangouste.

npm installer la mangouste

Créer un nouveau fichier userModel.jset créez le schéma utilisateur.

const mangouste = require("mangouste");
const { Schéma } = mongoose.model ;
const UserSchema = nouveau schéma({
 Google: {
 identifiant: {
 type: Chaîne,
 },
 Nom: {
 type: Chaîne,
 },
 e-mail: {
 type: Chaîne,
 },
 },
});
const Utilisateur = mongoose.model("Utilisateur", UserSchema);
module.exports=Utilisateur ;

Dans userModel.js, vous avez importé mongoose et créé un nouveau schéma.

Notez que vous regroupez les informations de Google. Ceci est particulièrement utile lorsque vous utilisez également d'autres méthodes d'authentification et qu'un utilisateur en utilise plusieurs. Cela facilite la prévention de la double inscription.

Ensuite, créez db.js.

const mangouste = require("mangouste");
mangouste. Promesse = mondiale. Promettre;
const dbUrl = "mongodb://localhost/user" ;
const connect = asynchrone () => {
 mongoose.connect (dbUrl, { useNewUrlParser: vrai, useUnifiedTopology: vrai });
 const db = mangouste.connexion;
 db.on("erreur", () => {
 console.log("impossible de se connecter");
 });
 db.une fois("ouvrir", () => {
 console.log("> Connexion réussie à la base de données");
 });
};
module.exports = { connecter } ;

Connectez-vous à la base de données dans app.js.

const express = require("express");
const app = express();
const PORT = 3000 ;
const db = require("./db");
db.connect();
app.listen (PORT, () => {
 console.log(`Écoute sur le port ${PORT}`);
});

Étape 3: Configurer Passeport

Installer passeport et passeport-google-oauth2.

npm i passeport passeport-google-oauth2

Créer un nouveau fichier, passeportConfig.js, et importez la stratégie Google à partir de passeport-google-oauth2 et userModel.js.

const GoogleStrategy = require("passport-google-oauth2").Strategy;
const Utilisateur = require("./userModel");

Utilisez les informations d'identification de votre application pour configurer passeport avec Google OAuth.

module.exports = (passeport) => {
 passeport.use (nouveau GoogleStrategy({
 ID client: process.env. IDENTITÉ DU CLIENT,
 clientSecret: process.env. CLIENT_SECRET,
 URL de rappel: " http://localhost: 3000/auth/google/rappel",
 passReqToCallback: vrai
 },
 async (demande, accessToken, refreshToken, profil, terminé) => {
 essayer {
 laissez existantUser = attendre User.findOne({ 'google.id': profile.id });
// si l'utilisateur existe retourne l'utilisateur
 si (utilisateur existant) {
 retour effectué (null, existingUser);
 }
// si l'utilisateur n'existe pas créer un nouvel utilisateur
 console.log('Création d'un nouvel utilisateur...');
 const newUser = nouvel utilisateur({
 méthode: 'google',
 Google: {
 identifiant: profil.id,
 nom: profile.displayName,
 e-mail: profil.emails[0].value
 }
 });
 attendre newUser.save();
 retour effectué (null, newUser);
 } capture (erreur) {
 retour effectué (erreur, faux)
 }
 }
 ));
}

Une fois que vous avez reçu les informations de profil de Google, vérifiez si l'utilisateur existe dans la base de données. Si c'est le cas, renvoyez simplement l'utilisateur trouvé. Si l'utilisateur est nouveau, créez un nouveau document dans la base de données et renvoyez l'utilisateur créé.

Notez que vous travaillez avec env variables donc utilisez les npm emballer dotenv pour y accéder dans votre application.

Installer dotenv.

npm installer dotenv

Utiliser dotenv dans app.js.

require("dotenv").config()

Dans app.js,passe passeport pour passeportConfig.js

const passeport = require("passeport");
require("./passportConfig"))(passeport);

Étape 4: Créer des routes d'authentification

Vous avez besoin de trois itinéraires pour :

• Redirigez l'utilisateur vers la page de connexion Google pour obtenir le jeton d'accès.
• Récupérez les données de l'utilisateur à l'aide du jeton d'accès reçu.
• Redirigez l'utilisateur vers la page de profil après authentification réussie.

// Rediriger l'utilisateur vers la page de connexion Google
app.get(
 "/auth/google",
 passeport.authenticate("google", { portée: ["email", "profil"] })
);
// Récupérer les données de l'utilisateur à l'aide du jeton d'accès reçu
app.get(
 "/auth/google/rappel",
 passeport.authenticate("google", { session: false }),
 (req, res) => {
 res.redirect("/profil/");
 }
);
// route du profil après une connexion réussie
app.get("/profile", (req, res) => {
 console.log (req);
 res.send("Bienvenue");
});

Étape 5: Protégez les routes privées

Maintenant que vous êtes connecté en tant qu'utilisateur, comment pouvez-vous restreindre certaines parties de votre application aux utilisateurs authentifiés uniquement? Une façon de procéder consiste à utiliser des jetons Web JSON (JWT). Les JWT offrent un moyen sécurisé de transmettre les informations. Pour autoriser les utilisateurs en utilisant les JWT, votre application :

• Générez un jeton à l'aide des données utilisateur.
• Transmettez le jeton à l'utilisateur (l'utilisateur renverra le jeton avec les demandes nécessitant une autorisation).
• Vérifiez le jeton renvoyé.
• Accordez l'accès à l'utilisateur si le jeton présenté est valide.

Installer jsonwebtoken pour travailler avec les JWT.

npm installer jsonwebtoken

Dans app.js, importer jsonwebtoken.

const jwt = require("jsonwebtoken")

Modifiez l'URL de rappel Google pour signer l'utilisateur et générer un jeton.

app.get(
 "/auth/google/rappel",
 passeport.authenticate("google", { session: false }),
 (req, res) => {
 jwt.signe(
 { utilisateur: utilisateur requis },
 "clef secrète",
 { expireDans: "1h" },
 (err, jeton) => {
 si (erreur) {
 return res.json({
 jeton: nul,
 });
 }
 res.json({
 jeton,
 });
 }
 );
 }
);

Si vous vous connectez, vous recevrez le jeton.

Ensuite, utilisez passeport-jwt, une stratégie JWT fournie par Passport pour vérifier le jeton et autoriser les utilisateurs.

npm installer passeport-jwt

Dans passeportConfig.js, ajoutez la stratégie JWT.

const JwtStrategy = require("passport-jwt").Strategy;
const { ExtractJwt } = require("passport-jwt");
module.exports = (passeport) => {
 passeport.use (nouveau GoogleStrategy(
// Stratégie Google
 );
 passeport.use(
 nouveau JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader("autorisation"),
 secretOrKey: "secretKey",
 },
 async (jwtPayload, fait) => {
 essayer {
// Extraction de l'utilisateur
 utilisateur constant = jwtPayload.user ;
 done (null, utilisateur); 
 } capture (erreur) {
 fait (erreur, faux);
 }
 }
 )
 );
}

Ici, vous extrayez le jeton de l'en-tête d'autorisation où il est stocké, ce qui est beaucoup plus sûr que de le stocker dans le corps de la requête.

Une fois le jeton vérifié, l'objet utilisateur est renvoyé au corps de la requête. Pour autoriser les utilisateurs, ajoutez le middleware d'authentification de passeport JWT aux routes protégées.

app.get(
 "/profil",
 passeport.authenticate("jwt", { session: false }),
 (req, res, suivant) => {
 res.send("Bienvenue");
 }
);

Désormais, seules les requêtes qui fournissent un jeton valide auront accès.

Prochaines étapes

Ce didacticiel vous a montré comment vous pouvez utiliser Passport pour connecter les utilisateurs à votre application à l'aide de leur compte Google. L'utilisation de Passport est beaucoup plus simple que les autres formulaires, et vous gagnerez beaucoup de temps en l'utilisant.

Passport fournit également d'autres stratégies d'authentification à utiliser avec d'autres fournisseurs d'identité, comme Twitter et Facebook. Donc, cela vaut la peine de les vérifier également.

Authentification des utilisateurs dans NodeJS à l'aide de Passport et de MongoDB

Lire la suite

A propos de l'auteur