Verwenden des enthaltenen Kennwortstärkemesserskripts in WordPress

WordPress verwendet ein recht geschicktes Skript für die Kennwortsicherheit, mit dem angezeigt wird, ob die in WordPress-Administrator eingegebenen Kennwörter wie folgt lauten: nicht identisch, sehr schwach, schwach, mittel oder stark. Derzeit wird dieses Skript nur verwendet, wenn Sie neue Benutzer erstellen und Ihr Kennwort in Ihrem Administrator ändern.

In diesem Artikel werde ich Ihnen zeigen, wie Sie das Passwortstärkemessgerät von WordPress in Ihren eigenen Formularen verwenden.

Das Passwort-Stärke-Skript

Das Stärkemessungsskript ist zum Zeitpunkt dieses Artikels nicht dokumentiert. Daher ist die Verwendung des WordPress-Kerns erforderlich. Das eigentliche Skript befindet sich in WordPress unter WP-Admin / Js / Passwort-Stärke-Meter.js. Sie können es ausprobieren, um mehr über die Funktionsweise des Skripts zu erfahren.

Das erste, was wir tun müssen, ist, dieses Skript einzubinden, indem wir es in unser Skript einreihen Functions.php:

wp_enqueue_script ('Passwortstärke-Meter');

Was steht im Skript??

Das Skript alleine macht nicht alles für uns. Es gibt uns nur diese beiden JavaScript-Funktionen:

• wp.passwordStrength.meter (Passwort1, schwarze Liste, Passwort2).Dies ist die Hauptfunktion, die wir verwenden werden. Es analysiert zwei gegebene Saiten und gibt dann die Stärke dieser zwei als Zahl von 1 bis 5 an, wobei 1 die schwächste und 5 die stärkste ist. Dazu gehört auch ein Array von schwarzen Wörtern, die bei der Berechnung als schwache Wörter betrachtet werden.
• wp.passwordStrength.userInputBlacklist ().Diese Funktion erstellt eine Reihe von Wörtern, die in Kennwörtern als schwache Wörter betrachtet werden sollten. Diese Funktion kompiliert Zeichenfolgen, die im Titel, der Zeile und der URL Ihrer Website enthalten sind. Es prüft auch, ob bestimmte Eingabefelder auf der aktuellen Seite vorhanden sind, und fügt diese der Liste hinzu.

Mit diesen Funktionen können Sie bereits die Stärke von Passwörtern messen. Es gibt jedoch mehr dazu. Das Skript liefert uns keine Ergebnisse, die wir anzeigen können. Dazu müssen wir eine eigene Funktion aufbauen.

Unser Kraftmesser-Formular

Nehmen wir das an

Wir werden das Feld benutzen Namen und Ids von oben in der Funktion, die wir erstellen werden.

Dies sind die Ziele, die wir erreichen wollen, wenn wir fertig sind:

1. Wenn in unseren Passwortfeldern etwas eingegeben wird, überprüfen wir die Stärke des Passworts,
2. Die Stärke-Ergebnisse werden dann unter den Kennwortfeldern angezeigt, ähnlich wie bei WordPress,
3. Schließlich aktivieren wir die Schaltfläche "Senden", wenn das Passwort als stark gilt.

Unsere Stärke-Funktion

Lassen Sie mich zuerst die fertige jQuery-Funktion zeigen, die wir verwenden werden. Ich werde jeden Teil im Detail erklären:

 Funktion checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Formular zurücksetzen & meter $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short schlecht gut stark'); // Erweitern Sie unser Blacklist-Array mit denen aus den Eingaben und Standortdaten. BlacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Rufen Sie die Kennwortstärke ab varstärke = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Füge die Ergebnisse des Stärkemessers hinzu (Stärke) Fall 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); brechen; Fall 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); brechen; Fall 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); brechen; Fall 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); brechen; default: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // Die Zählerfunktion gibt ein Ergebnis zurück, auch wenn pass2 leer ist. // Aktivieren Sie nur die Schaltfläche zum Senden, wenn das Kennwort stark ist und // beide Kennwörter ausgefüllt sind, wenn (4 === Stärke && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); return Stärke; jQuery (document) .ready (Funktion ($) // Bindung zum Auslösen von checkPasswordStrength $ ('body') .on ('keyup') 'Eingabe [Name = Passwort1], Eingabe [Name = Passwort2]', Funktion (Ereignis) checkPasswordStrength ($ ('Eingabe [Name = Passwort]'), // Erstes Passwortfeld $ ('Eingabe [Name = Passwort_retyped]' ), // Zweites Kennwortfeld $ ('# Kennwortstärke'), // Stärkemesser $ ('input [type = submit]'), // Schaltfläche "Senden" ['schwarz', 'aufgelistet', 'Wort'] // Wörter auf der schwarzen Liste);););

1. Argumente & Zurücksetzen des Formulars

Ich habe dafür gesorgt, dass die Funktion alle Objekte übernimmt, von denen wir Änderungen vornehmen oder Informationen benötigen. Ich habe allen jQuery-Objekten ein vorangestelltes $ um es einfacher zu machen, sie anhand der normalen JavaScript-Objekte zu identifizieren.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Formular zurücksetzen & meter $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short schlecht gut stark');

Diese ersten Zeilen sind klar und einfach, wir erhalten die Passwörter und setzen dann unser Formular zurück. Wir machen das Formular am Anfang immer deaktiviert, so dass wir es später aktivieren können, nachdem wir eine gute Stärke erzielt haben.

Wir werden auch Stile zu unserem Stärkemessgerät hinzufügen, indem wir ihm später Klassennamen geben, abhängig von der Punktzahl des Passworts. Zum Start der Funktion löschen wir den Stil des Zählers.

2. Das Blacklist-Array

 // Erweitern Sie unser Blacklist-Array mit denen aus den Eingaben und Standortdaten. BlacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Die auf der schwarzen Liste befindlichen Wörter des Stärkemessers sollten normalerweise in Ordnung sein. Wenn Sie jedoch mehr hinzufügen möchten, akzeptiert unsere Funktion zusätzliche Wörter. Beide werden hier zusammengeführt, um in das eingegeben zu werden Meter Funktion.

3. Anrufen der Meter Funktion

 // Abrufen der Kennwortstärke var stärke = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Jetzt nennen wir das Meter Funktion, um die Stärke des Passworts zu ermitteln. Als Nächstes entscheiden wir, was mit dem Ergebnis geschehen soll.

4. Anzeigen der Zählerergebnisse

 // Füge die Ergebnisse des Stärkemessers hinzu (Stärke) Fall 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); brechen; Fall 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); brechen; Fall 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); brechen; Fall 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); brechen; default: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Nun, da wir die Festigkeitsbewertung haben, ist dies der Teil, wo wir ihn anzeigen. WordPress gibt uns das JavaScript-Objekt pwsL10n das hält die Labels für jeden Stärkewert. Wir zeigen das Etikett im Direkt unterhalb der Kennwortfelder weisen wir der Beschriftung auch die entsprechende Stilklasse zu.

5. Aktivieren der Schaltfläche "Senden"

 // Die Zählerfunktion gibt ein Ergebnis zurück, auch wenn pass2 leer ist. // Aktivieren Sie nur die Schaltfläche zum Senden, wenn das Kennwort stark ist und // beide Kennwörter ausgefüllt sind, wenn (4 === Stärke && "! == pass2.trim ( )) $ submitButton.removeAttr ('disabled');

Das Ende der Funktion dient zum Aktivieren der Schaltfläche "Senden" nur wenn wir ein sicheres Passwort haben.

6. Auslösen beim Keyup

 jQuery (document) .ready (Funktion ($) $ ('body') .on ('keyup', 'eingabe [name = Kennwort1], Eingabe [Name = Kennwort2]', Funktion (Ereignis) checkPasswordStrength ($ ( 'input [name = password]'), // Erstes Passwortfeld $ ('input [name = password_retyped]'), // Zweites Passwortfeld $ ('# password-strength'), // Stärkemessgerät $ ('input [type = submit] '), // Schaltfläche "Senden" [' schwarz ',' aufgeführt '', 'Wort'] // schwarze Wörter);););

Schließlich brauchen wir einen Weg, um auszulösen, wann unser Passwortstärkemessgerät ausgeführt wird. Wir tun dies, indem wir einen Handler an den binden keyup Ereignisse in die Kennwortfelder.

Wir sind fertig!

Ändern der Festigkeitsbeschriftungen

Die Etiketten für das Stärkemessgerät werden von WordPress unter das Objekt geladen pwsL10n.

Um diese Bezeichnungen zu ändern und zu überschreiben, müssten Sie das Skript lokalisieren nach dem unsere wp_enqueue_script im Functions.php:

 wp_localize_script ('Passwortstärke-Meter', 'pwsL10n', Array ('empty' => __ ('Festigkeitsanzeige'), 'short' => __ ('Sehr schwach')), 'bad' => __ (' Schwach '),' gut '=> _x (' Mittel ',' Passwortstärke '),' stark '=> __ (' Stark '),' Mismatch '=> __ (' Mismatch '))));

Fazit

In diesem Artikel haben wir gelernt, wie Sie das in WordPress enthaltene Kennwortsicherheits-Skript verwenden. Dies kann in Ihren benutzerdefinierten Registrierungsformularen und Front-End-Profilseiten für Ihre Website-Mitglieder verwendet werden.

Ich hoffe, Ihnen hat dieser Artikel gefallen. Ich freue mich über jedes Feedback, Kommentare und Vorschläge.

Lassen Sie mich wissen, wenn Sie einen coolen Weg gefunden haben, den Passwortstärkemesser zu verwenden. Teilen Sie unten Ihre Gedanken mit!