Gebruik van het meegeleverde Wachtwoord Strength Meter Script in WordPress

WordPress maakt gebruik van een behoorlijk handig script voor wachtwoordsterkte dat wordt gebruikt om weer te geven of de wachtwoorden die u hebt ingevoerd in de WordPress-beheerder zijn: niet hetzelfde, erg zwak, zwak, gemiddeld of sterk. Momenteel wordt dit script alleen gebruikt bij het maken van nieuwe gebruikers en bij het wijzigen van uw wachtwoord in uw beheerder.

In dit artikel zal ik u leren hoe u de wachtwoordsterktemeter van WordPress in uw eigen formulieren kunt gebruiken.

Het wachtwoordsterkte-script

Het script van de sterktemeter is ten tijde van dit artikel niet gedocumenteerd, dus voor gebruik ervan is een beetje onderzoek naar de kern van WordPress nodig. Het eigenlijke script bevindt zich in de WordPress op wp-admin / js / wachtwoord-sterkte-meter.js. U kunt het bekijken om meer te leren over hoe het script werkt.

Het eerste dat we moeten doen is dit script opnemen door het in onze bibliotheek te plaatsen functions.php:

wp_enqueue_script ('wachtwoord-sterkte-meter');

Wat zit er in het script?

Het script alleen doet niet alles voor ons. Het geeft ons gewoon deze twee JavaScript-functies:

• wp.passwordStrength.meter (wachtwoord1, zwarte lijst, wachtwoord2).Dit is de hoofdfunctie die we zullen gebruiken. Het analyseert twee gegeven reeksen, geeft vervolgens de sterkte van deze twee weer als een getal van 1-5, waarbij 1 de zwakste is en 5 de sterkste. Het vereist ook een reeks woorden op de zwarte lijst die tijdens de berekening als zwakke woorden worden beschouwd.
• wp.passwordStrength.userInputBlacklist ().Met deze functie wordt een reeks woorden gemaakt die als zwakke woorden in wachtwoorden moeten worden beschouwd. Deze functie compileert strings die te vinden zijn in de titel, slogan en URL van uw site. Het controleert ook bepaalde invoervelden in de huidige pagina en voegt deze vervolgens aan de lijst toe.

We kunnen de sterkte van wachtwoorden al meten met alleen deze functies hierboven. Er is echter meer aan de hand. Het script geeft ons geen resultaten die we kunnen weergeven. We zullen hiervoor een eigen functie moeten opbouwen.

Ons Strength Meter-formulier

Laten we dit nemen

We zullen het veld gebruiken namen en ids van bovenaf in de functie die we zullen maken.

Dit zijn de doelen die we willen bereiken wanneer we klaar zijn:

1. Wanneer een wachtwoord wordt ingevoerd in onze wachtwoordvelden, controleren we de sterkte van het wachtwoord,
2. Vervolgens geven we de sterkte-resultaten weer onder de wachtwoordvelden, vergelijkbaar met hoe WordPress het doet,
3. Ten slotte schakelen we de knop Verzenden in als het wachtwoord als sterk wordt beschouwd.

Onze krachtmeterfunctie

Laat me je eerst de voltooide jQuery-functie tonen die we zullen gebruiken. Ik zal elk deel naderhand nader toelichten:

 function checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Reset het formulier & meter $ submitButton.attr ('uitgeschakeld', 'uitgeschakeld'); $ strengthResult.removeClass ('short bad good strong'); // Breid onze blacklist-array uit met die van de inputs en sitegegevens blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Verkrijg de wachtwoordsterkte var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Voeg de schakelaar voor de sterktemeter toe (sterkte) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); breken; case 3: $ strengthResult.addClass ('goed') .html (pwsL10n.good); breken; case 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); breken; case 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); breken; standaard: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // De meterfunctie retourneert een resultaat, zelfs als pass2 leeg is, // schakel alleen de verzendknop in als het wachtwoord sterk is en // beide wachtwoorden zijn gevuld als (4 === strength && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); return strength; jQuery (document) .ready (function ($) // Binding om checkPasswordStrength $ ('body') .on (trigger 'trigger) te triggeren, 'invoer [naam = wachtwoord1], invoer [naam = wachtwoord2]', functie (gebeurtenis) checkPasswordStrength ($ ('input [name = password]'), // Eerste wachtwoordveld $ ('input [name = password_retyped]' ), // Tweede wachtwoordveld $ ('# wachtwoord-sterkte'), // Sterktemeter $ ('invoer [type = verzenden]'), // Verstuur knop ['zwart', 'vermeld', 'woord'] // Blacklisted words);););

1. Argumenten en het formulier opnieuw instellen

Ik heb de functie gemaakt in alle objecten die we zullen wijzigen of informatie nodig hebben. Ik heb alle jQuery-objecten voorafgegaan met een $ om het eenvoudiger te maken om ze te identificeren van de normale JavaScript-objecten.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Reset het formulier & meter $ submitButton.attr ('uitgeschakeld', 'uitgeschakeld'); $ strengthResult.removeClass ('short bad good strong');

Deze eerste paar regels zijn eenvoudig en duidelijk, we krijgen de wachtwoorden en vervolgens resetten we ons formulier. We maken het formulier altijd uitgeschakeld aan het begin, zodat we het later gewoon kunnen inschakelen, nadat we een goede score voor kracht hebben gekregen.

We gaan ook stijlen toevoegen aan onze sterktemeter door het klassennamen te geven, afhankelijk van de score van het wachtwoord later, voor het begin van de functie gaan we de stijl van de meter wissen.

2. De Blacklist-array

 // Breid onze blacklist-array uit met die uit de inputs & sitegegevens blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

De woorden op de zwarte lijst van de sterktemeter moeten normaal gesproken goed zijn. Maar als u meer wilt toevoegen, kan onze functie aanvullende woorden accepteren. Beide zijn samengevoegd om te worden ingevoerd in de meter functie.

3. Het oproepen van de meter Functie

 // Krijg de wachtwoordsterkte var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Nu noemen we het meter functie om de sterktescore van het wachtwoord te krijgen. Vervolgens bepalen we wat we met het resultaat moeten doen.

4. De resultaten van de meter weergeven

 // Voeg de schakelaar voor de sterktemeter toe (sterkte) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); breken; case 3: $ strengthResult.addClass ('goed') .html (pwsL10n.good); breken; case 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); breken; case 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); breken; standaard: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Nu we de krachtscore hebben, is dit het deel waar we het weergeven. WordPress geeft ons het JavaScript-object pwsL10n die de labels voor elke sterktescore bevat. We tonen het label in de net onder de wachtwoordvelden, wijzen we ook de bijbehorende stijlklasse toe aan het label.

5. De knop Verzenden inschakelen

 // De meterfunctie retourneert een resultaat, zelfs als pass2 leeg is, // schakel alleen de verzendknop in als het wachtwoord sterk is en // beide wachtwoorden worden ingevuld als (4 === strength && "! == pass2.trim ( )) $ submitButton.removeAttr ('disabled');

Het einde van de functie is om onze submit-knop in te schakelen enkel en alleen als we een sterk wachtwoord hebben.

6. Triggering op Keyup

 jQuery (document) .ready (function ($) $ ('body') .on ('keyup', 'input [name = password1], input [name = password2]', function (event) checkPasswordStrength ($ ( 'input [naam = wachtwoord]'), // Eerste wachtwoordveld $ ('input [name = password_retyped]'), // Tweede wachtwoordveld $ ('# wachtwoord-sterkte'), // Sterktemeter $ ('invoer [type = submit] '), // Submit-knop [' black ',' listed ',' word '] // Blacklisted words);););

Ten slotte hebben we een manier nodig om te triggeren wanneer we onze wachtwoordsterktemeter controleren. We doen dit door een handler te binden aan de keyup gebeurtenissen in de wachtwoordvelden.

Werden gedaan!

De sterkte-labels veranderen

De labels voor de sterktemeter worden door WordPress onder het object geladen pwsL10n.

Als u deze labels wilt wijzigen en vervangen, moet u het script lokaliseren na onze wp_enqueue_script in functions.php:

 wp_localize_script ('password-strength-meter', 'pwsL10n', array ('empty' => __ ('Strength indicator'), 'short' => __ ('Very weak'), 'bad' => __ (' Zwak '),' goed '=> _x (' Medium ',' wachtwoordsterkte '),' strong '=> __ (' Strong '),' mismatch '=> __ (' Mismatch ')));

Conclusie

In dit artikel hebben we geleerd hoe u het script voor wachtwoordsterkte kunt gebruiken dat is opgenomen in WordPress. Dit kan worden gebruikt in uw aangepaste registratieformulieren en front-end profielpagina's voor uw websiteleden.

Ik hoop dat je dit artikel leuk vond. Ik stel elke feedback, opmerkingen en suggesties zeer op prijs.

Laat het me weten als je een coole manier hebt gevonden om de wachtwoordsterktemeter te gebruiken. Deel je gedachten hieronder!