Créez un système de connexion dans Node.js. Comment utiliser Passport.js pour l’utilisateur… | par Hussain Arif | Meilleure programmation | Juil.2020

Online Coding Courses for Kids

Le schéma et le modèle utilisateur

Comme d’habitude, vous devez définir un schéma avant de créer des documents et de les enregistrer dans la base de données. Commencez par créer le models répertoire et là créer un fichier appelé user.js tel que c’est models/user.js. Commençons par créer un schéma dans user.js. Ensuite, nous allons créer un modèle à partir de ce schéma.

Dans models/user.js:

Cela signifie que votre modèle aura un nom, un email, son mot de passe associé et la date de création.

Sur line 20 , nous utilisons ce schéma dans votre User modèle. Tous vos utilisateurs disposeront des données dans ce format.

Traitement de la requête POST vers le répertoire des registres: contrôles de validation

Dans cette étape, vous allez créer un document dans la base de données MongoDB avec les données fournies par le client.

Au début de la routes/users.js fichier, importez la bibliothèque Mongoose et importez le User modèle que vous venez de créer.

const User = require("../models/user.js")

Maintenant, dans le routes/users.js fichier, recherchez le morceau de code suivant:

Traitement de la demande POST du registre

Dans cette poignée, écrivez le code suivant:

  • Line 1: Extraire les valeurs des éléments du formulaire. Vous retirez l’email, le nom de l’utilisateur, son mot de passe. Le dernier champ (password2 ) est un contrôle de validation pour s’assurer que l’utilisateur a confirmé que le mot de passe qu’il saisit est correct.
  • Lines 4-6: Si l’un des champs n’a pas été rempli, ajoutez un message approprié au error tableau.
  • Lines 8–10: Si les mots de passe ne correspondent pas, ajoutez le message approprié à la error tableau.
  • Lines 13–15: Vérifiez si le mot de passe comporte au moins six caractères.
  • Lines 16–23: Si un contenu dans error tableau est présent, restituer le register.ejs page, puis envoyez les données appropriées avec le errors tableau. Tout le contenu de ce tableau sera affiché sur la page.
  • Lines 24–36: Vous avez réussi la validation! Maintenant, vous trouverez d’abord s’il y a déjà un utilisateur présent dans la base de données via l’email. Si tel est le cas, vous referez le rendu register.ejs page et affichez l’erreur correspondante. Sinon, créez un nouvel utilisateur avec l’adresse e-mail, le nom et le mot de passe associés fournis. Gardez à l’esprit que vous ne l’avez pas encore enregistré. Vous le sauvegarderez après avoir chiffré le mot de passe.

À titre d’exemple, exécutons le code et saisissons un mot de passe à un seul caractère pour qu’il restitue la page:

Sortie du code après avoir entré délibérément les mauvaises options

Vous devez maintenant afficher les erreurs, c’est-à-dire afficher le contenu du errors tableau.

Afficher les erreurs

Allez maintenant à views/register.ejs et trouvez le morceau de code suivant (ce sera vers le début du fichier):

Code à trouver sur views / register.ejs

Lorsque vous l’avez trouvé, écrivez la ligne suivante juste en dessous h1 marque:

<%- include ('./partials/messages') %>

Cette ligne signifie importer un nouveau fichier qui aidera à afficher les messages.

Accédez à votre views répertoire, créez un nouveau répertoire appelé partials, et à l’intérieur partials, créez un fichier appelé messages.ejs. Là, écrivez le code suivant.

views/partials/messages.ejs

<% if(typeof errors!= 'undefined') { %>
<% errors.forEach(function(error){ %>

<%= error.msg %>


<% }) %>
<% } %>

Ce code indique que s’il y a des erreurs présentes, affichez le contenu du tableau avec son propre paragraphe (p) élément.

Réexécutez le code et écrivez un mot de passe à un seul caractère. Ce sera la sortie:

Notez que vous avez maintenant affiché le message d’erreur

Si vous laissez l’un des champs vides, vous obtiendrez ce message d’erreur:

Deux messages d’erreur affichés dans ce formulaire

Faites en sorte que les deux champs de mot de passe contiennent des valeurs différentes:

Trois messages d’erreur affichés dans ce formulaire

Gestion des requêtes POST vers le registre: enregistrez les utilisateurs dans la base de données

Dans cette étape, vous allez enregistrer les utilisateurs enregistrés dans la base de données MongoDB. Vous allez d’abord crypter leurs mots de passe, puis les enregistrer dans la base de données.

Dans routes/users.js, recherchez le morceau de code suivant:

Code dans routes / users.js

Dans ce else block, écrivez le morceau de code suivant:

Et sur cette note, terminez le else déclaration ici.

  • Lines 2–7 : Générez un sel, hachez le mot de passe de l’utilisateur. Attribuez cette valeur chiffrée au mot de passe de l’utilisateur, puis enregistrez le client dans la base de données.
  • Line 10 : Lorsque le document est enregistré sans erreur, redirigez l’utilisateur vers le login répertoire, où l’utilisateur va maintenant se connecter avec ses informations d’identification.

Ce sera la sortie du code lorsque vous vous enregistrez en tant qu’utilisateur:

Sortie de code

Puisque vous avez déconnecté le contenu du document dans votre console, voici le résultat dans la console:

Contenu du nouveau document utilisateur

Saisissez une adresse e-mail enregistrée. Comme prévu, vous obtenez une erreur vous indiquant que l’e-mail a déjà été stocké:

Sortie de code indiquant que vous avez une erreur

Avec cette étape, vous avez enfin enregistré les utilisateurs dans la base de données. Passons à la création de messages flash avec Express.

À la fin de cette section, voici à quoi ressemble votre code:

Close Menu