Dans le monde d'aujourd'hui, la sécurité en ligne est plus importante que jamais. Avec autant de comptes en ligne à suivre, il est essentiel d'avoir un mot de passe fort et unique pour chacun.

Si vous construisez un site, il est encore plus important de s'assurer que les mots de passe sont aussi sécurisés que possible. Vous pouvez présenter une liste de contrôle aux utilisateurs de votre site et vous assurer que leur mot de passe répond à vos exigences avant de l'accepter.

Découvrez comment implémenter une liste de contrôle de mot de passe à l'aide de Next.js.

Pourquoi utiliser une liste de contrôle de mot de passe ?

Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir utiliser une liste de contrôle de mot de passe.

Tout d'abord, cela peut vous aider à vous assurer que les mots de passe de vos utilisateurs sont forts et uniques. En ayant une liste de contrôle des exigences, vous pouvez être sûr que chaque mot de passe répond à une certaine norme.

Vos utilisateurs ne vous en remercieront peut-être pas, mais vous leur rendrez service. En encourageant les mots de passe forts, vous réduisez les risques qu'un pirate accède à l'un des comptes de vos utilisateurs.

instagram viewer

Deuxièmement, une liste de vérification des mots de passe peut aider à transmettre un sentiment de sécurité. En publiant des exigences, vous indiquez à vos utilisateurs que vous prenez la sécurité des mots de passe au sérieux.

Vous devez cependant savoir qu'une liste de contrôle de mot de passe n'est pas une solution miracle aux problèmes de mot de passe. En fait, si vous rendez vos mots de passe trop restrictifs, vous pouvez permettre aux pirates de restreindre plus facilement leurs options et de forcer brutalement un mot de passe. En fin de compte, des mots de passe sécurisés et uniques que les utilisateurs stocker dans un gestionnaire de mots de passe sont meilleurs.

Comment créer une liste de contrôle de mot de passe

Il existe deux façons de créer une liste de contrôle de mot de passe dans Next.js. Vous pouvez soit utiliser les fonctionnalités intégrées, soit utiliser un module externe.

Ce dont tu auras besoin

Pour créer une liste de contrôle de mot de passe dans Next.js, vous aurez besoin des éléments suivants :

  • Node.js installé
  • Un éditeur de texte
  • Un projet Next.js

Méthode 1: Utilisation des fonctionnalités intégrées

Next.js est livré avec des fonctionnalités intégrées telles que les crochets et le contexte. Il y a différents types de crochets que vous pouvez utiliser pour créer une liste de contrôle de mot de passe.

Tout d'abord, créez un nouveau fichier dans votre application Next.js et nommez-le passwordChecklist.js. Dans ce fichier, vous pouvez saisir le mot de passe des utilisateurs et vérifier si le mot de passe répond aux exigences.

importer Réagissez, { useState } depuis 'réagir'
fonctionListe de contrôle du mot de passe() {
 const [mot de passe, setPassword] = useState('')
constante [erreur, setError] = useState(FAUX)


fonctionhandleChange(e) {
setPassword(e.cible.valeur)
 }


fonctiongérerSoumettre(e) {
e.preventDefault()


// Exigences de mot de passe
constante exigences = [
// Doit contenir au moins 8 caractères
 longueur du mot de passe >= 8,
// Doit contenir au moins 1 lettre majuscule
 /[A-Z]/.test(mot de passe),
// Doit contenir au moins 1 lettre minuscule
 /[a-z]/.test(mot de passe),
// Doit contenir au moins 1 chiffre
 /\d/.test(mot de passe)
 ]


// Si toutes les conditions sont remplies, le mot de passe est valide
constante isValid = requirements.every(booléen)
 si (est valide) {
 alerte('Le mot de passe est valide !')
 } autre {
 setErreur(vrai)
 }
 }


retour (
<formulaire onSubmit={handleSubmit}>
<étiqueter>
 Mot de passe:
<saisir
 taper="mot de passe"
 valeur={mot de passe}
 onChange={handleChange}
 />
</label>
<type d'entrée="soumettre" valeur="Soumettre" />
 {erreur &&<p>Le mot de passe n'est pas valide !</p>}
</form>
 )
}
exporterdéfaut Liste de contrôle du mot de passe

Dans le code ci-dessus, vous devez d'abord saisir le mot de passe des utilisateurs. Vous pouvez le faire en utilisant le useState accrocher. Ce crochet vous permet de créer une variable d'état et une fonction pour mettre à jour cette variable. Dans ce cas, la variable d'état est mot de passe et la fonction pour le mettre à jour est setPassword.

Ensuite, vous devez créer une fonction pour gérer la soumission du formulaire. Cette fonction empêchera l'action par défaut du formulaire (qui consiste à soumettre le formulaire) et vérifiera si le mot de passe répond aux exigences.

Les exigences du mot de passe sont qu'il doit :

  • comporter au moins huit caractères
  • contient au moins une lettre majuscule
  • contenir au moins une lettre minuscule
  • contenir au moins un chiffre

Vous pouvez utiliser le chaque méthode pour vérifier si un mot de passe répond à toutes les exigences. Si c'est le cas, le mot de passe est valide. Sinon, le code affichera un message d'erreur.

Méthode 3: Utilisation du module react-password-checklist

Une autre façon de créer une liste de contrôle de mot de passe dans Next.js consiste à utiliser le réagissez-liste de contrôle de mot de passe module. Ce module est facile à utiliser et il est livré avec de nombreuses fonctionnalités.

Commencez par installer le module à l'aide de la commande suivante :

npm installer réagir-mot de passe-liste de contrôle --sauvegarder

Ensuite, importez le module dans votre passwordChecklist.js déposer:

importer Réagissez, {useState} depuis "réagir"
importer Liste de contrôle du mot de passe depuis "réagir-liste de contrôle de mot de passe"
constante Application = () => {
 const [mot de passe, setPassword] = useState("")


retour (
<former>
<étiqueter>Mot de passe:</label>
<type d'entrée="mot de passe" onChange={e => setPassword (e.target.value)}/>


<Liste de contrôle du mot de passe
 règles={["Longueur minimale","specialChar","nombre","capital"]}
 minLength={5}
 valeur={mot de passe}
 />
</form>
 )
}
exporterdéfaut Application

Ce code transmet les props minLength, specialChar, number et capital au Liste de contrôle du mot de passe composant. Le composant utilisera ces accessoires pour vérifier si le mot de passe répond aux exigences.

Vous pouvez également ajouter des messages traduits au composant en transmettant le messages soutenir. Ces chaînes remplacent les erreurs par défaut afin que vous puissiez les utiliser pour d'autres langues ou variantes.

importer Réagissez, {useState} depuis "réagir"
importer Liste de contrôle du mot de passe depuis "réagir-liste de contrôle de mot de passe"
constante Application = () => {
 const [mot de passe, setPassword] = useState("")


retour (
<former>
<étiqueter>Mot de passe:</label>
<type d'entrée="mot de passe" onChange={e => setPassword (e.target.value)}/>


<Liste de contrôle du mot de passe
 règles={["Longueur minimale", "specialChar", "nombre", "capital"]}
 minLength={5}
 valeur={mot de passe}
 message={{
 Longueur minimale: "La contraireñun tien más de 8 caractères.",
 specialChar: "La contraireña tiene caracteres surtout.",
 nombre: "La contraireña tiene un núméro.",
 capital: "La contraireña tiene una letra peutúscule.",
 correspondre: "Le contrasteñcomme coïncidence.",
 }}
 />
</form>
 )
}
exporterdéfaut Application

Dans le code ci-dessus, le messages prop stocke des messages d'erreur alternatifs. Le composant affichera ces messages lorsque le mot de passe ne répond pas aux exigences.

Cette méthode est plus pratique car vous n'avez pas à écrire le code pour vérifier si le mot de passe répond aux exigences. L'utilisation de ce module présente également de nombreux autres avantages, tels que :

  • Affichage de la force du mot de passe: réagissez-liste de contrôle de mot de passe peut afficher la force du mot de passe afin que les utilisateurs puissent voir la force de leur mot de passe.
  • Affichage du message d'erreur: réagissez-liste de contrôle de mot de passe peut également afficher le message d'erreur si le mot de passe n'est pas valide.
  • Style: vous n'avez pas besoin d'ajouter de style supplémentaire à la liste de contrôle. Le module fournit un style par défaut que vous pouvez utiliser dans votre application. Si vous souhaitez ajouter un style supplémentaire, vous pouvez utiliser un CSS normal ou un autre cadres de style comme tailwind CSS.

Améliorez la sécurité des utilisateurs avec une liste de contrôle de mot de passe

Un mot de passe fort est la clé de la sécurité en ligne. Il est important d'avoir un mot de passe fort et unique pour chaque compte en ligne. En utilisant une liste de contrôle de mot de passe, vous pouvez être sûr que chaque mot de passe répond à une certaine norme.

Les utilisateurs de votre application apprécieront également de pouvoir voir la force du mot de passe. De cette façon, ils peuvent être sûrs que leurs mots de passe sont suffisamment forts. Cela améliorera l'expérience utilisateur de votre application et améliorera également la sécurité des utilisateurs de votre application. De même, vous pouvez également valider les formulaires dans votre application Next.js.