introduction

Tout comme l’authentification est importante dans les API, c’est également une fonctionnalité importante dans certaines applications Web: celles qui contiennent des pages et des secrets qui ne devraient être accessibles qu’aux utilisateurs enregistrés et authentifiés..

Dans ce didacticiel, vous allez créer une application Web simple tout en apprenant à créer un enregistrement d’utilisateur..

Configuration de l'application

Créez un nouveau répertoire à partir duquel vous allez travailler. Par souci de ce tutoriel, j’ai appelé le mien site-auth. Initialisez npm dans le nouveau répertoire que vous venez de créer. Voici comment initialiser npm.

npm init -y 

le -y flag indique à npm d'utiliser les options par défaut.

Editez les dépendances de votre package.json déposer pour ressembler à ce que j'ai dans le mien.

# package.json "name": "site-auth", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test" : "echo \" Erreur: aucun test spécifié \ "&& exit 1", "keywords": [], "author": "izuchukwu1", "license": "ISC", "dépendances": "bcryptjs": "^ 2.4.3", "analyseur de corps": "^ 1.17.1", "connect-flash": "^ 0.1.1", "analyseur de cookie": "^ 1.4.3", "express": "^ 4.15.2", "express-guidon": "^ 3.0.0", "express-messages": "^ 1.0.1", "express-session": "^ 1.15.2", "joi": "^ 13.0.1", "mangouste": "^ 4.11.12", "morgan": "^ 1.8.1", "passeport": "^ 0.4.0", "passport-local": "^ 1.0. 0 "

Ceci fait, exécutez la commande pour installer les dépendances..

npm installer

Créez un fichier dans votre répertoire de travail appelé app.js.

Commencez par demander les dépendances que vous avez installées et les fichiers nécessaires.

# app.js const express = require ('express'); const morgan = require ('morgan') const path = require ('path'); const cookieParser = require ('cookie-parser'); const bodyParser = require ('analyseur de corps'); const expressHandlebars = require ('express-guidon'); const flash = require ('connect-flash'); const session = require ('express-session'); const mongoose = require ('mongoose') const passport = require ('passport') require ('./ config / passport')

Ces dépendances ont été installées lors de l'exécution de npm install. Pour les utiliser dans votre application, vous devez les demander et les enregistrer dans leurs constantes respectives..

Pour ce tutoriel, vous utiliserez MongoDB comme base de données. Vous aurez besoin de stocker les informations utilisateur dans la base de données. Pour utiliser MongoDB, vous utiliserez Mongoose, un outil de modélisation MongoDB pour Node.js. Installer Mongoose est facile, comme ça.

# app.js mongoose.Promise = global.Promise mongoose.connect ('mongodb: // localhost: 27017 / site-auth')

À ce stade, configurons notre middleware.

// 1 const app = express () app.use (morgan ('dev')) // 2 app.set ('views', path.join (__ nom de répertoire, 'views')) app.engine ('guidon', expressHandlebars (defaultLayout: 'layout')) app.set ('view engine', 'handlebars') // 3 app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extended: false )) app.use (cookieParser ()) app.use (express.static (path.join (__ dirname, 'public'))) app.use (session (cookie: maxAge: 60000, secret: 'codeworkrsecret' , saveUninitialized: false, resave: false)); app.use (passport.initialize ()) app.use (passport.session ()) // 4 app.use (flash ()) app.use ((req, res, next) => res.locals.success_mesages = req.flash ('success') res.locals.error_messages = req.flash ('error') next ()) // 5 app.use ('/', require ('./ routes / index')) app.use ('/ users', require ('./ routes / users')) // 6 // attrape 404 et transfère au gestionnaire d'erreurs app.use ((req, res, next) => res.render ( 'pas trouvé') ); // 7 app.listen (5000, () => console.log ('Le serveur a commencé à écouter sur le port 5000!'))

1. Express est initialisé et affecté à app.
2. Un middleware pour gérer les vues est configuré. Pour les vues, vous utiliserez guidon.
3. Vous configurez le middleware pour bodyparser, biscuit, session, et passeport. Passport sera utilisé lorsque les utilisateurs veulent se connecter.
4. À certains moments, vous afficherez des messages flash. Ainsi, vous devez configurer un middleware pour cela et créer également le type de message flash souhaité..
5. Routes middleware-cela gérera toute demande faite à un chemin d'URL. Les chemins d’URL spécifiés ici sont pour l’index et le chemin des utilisateurs.
6. Middleware pour gérer les erreurs 404. Ce middleware entre en jeu lorsqu'une requête ne correspond à aucun des middleware créés au dessus.
7. Le serveur est configuré pour écouter sur le port 5000.

Configuration des vues

Créez un nouveau répertoire appelé vues. Dans le répertoire views, créez deux autres répertoires appelés mises en page et partiels. Vous souhaitez obtenir une telle arborescence dans vos vues, créez donc les fichiers nécessaires dans leurs répertoires respectifs..

Dashboard.handlebars ├── index.handlebars ├── agencements layout.handlebars login.handlebars notFound.handlebars ├── partiels navbar.handlebars enregistrer .guidon

Cela fait, il est temps de laisser tomber le code.

# dashboard.handlebars  
 
Tableau de bord utilisateur
 

Ceci est un tableau de bord qui ne devrait être visible que par les utilisateurs enregistrés. Pour ce tutoriel, ce sera votre page secrète.

Maintenant, la page d'index de l'application devrait ressembler à ceci.

# index.handlebars  
 
Authentification du site!
 
Bienvenue à bord.
 

L'application a besoin d'une mise en page qui sera utilisée, et voici la mise en page que vous allez utiliser.

# layout / layout.handlebars          #if success_messages 
success_messages
 / if #if error_messages 
messages d'erreur
 /si 
 > barre de navigation body 
   

Vous aurez besoin d'une page de connexion pour les utilisateurs enregistrés.

# views / login.handlebars 
 
Veuillez vous connecter
 Adresse électronique  Mot de passe  
 se connecter 

le pas trouvé.guidon le fichier sera utilisé comme page d'erreur.

# views / notFound.handlebars  
 
Erreur
 
 

Votre page d'inscription est supposée ressembler à ceci.

 
Inscrivez vous s'il vous plait
 Adresse électronique  Nom d'utilisateur  Mot de passe  Confirmez le mot de passe  
 S'inscrire 
 

Enfin pour vos vues, voici votre barre de navigation.

# partials / navbar.handlebars 
 
Authentification du site
  
 

Cela fait, vous êtes bon pour aller dans certaines parties profondes.

La validation des données

Vous aurez besoin d'un modèle utilisateur. A partir du code de vues ci-dessus, vous pouvez en déduire que les propriétés requises pour le modèle User sont email, nom d'utilisateur et mot de passe. Créez un répertoire appelé des modèles, et un fichier appelé user.js.

# models / user.js // 1 mongoose const = require ('mongoose') const Schema = mongoose.Schema const bcrypt = require ('bcryptjs') // 2 const userSchema = nouveau Schema (email: String, nom d'utilisateur: String , mot de passe: Chaîne, // 3 horodatages: createdAt: 'createdAt', updatedAt: 'updatedAt') // 4 const User = mongoose.model ('user', userSchema) module.exports = User

1. Importe des dépendances et les enregistre en constantes.
2. Un nouveau schéma est créé. Pour chaque utilisateur, vous souhaitez enregistrer le email, Nom d'utilisateur, et mot de passe à la base de données. Le schéma montre comment le modèle doit être construit pour chaque document. Ici, vous voulez que l'email, le nom d'utilisateur et le mot de passe soient du type String.
3. Pour chaque utilisateur enregistré dans la base de données, vous souhaitez également créer horodatage. Vous utilisez Mongoose pour obtenir le créé à et updatedAt, et cela est ensuite enregistré dans la base de données.
4. Le modèle est défini et affecté à une constante appelée Utilisateur, qui est ensuite exporté en tant que module afin qu'il puisse être utilisé dans d'autres parties de l'application.

Salage et hachage du mot de passe

Vous ne souhaitez pas stocker les mots de passe des utilisateurs sous forme de texte brut. Voici ce que vous voulez faire lorsqu'un utilisateur entre un mot de passe en texte brut lors de son inscription. Le mot de passe en texte brut doit être haché à l'aide d'un sel qui sera généré par votre application (à l'aide de bcryptjs). Ce mot de passe haché est ensuite stocké dans la base de données. 

Ça sonne bien, non? Mettons cela en œuvre dans le user.js fichier.

# models / user.js module.exports.hashPassword = async (mot de passe) => try const salt = wait bcrypt.genSalt (10) retourne wait bcrypt.hash (mot de passe, salt) catch (error) lance new Error ('Echec du hachage', erreur)

Vous venez de créer une méthode qui sera appelée dans les événements d’enregistrement de l’utilisateur. La méthode recevra le mot de passe en texte brut saisi par l'utilisateur. Comme je l'ai mentionné précédemment, le mot de passe en texte brut sera haché à l'aide d'un sel généré. Le mot de passe haché sera retourné comme mot de passe pour l'utilisateur.

Index et itinéraires utilisateurs 

Créez un nouveau répertoire appelé itinéraires. Dans ce nouveau répertoire, créez deux nouveaux fichiers: index.js et utilisateurs.js.

le index.js le fichier sera très simple. Il mappera à l'index de votre application. N'oubliez pas que vous avez configuré un middleware pour vos itinéraires dans votre app.js déposer quand vous avez fait cela.

app.use ('/', require ('./ routes / index')) app.use ('/ utilisateurs', require ('./ routes / utilisateurs'))

Donc, votre route d'index, qui rend simplement la page d'index, devrait ressembler à ceci.

# routes / index.js const express = require ('express') const routeur = express.Router () router.get ('/', (req, res) => res.render ('index')) .exports = routeur

Passons maintenant à la route des utilisateurs. Pour l'instant, ce fichier de route fera quatre choses.

1. Exiger des dépendances. Vous aurez besoin des dépendances que vous avez installées avec NPM..
2. Valider les entrées utilisateur. Vous voulez vous assurer que l'utilisateur ne soumet pas un formulaire vide. Toutes les entrées sont obligatoires et toutes doivent être du type String. L'e-mail a une validation spéciale appelée .email() ce qui garantit que ce qui est entré correspond au format de courrier électronique, tandis que le mot de passe est validé à l'aide d'une expression régulière. Pour le mot de passe de confirmation, vous voulez qu'il soit identique au mot de passe entré. Ces validations sont effectuées à l'aide de Joi.
3. Configurez votre routeur. le OBTENIR request rend la page d’enregistrement, tandis que la POSTER demande démarre lorsque l'utilisateur appuie sur le bouton pour soumettre le formulaire.
4. Le routeur est exporté en tant que module.

Voici à quoi ressemble le code.

# routes / users.js const express = require ('express'); const router = express.Router () const Joi = require ('joi') const passport = require ('passport') const User = require ('… / models / user') // schéma de validation const userSchema = Joi.object ( ) .keys (email: Joi.string (). email (). required (), nom d'utilisateur: Joi.string (). required (), mot de passe: Joi.string (). regex (/ ^ [a-zA- Z0-9] 6,30 $ /). Required (), confirmationPassword: Joi.any (). Valid (Joi.ref ('password')). Required ()) router.route ('/ register' ) .get ((req, res) => res.render ('register')) .post (async (req, res, next) => try const result = Joi.validate (req.body, userSchema ) if (result.error) req.flash ('error', 'Les données saisies ne sont pas valides. Veuillez réessayer.') res.redirect ('/ users / register') return const user = wait User.findOne ( 'email': result.value.email) if (utilisateur) req.flash ('error', 'l'email est déjà utilisé.') res.redirect ('/ users / register') return const hash = wait User.hashPassword (result.value.password) delete result.value.confirmationPassword result.value.password = hash const newUser = attend le nouvel utilisateur (result.value) attend newUser.save () req.flash ('success', 'Enregistrement réussi, allez-y et connectez-vous.') res.redirect ('/ users / login') catch (error ) next (error)) module.exports = routeur 

Regardons plus profondément dans ce qui se passe dans ce POSTER demande.

Les valeurs saisies dans le formulaire d’inscription sont accessibles via req.body, et les valeurs ressemblent à ceci.

valeur: email: '[email protected]', nom d'utilisateur: 'izu', mot de passe: 'chinedu', confirmationPassword: 'chinedu',

Ceci est validé en utilisant le userSchema vous avez créé ci-dessus et les valeurs entrées par l'utilisateur sont affectées à une constante appelée résultat.

Si une erreur survient à cause de la validation, un message d'erreur est affiché à l'utilisateur et une redirection vers la page d'enregistrement a lieu..

Sinon, nous essayons de trouver si un utilisateur avec la même adresse email existe, car vous ne voulez pas que deux utilisateurs ou plus aient la même adresse email. Si un utilisateur est trouvé, il est informé que l'adresse e-mail est déjà utilisée.

Dans un scénario où aucun utilisateur enregistré ne possède cette adresse électronique, l'étape suivante consiste à hacher le mot de passe. C’est là que vous appelez le hashPassword méthode que vous avez créée dans votre fichier user.js. Le nouveau mot de passe haché est attribué à une constante appelée hash.

Il n'y a pas besoin de stocker le confirmationPassword dans la base de données. Ainsi, ceci est supprimé. Le mot de passe disponible à partir du résultat est toujours le mot de passe en clair. Étant donné que vous ne souhaitez pas stocker le mot de passe en clair dans votre base de données, il est important de réaffecter la valeur du mot de passe au hachage créé. Ceci est fait avec une ligne de code.

result.value.password = hash

La nouvelle instance d'utilisateur est enregistrée dans la base de données. Un message flash indiquant que l'enregistrement a réussi est affiché et l'utilisateur est redirigé vers la page de connexion..

Démarrez votre serveur depuis votre terminal en lançant:

noeud app.js

Pointez votre navigateur sur http: // localhost: 5000 et vous devriez voir votre nouvelle application..

Conclusion

Vous savez maintenant comment implémenter la fonctionnalité d'enregistrement dans une application Web Node. Vous avez appris l'importance de valider les entrées de l'utilisateur et comment le faire avec Joi. Vous avez également utilisé bcryptjs saler et hacher votre mot de passe.

Ensuite, vous verrez comment implémenter une fonctionnalité de connexion pour les utilisateurs enregistrés. J'espère que vous vous êtes bien amusé!