Fournir un retour instantané est ce qu'il y a de mieux en ce moment. Pourquoi vous limiter à vérifier les noms d'utilisateur et les adresses e-mail? Pourquoi ne pas l'étendre pour fournir un retour visuel rapide sur la force du mot de passe saisi par l'utilisateur? Aujourd'hui, nous allons voir comment créer un vérificateur de force de mot de passe simple à l'aide de la bibliothèque jQuery, d'expressions régulières et d'un algorithme simple..
Un mot de l'auteur
Comme le diront la plupart des experts en sécurité, l'utilisateur est toujours le lien le plus faible. Les systèmes les plus sécurisés sont vulnérables lorsqu'un utilisateur choisit un mot de passe extrêmement déconseillé. En gardant cela à l'esprit, la tendance récente semble fournir à l'utilisateur un retour rapide sur 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 groupe d'expressions régulières et un algorithme très simple pour créer un vérificateur de base de la force du mot de passe. 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 un retour visuel à l'utilisateur concernant la force de son mot de passe.
Le retour doit être instantané. Cela signifie pas de clic sur un bouton pour tester la force.
L'événement déclencheur peut être l'un des événements de clavier. J'ai choisi keyup car c'est le plus approprié pour nos besoins spécifiques.
Pour le retour visuel, la modification du texte seul, bien qu'utile, fait cruellement défaut. J'ai également choisi de modifier les couleurs de fond pour attirer l'attention de l'utilisateur sur cette.
Fournissez des informations supplémentaires quantifiables pour que l'utilisateur sache dans quels départements le mot de passe manque de force et comment il peut être amélioré.
Maintenant que nous avons bien cerné nos besoins, nous pouvons passer à l'étape suivante..
Plan d'action
Nous allons maintenant décider de l'ordre des étapes à suivre..
Connecter le gestionnaire d’événements au keyup événement de la boîte de saisie.
Laissez le gestionnaire d'événements vérifier l'entrée mais déléguez tout le reste à des méthodes d'assistance individuelles.
Les méthodes auxiliaires doivent s’occuper de l’analyse des entrées et de leur analyse, du calcul de la complexité et de l’impression des résultats..
Assurez-vous que le gestionnaire d'événements déclenche les méthodes d'assistance uniquement si la longueur de l'entrée est supérieure au minimum attendu afin de ne pas gaspiller les cycles de l'unité centrale sur des entrées non valides..
Renvoie le contrôle au gestionnaire d'événements au cas où il faudrait faire autre chose.
L'algorithme
Dans l'intérêt de garder cette écriture succincte et accessible, j'ai décidé de choisir un algorithme très basique. L'algorithme analyse la chaîne, donne des bonus pour la longueur supplémentaire, la présence de chiffres, de symboles et de lettres majuscules et des pénalités pour les entrées de lettres ou de chiffres uniquement. Nous n'allons pas chercher à faire correspondre des modèles courants ou à comparer l'entrée avec un dictionnaire, car cela sort du cadre de l'article. Si les intérêts montent, je ferai peut-être un article à ce sujet à l'avenir.
Nous vérifions d'abord la longueur de la chaîne d'entrée. Si elle est supérieure à la longueur minimale, attribuez-lui un score de base de 50. Sinon, définissez-la sur 0. Ensuite, parcourez chaque caractère de la chaîne et vérifiez s'il s'agit d'un symbole, d'un chiffre ou d'une lettre majuscule. Si oui, en prendre note.
Ensuite, vérifiez le nombre de caractères supplémentaires de la chaîne par rapport au minimum recommandé et accordez un bonus pour chaque personnage. Accordez également un bonus si la chaîne contient une combinaison de lettres majuscules, de chiffres et de symboles, ou les trois. Accorder un bonus pour la présence de chacun aussi.
Vérifiez si la chaîne ne contient que des lettres minuscules ou des chiffres et, le cas échéant, pénalisez.
Additionnez tous les nombres et décidez la force du mot de passe en conséquence.
C'est le long et court de l'algorithme. Cela ne va pas excessivement suave mais attrape beaucoup de mauvais mots de passe. Vous comprendrez mieux cela une fois que nous le verrons dans le code.
Balisage de base
Le balisage HTML de la page de démonstration ressemble à ceci:
Vérificateur de force de mot de passe simple - par Siddharth pour NetTuts
Créer un vérificateur de force de mot de passe simple
par Siddharth pour les adorables gens de Net Tuts
Tapez votre mot de passe pour obtenir un retour visuel sur la force de votre mot de passe.
Je vous assure que je ne vole pas vos mots de passe. Le formulaire ne pas soumettre. Vous pouvez consulter la source si vous êtes suspect. :)
Entrez une valeur aléatoire
Répartition des points
Ne tenez pas compte de tout le balisage habituel. Remarquez l'élément d'entrée avec un ID de saisir mot de passe, l'élément div avec un identifiant de complexité qui montre la complexité du mot de passe et de l'élément div avec un ID de détails qui montre la répartition des points.
Nous avons également inclus la bibliothèque jQuery et notre propre fichier de script. Des points supplémentaires si vous appréciez le nom de notre fichier script.
Juste la plaque de chaudière CSS pour les mises en page et la typographie. Nous avons un tas de classes au bas de chaque cote de force. Nous les ajouterons aux éléments si nécessaire.
Implémentation JavaScript
Maintenant que nous disposons d’un cadre solide et d’un certain style de base, nous pouvons commencer à coder les fonctionnalités requises. Notez que nous utilisons beaucoup jQuery. N'hésitez pas à vous connecter au CDN de Google si nécessaire.
Variables et gestion des événements
Étant donné que la jonglerie numérique va continuer, nous avons besoin de plusieurs variables pour conserver les valeurs. Comme il s’agit d’une démonstration et non d’un code de production, j’ai décidé de déclarer les variables globales et d’y accéder par le biais des méthodes d’aide au lieu de les déclarer en interne, puis de les transmettre aux fonctions..
var strPassword; var charPassword; var complex = $ ("# complex"); var minPasswordLength = 8; var baseScore = 0, score = 0; var num = ; num.Excess = 0; num.Upper = 0; num.Numbers = 0; num.Symbols = 0; var bonus = ; bonus.Excess = 3; bonus.Upper = 4; bonus.Nombre = 5; bonus.Symbols = 5; bonus.Combo = 0; bonus.FlatLower = 0; bonus.FlatNumber = 0;
Les noms de variables sont assez standard mais je ferais quand même un aperçu. strPassword détient la valeur de la zone de saisie, charPassword est un tableau contenant chaque caractère de la chaîne, complexité contient une référence à l'élément div. Nous définissons également la longueur minimale du mot de passe, le score et le score de base.
Nous créons un hachage rapide pour contenir le nombre de caractères supplémentaires, de majuscules, de nombres et de symboles. Nous faisons la même chose pour les bonus. le num le hachage contient le nombre de caractères tandis que le prime Le hachage contient les multiplicateurs de bonus. Vous pouvez simplement créer des variables individuelles mais je pense que cela semble plus propre.
N'oubliez pas de connecter le gestionnaire d'événement à l'événement.
$ ("# inputPassword"). bind ("keyup", checkVal);
checkVal est le gestionnaire d'événements que nous allons créer dans un tout petit peu.
Le gestionnaire d'événements
function checkVal () if (charPassword.length> = minPasswordLength) baseScore = 50; analyseString (); calcComplexity (); else baseScore = 0; outputResult ();
Nous vérifions d'abord la longueur de la chaîne d'entrée. Si elle est supérieure ou égale à la longueur minimale spécifiée, nous pouvons continuer. Nous fixons le score de base à 50 et appelons les méthodes auxiliaires qui analysent la chaîne et calculent sa complexité.
Si elle est inférieure à la longueur attendue, il suffit de définir le score de base sur 0.
Nous appelons ensuite le outputResult fonction qui prend en charge de donner un sens aux calculs calculés. Nous verrons comment cela fonctionne plus tard, ci-dessous.
Analyser l'entrée
function analyseString () pour (i = 0; i
Cela a peut-être l'air un peu compliqué mais je vous promets que c'est uniquement à cause des expressions régulières. Passons en revue le code partie par partie.
Premièrement, nous devons déterminer la composition de la chaîne en question. Au fur et à mesure, nous devons déterminer si la chaîne contient des lettres majuscules, des chiffres ou des symboles et, dans l'affirmative, combien d'entre eux sont présents. En gardant cela à l’esprit, nous parcourons le tableau de caractères et vérifions chaque caractère pour voir son type. le rencontre La méthode nous permet de faire correspondre une chaîne à une expression régulière. Si vous êtes nouveau dans l'expression régulière, je vous suggère de lire l'excellent article de Vasili ici.
Ensuite, nous avons déterminé 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 excessif de personnages avec lesquels jouer..
Nous vérifions ensuite si la chaîne a des majuscules, des chiffres et des symboles. Si oui, accordez un bonus. Nous vérifions également s’il existe une combinaison de deux d’entre elles et accordons un bonus plus faible, le cas échéant..
Enfin, nous vérifions si une chaîne est plate: elle ne contient que des lettres minuscules ou uniquement des chiffres. Nous vérifions cela avec une expression régulière et si oui pénalisons le mot de passe pour cette pratique..
Juste un ajout simple. Nous ajoutons le score de base au produit du nombre de caractères en excès et de son multiplicateur. Idem pour les lettres majuscules, les chiffres et les symboles. Nous ajoutons ensuite un bonus pour les combinaisons, le cas échéant, et ajoutons des pénalités si la chaîne est plate.
Mise à jour de l'interface utilisateur
Maintenant que tous les calculs sont derrière nous, nous pouvons mettre à jour l'interface utilisateur pour refléter les changements. Voici chacun des états.
function outputResult () if ($ ("# inputPassword"). val () == "") complex.html ("Entrez une valeur aléatoire"). addClass ("default"); else if (charPassword.length < minPasswordLength) complexity.html("At least " + minPasswordLength+ " characters please!").addClass("weak"); else if (score<50) complexity.html("Weak!").addClass("weak"); else if (score>= 50 && score<75) complexity.html("Average!").addClass("strong"); else if (score>= 75 && score<100) complexity.html("Strong!").addClass("stronger"); else if (score>= 100) complex.html ("Secure!"). AddClass ("strongest");
Rien d'extraordinaire ici mais nous allons le parcourir ligne par ligne.
Nous vérifions d'abord si l'entrée est vide. Si oui, changez le texte du résultat et ajoutez un défaut classe pour changer sa couleur de fond à son gris d'origine.
Si elle est inférieure à la longueur minimale spécifiée, nous modifions le texte en conséquence et ajoutons un faible classe donc son fond est rouge. Nous faisons la même chose si le score total est inférieur à 50 mais changeons le texte en faible.
Au fur et à 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 base pour chaque note. Je viens de mettre en valeurs non scientifiques pour obtenir la démo en cours.
Mise à jour de la ventilation détaillée
Avec le résultat principal mis à jour, nous pouvons examiner la mise à jour des statistiques maintenant.
function outputResult () // Code précédent $ ("# détails"). html ("Score de base:"+ baseScore +""+" Bonus de longueur:"+ (num.Excess * bonus.Excess) +" ["+ num.Excess +" x "+ bonus.Excess +"] "+" Bonus majuscule:"+ (num.Upper * bonus.Upper) +" ["+ num.Upper +" x "+ bonus.Upper +"] "+" Bonus de nombre: "+ (num.Numbers * bonus.Numbers) +" ["+ num.Numbers +" x "+ bonus.Numbers +"]"+" Bonus de symbole: "+ (num.Symbols * bonus.Symbols) +" ["+ num.Symbols +" x "+ bonus.Symbols +"]"+" Bonus de combinaison: "+ bonus.Combo +""+" Minuscule seulement pénalité: "+ bonus.FlatLower +""+" Nombres seulement pénalité: "+ bonus.FlatNumber +""+" Score total: "+ score +""
Cette partie n'est pas aussi déroutante qu'il n'y paraît. Laisse-moi expliquer.
Au lieu de simplement mettre à jour les valeurs individuelles pour les résultats détaillés, je me suis contenté de mettre à jour la valeur HTML complète du conteneur. Je sais qu’un certain nombre de boîtes s’additionnera s’avérer léthargique, mais accéder à chaque élément individuellement, puis mettre à jour sa valeur pour une petite démonstration semblait plutôt contre-productif. Alors cours avec moi ici.
C'est comme si vous injectiez du code HTML normal dans un élément, sauf que nous avons placé quelques variables à l'intérieur pour permettre la mise à jour instantanée des détails. Chaque valeur obtient un valeur classe pour le rendre audacieux. Nous affichons également le nombre de caractères spéciaux et son multiplicateur afin que l'utilisateur puisse déterminer quels éléments obtiennent le plus de poids..
Quelques ajustements
A ce moment, il y a 2 bugs qui apparaissent.
Si vous tapez un mot de passe long, puis effacez la zone de texte, les couleurs d'arrière-plan ne sont pas modifiées..
Dans le même scénario, les détails des points ne sont pas mis à jour correctement..
Nous allons les aborder un à un.
Pour le premier bogue, la cause principale est le fait que nous ne supprimons pas toutes les autres classes. Ce ne serait pas un problème si les classes les plus récemment ajoutées ont priorité sur les autres. Malheureusement, ce n'est pas le cas. Voici une solution rapide.
function outputResult () if ($ ("# inputPassword"). val () == "") complex.html ("Entrez une valeur aléatoire"). removeClass ("faible fort fort fort fort"). addClass ("défaut "); else if (charPassword.length < minPasswordLength) complexity.html("At least " + minPasswordLength+ " characters please!").removeClass("strong stronger strongest").addClass("weak"); else if (score<50) complexity.html("Weak!").removeClass("strong stronger strongest").addClass("weak"); else if (score>= 50 && score<75) complexity.html("Average!").removeClass("stronger strongest").addClass("strong"); else if (score>= 75 && score<100) complexity.html("Strong!").removeClass("strongest").addClass("stronger"); else if (score>= 100) complex.html ("Secure!"). AddClass ("strongest"); // Détails du code de mise à jour
Vous demandez probablement pourquoi nous ne supprimons pas chaque classe ici. La réponse est simple: nous tirons parti de l’un des principaux attributs de CSS: en cascade. Si vous notez l'ordre de déclaration de chaque classe dans le fichier CSS, vous remarquerez que défaut se produit le premier et le plus fort vient le dernier qui signifie si un élément a la le plus fort classe, il annulera toutes les modifications apportées par une classe supérieure. Il ne faudra donc supprimer que les classes qui se trouvent en dessous de la classe appropriée. Par exemple, pour qu'un élément ait fort, nous devrons enlever le plus forte et le plus fort Des classes.
La raison pour laquelle le deuxième bogue existe est due au fait que les variables individuelles ne sont pas réinitialisées lorsqu'un nouvel événement se produit. Ils reportent également à l'événement suivant. Afin de résoudre ce problème, nous créons une fonction rapide qui réinitialise toutes les variables pertinentes et l’ajoute la checkVal gestionnaire d'événements de sorte qu'il est appelé chaque fois que le texte de la zone de saisie est mis à jour.
Si vous avez joué un peu avec la démo, vous remarquerez que Pa $$ W0rd $ apparaît comme un mot de passe sécurisé alors qu'en fait il sera cassé très bientôt. Ceci est dû à la simplicité de notre algorithme ici. Nous ne vérifions pas les remplacements de personnage. Ou des mots de passe ou des modèles communs pour cette question. Faire de telles choses augmenterait la difficulté de ce tutoriel tout en réduisant son accessibilité, deux choses que je ne voulais pas pour cet article en particulier.
Ceci est conçu comme un vérificateur de base de la force du mot de passe. Si vous avez besoin de le renforcer, vous pouvez probablement ajouter quelques expressions régulières supplémentaires pour vérifier les motifs et la répétition des caractères, puis ajuster les résultats en conséquence..
Examiner les entrées par rapport à un dictionnaire sort vraiment du cadre de cet article et nécessiterait soit un dictionnaire volumineux téléchargé du côté client, soit un système connecté au système pour le faire. Encore une fois, je voulais vraiment les éviter tous les deux cette fois.
Conclusion
Et voilà: comment ajouter une fonctionnalité conviviale, la possibilité d'informer l'utilisateur de la force du mot de passe qu'il vient d'entrer, pour vos projets. J'espère que vous avez trouvé ce tutoriel intéressant et que cela vous a été utile. Sentez-vous libre de réutiliser ce code ailleurs dans vos projets et insérez-le ici si vous rencontrez des difficultés.
Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!
Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..
Share
Accentsconagua
