Använda det medföljande lösenordsstyrkameterskriptet i WordPress

WordPress använder ett ganska nifty lösenordsstyrningsscript som används för att visa om lösenorden du angav i WordPress-administratören är: inte samma, mycket svaga, svaga, medelstora eller starka. För närvarande används det här skriptet endast när du skapar nya användare och när du ändrar ditt lösenord i din admin.

I den här artikeln kommer jag att lära dig hur du använder WordPress lösenordsmätare i dina egna former.

Lösenordsstyrkskriptet

Strömmätarens manus är okodifierad vid tidpunkten för denna artikel, så att använda den kräver lite grävning i WordPress-kärnan. Det faktiska manuskriptet ligger i WordPress på wp-admin / js / lösenords-hållfasthets-meter.js. Du kan kolla in det för att lära dig mer om hur scriptet fungerar.

Det första vi behöver göra är att inkludera det här skriptet genom att skriva in det i vår functions.php:

wp_enqueue_script ('lösenordsstyrka-meter');

Vad finns i Script?

Skriptet ensam gör inte allt för oss. Det ger oss bara dessa två JavaScript-funktioner:

• wp.passwordStrength.meter (lösenord1, svartlista, lösenord2).Den här är den viktigaste funktionen som vi ska använda. Det analyserar två givna strängar, ger sedan styrkan i dessa två som ett tal från 1-5, 1 är de svagaste och 5 är de starkaste. Det tar också en rad svartlistade ord som kommer att beaktas under beräkningen som svaga ord.
• wp.passwordStrength.userInputBlacklist ().Den här funktionen skapar en rad ord som ska betraktas som svaga ord i lösenord. Den här funktionen sammanställer strängar som finns i din webbplatss titel, tagline och URL. Det kontrollerar också för vissa inmatningsfält på den aktuella sidan och lägger sedan till dem i listan.

Vi kan redan mäta styrkan i lösenord med bara dessa funktioner ovan. Det finns dock mer. Skriptet ger oss inte ett resultat som vi kan visa. Vi måste bygga en egen funktion för att göra detta.

Vår styrmätare form

Låt oss ta det här

Vi kommer att använda fältet namn och ids ovanifrån i den funktion som vi ska skapa.

Dessa är de mål som vi vill uppnå när vi är färdiga:

1. När något är inskrivet i våra lösenordsfält, kontrollerar vi styrkan på lösenordet,
2. Vi visar sedan styrkan resultat under lösenordsfälten som liknar hur WordPress gör det,
3. Slutligen aktiverar vi knappen Skicka om lösenordet anses vara starkt.

Vår styrmätare funktion

Låt mig först visa dig den färdiga jQuery-funktionen som vi ska använda. Jag förklarar varje del i detalj efteråt:

 funktion checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Återställ form & meter $ submitButton.attr ('inaktiverat', 'inaktiverat'); $ strengthResult.removeClass ('short bad good strong'); // Förlänga vår svartlista array med de från ingångarna och webbplatsen data blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Hämta lösenordsstyrkan var styrka = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Lägg till styrdhetsmätarens resultatbrytare (styrka) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); ha sönder; fall 3: $ strengthResult.addClass ('bra') .html (pwsL10n.good); ha sönder; fall 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); ha sönder; fall 5: $ strengthResult.addClass ("short") .html (pwsL10n.mismatch); ha sönder; standard: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // Mätarfunktionen returnerar ett resultat även om pass2 är tomt, // aktivera endast inmatningsknappen om lösenordet är starkt och / / båda lösenorden fylls upp om (4 === styrka && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); returstyrka; jQuery (dokument) .ready (funktion ($) // Bindning att utlösa checkPasswordStrength $ ('body') .on ('keyup' 'input [name = password1], inmatas [name = password2]', funktion (händelse) checkPasswordStrength ($ ('input [namn = lösenord]', // Första lösenordsfältet $ ('input [name = password_retyped]' ), // Andra lösenordsfältet $ ('# lösenordsstyrka'), // Styrmätare $ ('input [typ = submit]'), // Skicka knapp ['svart', 'listat', 'ord'] // svartlistade ord);););

1. Argumenter och återställer formuläret

Jag gjorde funktionen ta alla objekt som vi kommer att ändra eller behöva information från. Jag prefixerade alla jQuery-objekten med a $ för att göra det enklare att identifiera dem från de normala JavaScript-objekten.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Återställ form & meter $ submitButton.attr ('inaktiverat', 'inaktiverat'); $ strengthResult.removeClass ('short bad good strong');

Dessa första linjer är enkla och enkla, vi får lösenorden, då återställer vi vår blankett. Vi gör att formuläret alltid är inaktiverat i början så att vi bara kan aktivera senare, efter att vi fått ett bra styrka.

Vi kommer även att lägga till stilar till vår styrmätare genom att ge det klassnamn beroende på poängen för lösenordet senare, för funktionens start kommer vi att rensa mätarens stil.

2. Blacklist Array

 // Förläng vårt sortlister med de från ingångarna och sidodata blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Styrmätarens manus är svartlistade ord normalt borde vara okej. Men bara incase du vill lägga till mer, vår funktion kan acceptera ytterligare ord. Båda dessa sammanfogas här för att inmatas till meter fungera.

3. Ringer till meter Fungera

 // Hämta lösenordsstyrkan var styrka = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Nu kallar vi meter funktion för att få lösenordets styrpoäng. Nästa kommer vi att bestämma vad vi ska göra med resultatet.

4. Visar mätresultatet

 // Lägg till styrdhetsmätarens resultatbrytare (styrka) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); ha sönder; fall 3: $ strengthResult.addClass ('bra') .html (pwsL10n.good); ha sönder; fall 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); ha sönder; fall 5: $ strengthResult.addClass ("short") .html (pwsL10n.mismatch); ha sönder; standard: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Nu när vi har styrka, är det här den del där vi visar den. WordPress ger oss JavaScript-objektet pwsL10n som håller etiketterna för varje styrpoäng. Vi visar etiketten inuti precis under lösenordsfälten, tilldelar vi också motsvarande stilklass till etiketten.

5. Aktivera inmatningsknappen

 // Mätarfunktionen returnerar ett resultat även om pass2 är tomt, // aktivera endast inmatningsknappen om lösenordet är starkt och / / båda lösenorden fylls upp om (4 === styrka && "! == pass2.trim )) $ submitButton.removeAttr ('disabled');

Funktionens slut är att aktivera vår inlämningsknapp endast om vi har ett starkt lösenord.

6. Utlösning på Keyup

 jQuery (dokument) .ready (funktion ($) $ ('body') .on ('keyup', 'input [namn = lösenord1], mata in [name = password2]', funktion (händelse) checkPasswordStrength 'Inmatning [namn = lösenord]'), // Första lösenordsfältet $ ('input [name = password_retyped]') // Andra lösenordsfältet $ ('# lösenordsstyrka') // Strength meter $ [typ = lämna in]), // Skicka knapp ['svart', 'listat', 'ord'] // svartlistade ord);););

Slutligen behöver vi ett sätt att utlösa när du ska köra vår mätare för lösenordsstyrkemätare. Vi gör det genom att binda en handlare till keyUp händelser till lösenordsfälten.

Var gjort!

Ändring av styrka etiketter

Etiketterna för hållfasthetsmätaren laddas upp av WordPress under objektet pwsL10n.

För att ändra och åsidosätta dessa etiketter måste du lokalisera manuset efter vår wp_enqueue_script i functions.php:

 wp_localize_script ('password-strength-meter', 'pwsL10n', array ('empty' => __ ('Styrindikator'), 'short' => __ ('Mycket svag'), 'dåligt' => __ Svag ")," bra "=> _x ('Medium', 'Lösenstyrka'), 'strong' => __ ('Starkt'), 'mismatch' => __ ('Mismatch')));

Slutsats

I den här artikeln lärde vi oss hur du använder lösenordsstyrkeskriptet som ingår i WordPress. Detta kan användas i dina egna registreringsblanketter och front-end-profilsidor för dina webbplatsmedlemmar.

Jag hoppas att du haft den här artikeln. Jag uppskattar all feedback, kommentarer och förslag.

Låt mig veta om du har hittat ett coolt sätt att använda lösenordsstyrkemätaren. Dela dina tankar nedan!