Créer un vérificateur de force de mot de passe simple

Fournir une rétroaction instantanée est le temps en ce moment. Pourquoi vous limiter à la vérification des noms d'utilisateur et des adresses e-mail? Pourquoi ne pas étendre cela pour fournir des commentaires visuels rapides sur la force du mot de passe que l'utilisateur a une entrée? Aujourd'hui, nous allons voir comment créer un vérificateur de force de mot de passe simple en utilisant des expressions régulières et un algorithme simple.

Comme la plupart des experts en sécurité vous le diront, l'utilisateur est toujours le lien le plus faible. Même les systèmes les plus sécurisés sont vulnérables lorsqu'un utilisateur choisit un mot de passe extrêmement mal avisé. Dans cet esprit, la tendance récente semble fournir des commentaires rapides à l'utilisateur concernant la force du mot de passe afin que l'utilisateur puisse étendre ou modifier le mot de passe pour le rendre plus sécurisé.

Aujourd'hui, nous allons utiliser la bibliothèque jQuery, un tas d'expressions régulières et un algorithme très simple pour créer un vérificateur de force de mot de passe de base. Intéressé? Commençons tout de suite! Voici une démonstration de ce que nous essayons de construire aujourd'hui:

Objectifs de conception

Nos objectifs de conception pour cette fonctionnalité spécifique sont relativement petits.

• Fournir une rétroaction visuelle à l'utilisateur concernant la force de leur mot de passe.
• La rétroaction doit être instante. Cela signifie ne pas cliquer sur un bouton pour tester la force.
• L'événement de déclenchement peut être l'un des événements du clavier. J'ai choisi KETYUP Événement de la boîte de saisie.
• Laissez le gestionnaire d'événements cocher l'entrée, mais déléguer tout le reste aux méthodes individuelles. Afin de ne pas gaspiller les cycles de processeur sur les entrées non valides.
• Retournez le contrôle du gestionnaire d'événements au cas où autre chose doit être fait.
L'algorithme
dans l'intérêt de garder cet article succinct et accessible, j'ai décidé d'aller avec un algorithme très basique. L'algorithme analyse la chaîne, donnant des bonus pour plus de longueur et en utilisant des nombres, des symboles et des lettres majuscules et des pénalités pour les entrées de lettre ou de numéro uniquement. Nous n'allons pas consulter la vérification de l'entrée par rapport à un dictionnaire car il s'agit de la portée de l'article.

Tout d'abord, nous vérifions la longueur de la chaîne d'entrée. S'il est supérieur à la longueur minimale, donnez-lui un score de base de 50. Sinon, faites-le 0. Ensuite, parcourez chaque caractère de la chaîne et vérifiez s'il s'agit d'un symbole, d'un numéro ou d'une lettre majuscule. Si c'est le cas, notez-le.

Vérifiez ensuite le nombre de caractères supplémentaires que la chaîne a sur le minimum recommandé et accordez un bonus pour chaque personnage. Accordez également un bonus si la chaîne contient une combinaison de lettres, de chiffres et de symboles majuscules, ou les trois. Accorder un bonus pour la présence de chacun d'eux.

Vérifiez si la chaîne contient uniquement des lettres ou des chiffres minuscules et, si c'est le cas, pénaliser.

Additionnez tous les chiffres et décidez de la force du mot de passe en conséquence.

C'est long et court de l'algorithme. Ce ne sera pas extrêmement complexe, mais cela attrapera beaucoup de mauvais mots de passe. Vous comprendrez cela mieux une fois que nous le verrons dans le code.

Le balisage de base

Le balisage HTML de la page de démonstration à ressembler:

<div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

ne pas tenir compte de tout le balisage habituel. Remarquez l'élément d'entrée avec un élément ID de div avec un ID d'élément div avec un ID de div à me message contiendra un message sur les pénalités, nous l'avons donc rendu audacieux et en couleur. augmentez les fonctionnalités requises. Notez que nous utilisons largement JQuery. N'hésitez pas à créer un lien vers le CDN de Google si nécessaire.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

Variables et manipulation des événements

Étant donné que beaucoup de jonglerie de nombre va continuer, nous avons besoin d'un tas de variables pour maintenir les valeurs. Comme il s'agit d'une démo et non d'un code de production, j'ai décidé de déclarer les variables comme globales et d'y accéder via les méthodes d'assistance au lieu de les déclarer en interne, puis de les transmettre aux fonctions.

Nous avons trois constantes. Le premier, appelé élément d'entrée

et le num

, contient le nombre de caractères supplémentaires, de caractères majuscules, de nombres et de symboles. Nous faisons de même pour le deuxième objet, appelé NUM

objet détient le nombre de caractères, tandis que la fonction CheckVal

let baseScore = 0;<br>let score = 0;<br>const minPasswordLength = 8;<br><br>const complexity = document.querySelector("#complexity");<br>const passwordInput = document.querySelector("#password");<br><br>let num = {<br>  excess: 0,<br>  upper: 0,<br>  numbers: 0,<br>  symbols: 0<br>};<br><br>let bonus = {<br>  excess: 3,<br>  upper: 4,<br>  numbers: 5,<br>  symbols: 5,<br>  combo: 0,<br>  onlyLower: 0,<br>  onlyNumber: 0,<br>  uniqueChars: 0,<br>  repetition: 0<br>};<br>

sera appelée chaque fois qu'il y a un élément de mot de passe

. La gestion du gestionnaire d'événements Commençons par écrire le code pour notre fonction de rappel du gestionnaire d'événements. Nous obtenons d'abord le mot de passe qui a été entré par l'utilisateur, puis faisons une initialisation variable dans la fonction OutputResult () , qui prend soin de donner un sens aux calculs calculés. Nous verrons comment cela fonctionne plus tard.

Analyser la méthode d'entrée

Nous allons maintenant définir la méthode Match () nous permet de faire correspondre une chaîne contre une expression régulière. Si vous êtes nouveau dans des expressions régulières, je vous suggère de lire le grand article de Vasili sur les expressions régulières incontournables.

Ensuite, nous devons déterminer la différence entre la longueur de la chaîne d'entrée et la longueur minimale spécifiée du mot de passe. Cela nous donne le nombre excédentaire de personnages avec lesquels jouer.

Nous vérifions ensuite si la chaîne a des majuscules, des nombres et des symboles. Si c'est le cas, accordez un bonus. Nous vérifions également s'il a des combinaisons de deux d'entre eux et accordez un bonus plus petit dans le cas.

Enfin, nous vérifions si la chaîne est plate: s'il ne contient que des lettres minuscules ou seulement des chiffres. Nous vérifions cela avec une expression régulière et, dans l'affirmative, pénalisons le mot de passe pour cette pratique.

Calculez la complexité

Le calcul de la complexité est relativement facile car nous devons simplement faire un ajout simple et une multiplication des valeurs que nous avons attribuées à nos variables plus tôt. Nous ajoutons le score de base au produit du nombre de caractères excès et de son multiplicateur. Nous faisons de même pour les lettres, les chiffres et les symboles majuscules. Nous ajoutons ensuite un bonus pour les combinaisons, s'ils sont présents, et ajoutons des pénalités si la chaîne est plate.

<div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

Mise à jour de l'interface utilisateur

Maintenant que tout le calcul est derrière nous, nous pouvons mettre à jour l'interface utilisateur pour refléter les modifications. Voici chacun des états.

Nous définirons deux fonctions ici. La fonction principale appelée div , les classes à supprimer et les classes à ajouter. La fonction d'assistance appelée classe Default pour changer sa couleur d'arrière-plan en noir d'origine.

Si elle est inférieure à la longueur minimale spécifiée, nous modifions le texte en conséquence et ajoutons un faible .

À mesure que le score augmente, nous modifions le texte en conséquence et ajoutons les classes nécessaires. N'hésitez pas à modifier les scores de référence pour chaque note. Je viens de mettre des valeurs non scientifiques pour faire avancer la démo.

Mise à jour de la panne détaillée

Avec le résultat principal mis à jour, nous pouvons envisager de mettre à jour les statistiques maintenant.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

Cette partie n'est pas aussi déroutante qu'elle semble. Permettez-moi d'expliquer.

Au lieu de mettre à jour les valeurs individuelles pour les résultats détaillés, j'ai eu recours à la mise à jour de la valeur HTML complète du conteneur. Je sais que ça va être lent lorsque le nombre de ces boîtes s'additionne, mais accéder à chaque élément individuellement, puis mettre à jour sa valeur pour une minuscule démo semblait être plutôt contre-productif. Alors, exécutez avec moi ici.

C'est comme injecter un HTML ordinaire dans un élément, sauf que nous avons placé quelques variables à l'intérieur pour permettre à la mise à jour des détails. Chaque valeur obtient une fonction init () n'est pas utile uniquement pour l'affectation de valeur initiale. Il s'occupe en fait de réinitialiser le score et les valeurs de pénalité après chaque fonction analyse () , et vous serez prêt à partir.

<div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

Voyons ce qui se passe ici. Nous commençons par convertir l'ensemble de notre mot de passe en lettres minuscules. Après cela, nous le convertissons en une propriété Taille pour obtenir le nombre de caractères uniques. Si le nombre de caractères uniques est inférieur ou égal à 3, nous définissons la valeur de la fonction analysestring () pour vérifier les modèles de répétition. Cela s'appuiera sur Regex et vérifiera si une séquence de 3 caractères alphanumériques ou plus est répétée dans le mot de passe.

Nous ajouterons le code suivant au bas de notre vérification de vérification () >

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

Nous utilisons simplement le Test () <code>test() La méthode sur le mot de passe d'entrée, et il revient true quand il y a un motif de répétition ()

sur le mot de passe d'entrée, et il renvoie son vrai quand caractères.

Dans l'image ci-dessus, vous pouvez voir que nous avons abordé avec succès le problème de répétition des séquences de caractères. Cependant, j'ai donné un exemple d'une autre limitation du vérificateur de force de mot de passe.  Vous pouvez voir que pa $$ w0rd $

se révèle comme un mot de passe sécurisé, tandis en fait, il sera bientôt cassé. Cela est dû à la simplicité de notre algorithme ici. Nous ne vérifions pas les remplacements de caractère ou les mots de passe ou modèles communs d'ailleurs. Faire de telles choses augmenterait la difficulté de ce tutoriel tout en réduisant son accessible, ce que je ne voulais pas pour cet article particulier.

Regarder la contribution à un dictionnaire est vraiment hors de la portée de cet article et nécessiterait soit un énorme dictionnaire téléchargé du côté client ou de le brancher à un système côté serveur pour le faire. Encore une fois, je voulais vraiment les éviter les deux cette fois.

Conclusion

Et là vous l'avez: comment ajouter une fonctionnalité conviviale, la possibilité de faire connaître les utilisateurs à connaître la force d'un mot de passe qu'ils viennent d'entrer, à vos projets. J'espère que vous avez trouvé ce tutoriel intéressant, et cela vous a été utile. N'hésitez pas à réutiliser ce code ailleurs dans vos projets!

Ce message a été mis à jour avec les contributions de Monty Shokeen. Monty est un développeur complet qui aime également écrire des tutoriels et en savoir plus sur les nouvelles bibliothèques JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!