Utilisation du script de compteur de force de mot de passe inclus dans WordPress

WordPress utilise un script de force de mot de passe assez astucieux qui est utilisé pour afficher si les mots de passe que vous avez entrés dans l'administrateur WordPress sont: pas les mêmes, très faibles, faibles, moyens ou forts. Actuellement, ce script est utilisé uniquement lors de la création de nouveaux utilisateurs et lors de la modification de votre mot de passe dans votre compte administrateur..

Dans cet article, je vais vous apprendre à utiliser le dynamomètre de mot de passe de WordPress dans vos propres formulaires..

Le script de force de mot de passe

Le script de mesure de la force n’est pas documenté au moment de la rédaction de cet article; son utilisation nécessite donc un peu de fouille dans le noyau de WordPress. Le script actuel est situé dans WordPress à l'adresse wp-admin / js / mot-de-passe-force-mètre.js. Vous pouvez le vérifier pour en savoir plus sur le fonctionnement du script..

La première chose à faire est d’inclure ce script en le mettant dans notre file functions.php:

wp_enqueue_script ('mot de passe-force-mètre');

Que contient le script??

Le script seul ne fait pas tout pour nous. Il nous donne juste ces deux fonctions JavaScript:

• wp.passwordStrength.meter (password1, blacklist, password2).Celui-ci est la fonction principale que nous allons utiliser. Il analyse deux chaînes données, puis en donne la force sous la forme d'un nombre compris entre 1 et 5, 1 étant la plus faible et 5 le plus fort. Il faut aussi un tableau de mots sur la liste noire qui seront considérés lors du calcul comme des mots faibles.
• wp.passwordStrength.userInputBlacklist ().Cette fonction crée un tableau de mots qui doivent être considérés comme des mots faibles dans les mots de passe. Cette fonction compile les chaînes trouvées dans le titre, le slogan et l’URL de votre site. Il vérifie également certains champs de saisie dans la page actuelle, puis les ajoute à la liste..

Nous pouvons déjà mesurer la force des mots de passe avec juste ces fonctions ci-dessus. Cependant, il y a plus que ça. Le script ne nous donne pas un résultat que nous pouvons afficher. Pour ce faire, nous devrons créer une fonction propre..

Notre forme de compteur de force

Prenons ceci

Nous allons utiliser le terrain des noms et identifiants d'en haut dans la fonction que nous allons créer.

Ce sont les objectifs que nous voulons atteindre lorsque nous avons terminé:

1. Lorsqu'un élément est saisi dans nos champs de mot de passe, nous vérifions la force du mot de passe.,
2. Nous affichons ensuite les résultats de la force sous les champs de mot de passe de la même manière que WordPress.,
3. Enfin, nous activons le bouton d'envoi si le mot de passe est considéré comme fort.

Notre compteur de force

Laissez-moi d’abord vous montrer la fonction jQuery que nous allons utiliser. J'expliquerai chaque partie en détail par la suite:

 function checkPasswordStrength ($ pass1, $ pass2, $ StrengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Réinitialise le formulaire & meter $ submitButton.attr ('disabled', 'disabled'); $ StrengthResult.removeClass ('court mauvais bon fort'); // Extension de notre tableau de liste noire avec ceux des entrées et des données de site blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Récupère la force du mot de passe var Strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Ajoute le commutateur de résultats de mesure de la force (force) cas 2: $ forceResult.addClass ('mauvais') .html (pwsL10n.bad); Pause; cas 3: $ powerResult.addClass ('bon') .html (pwsL10n.good); Pause; cas 4: $ powerResult.addClass ('strong') .html (pwsL10n.strong); Pause; cas 5: $ powerResult.addClass ('short') .html (pwsL10n.mismatch); Pause; valeur par défaut: $ StrengthResult.addClass ('short') .html (pwsL10n.short);  // La fonction compteur retourne un résultat même si pass2 est vide, // active uniquement le bouton d'envoi si le mot de passe est fort et // les deux mots de passe sont remplis si (4 === force && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); force de retour; jQuery (document) .ready (function ($) // Liaison au déclencheur checkPasswordStrength $ ('body') .on ('keyup', 'entrée [nom = mot de passe1], entrée [nom = mot de passe2]', fonction (événement) checkPasswordStrength ($ ('entrée [nom = mot de passe]')), // champ du premier mot de passe $ ('entrée [nom = mot_de_passe_de_passe]' ), // Deuxième champ de mot de passe $ ('# mot_de_passe-mot de passe'), // indicateur de force $ ('input [type = submit]'), // bouton de soumission ['noir', 'répertorié', 'mot'] // Mots de la liste noire);););

1. Arguments et réinitialisation du formulaire

J'ai fait en sorte que la fonction prenne en compte tous les objets que nous allons modifier ou dont nous avons besoin d'informations. J'ai préfixé tous les objets jQuery avec un $ pour faciliter leur identification à partir des objets JavaScript normaux.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Réinitialise le formulaire & meter $ submitButton.attr ('disabled', 'disabled'); $ StrengthResult.removeClass ('court mauvais bon fort');

Ces premières lignes sont claires et simples, nous obtenons les mots de passe, puis nous réinitialisons notre formulaire. Nous faisons en sorte que le formulaire soit toujours désactivé au début afin que nous puissions simplement l'activer plus tard, après avoir obtenu un bon score de force..

Nous allons également ajouter des styles à notre indicateur de force en lui attribuant ultérieurement des noms de classe en fonction du score du mot de passe. Pour le début de la fonction, nous allons effacer le style de l'indicateur..

2. Le tableau de la liste noire

 // Extension de notre tableau de liste noire avec ceux des entrées et des données de site blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Les mots de la liste noire du script du mesureur de force devraient normalement convenir. Mais si vous souhaitez en ajouter, notre fonction peut accepter des mots supplémentaires. Les deux sont fusionnés ici pour être entrés dans le mètre une fonction.

3. Appeler le mètre Une fonction

 // Obtention de la force du mot de passe var power = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Maintenant nous appelons le mètre fonction pour obtenir le score de force du mot de passe. Ensuite, nous déciderons quoi faire du résultat.

4. Affichage des résultats du compteur

 // Ajoute le commutateur de résultats de mesure de la force (force) cas 2: $ forceResult.addClass ('mauvais') .html (pwsL10n.bad); Pause; cas 3: $ powerResult.addClass ('bon') .html (pwsL10n.good); Pause; cas 4: $ powerResult.addClass ('strong') .html (pwsL10n.strong); Pause; cas 5: $ powerResult.addClass ('short') .html (pwsL10n.mismatch); Pause; valeur par défaut: $ StrengthResult.addClass ('short') .html (pwsL10n.short); 

Maintenant que nous avons le score de force, c'est la partie où nous l'avons affichée. WordPress nous donne l'objet JavaScript pwsL10n qui détient les étiquettes pour chaque score de force. Nous affichons l'étiquette à l'intérieur du juste en dessous des champs de mot de passe, nous affectons également la classe de style correspondante à l'étiquette.

5. Activer le bouton Soumettre

 // La fonction compteur renvoie un résultat même si pass2 est vide, // active uniquement le bouton d'envoi si le mot de passe est fort et // les deux mots de passe sont remplis si (4 === force && "! == pass2.trim ( )) $ submitButton.removeAttr ('disabled');

La fin de la fonction est pour activer notre bouton de soumission seulement si nous avons un mot de passe fort.

6. Déclenchement sur Keyup

 jQuery (document) .ready (function ($) $ ('body') .on ('keyup', 'input [nom = motdepasse1], input [nom = motdepasse2]' ', fonction (événement) checkPasswordStrength ($ ( 'input [nom = mot de passe]'), // Champ du premier mot de passe $ ('input [nom = mot de passe]), // Champ du deuxième mot de passe $ (' # # mot_presse '), // indicateur de force $ (' entrée [type = submit] '), // bouton Soumettre [' noir ',' énuméré ',' mot '] // mots sur la liste noire);););

Enfin, nous avons besoin d’un moyen de déclencher le moment où exécuter notre vérificateur de compteur de force de mot de passe. Nous faisons cela en liant un gestionnaire à la keyup événements aux champs de mot de passe.

Avaient fini!

Changer les étiquettes de force

Les étiquettes pour le mesureur de force sont chargées par WordPress sous l'objet pwsL10n.

Pour changer et remplacer ces étiquettes, vous devez localiser le script après notre wp_enqueue_script dans functions.php:

 wp_localize_script ('password-Strength-Meter', 'pwsL10n', array ('empty' => __ ('indicateur de force'), 'short' => __ ('très faible'), 'bad' => __ (' Faible '),' bon '=> _x (' Moyen ',' force du mot de passe '),' fort '=> __ (' Fort '),' mismatch '=> __ (' mismatch ')));

Conclusion

Dans cet article, nous avons appris à utiliser le script de renforcement du mot de passe inclus dans WordPress. Cela peut être utilisé dans vos formulaires d'inscription personnalisés et pages de profil front-end pour les membres de votre site Web.

J'espère que vous avez apprécié cet article. J'apprécie hautement vos commentaires, commentaires et suggestions.

Faites-moi savoir si vous avez trouvé un moyen intéressant d'utiliser le compteur de force de mot de passe. Partagez vos pensées ci-dessous!