Bruke det innebygde passordstyrkemåleren i WordPress

WordPress bruker et ganske greit passordstyrke-skript som brukes til å vise om passordene du skrev inn i WordPress-administrasjonen, er: ikke det samme, veldig svakt, svakt, middels eller sterkt. For øyeblikket er dette skriptet bare brukt når du lager opprette nye brukere og når du endrer passordet ditt i administrasjonen din.

I denne artikkelen vil jeg lære deg hvordan du bruker WordPress 'passordstyrkemåler i dine egne former.

Password Strength Script

Styrkemålerens skript er utokumentert på tidspunktet for denne artikkelen, så bruk av det krever litt graving i WordPress-kjerne. Selve skriptet er plassert inne i WordPress på wp-admin / JS / passord-styrke-meter.js. Du kan sjekke det ut for å lære mer om hvordan skriptet fungerer.

Det første vi må gjøre er å inkludere dette skriptet ved å enqueuing det i vår functions.php:

wp_enqueue_script ('password-strength-meter');

Hva er i skriptet?

Skriptet alene gjør ikke alt for oss. Det gir oss bare disse to JavaScript-funksjonene:

• wp.passwordStrength.meter (passord1, svarteliste, passord2).Denne er hovedfunksjonen som vi skal bruke. Den analyserer to gitt strenger, og gir deretter styrken til disse to som et tall fra 1-5, 1 er den svakeste og 5 er den sterkeste. Det tar også en rekke svartlistede ord som vil bli vurdert under beregningen som svake ord.
• wp.passwordStrength.userInputBlacklist ().Denne funksjonen skaper en rekke ord som bør betraktes som svake ord i passord. Denne funksjonen kompilerer strenger som finnes i nettstedets tittel, tagline og URL. Den sjekker også for bestemte inntastingsfelter på den nåværende siden, og legger deretter til de i listen.

Vi kan allerede måle styrken på passordene med bare disse funksjonene ovenfor. Men det er mer til det. Skriptet gir oss ikke et resultat som vi kan vise. Vi må bygge en egen funksjon for å gjøre dette.

Vår styrke meter form

La oss ta dette

Vi skal bruke feltet navnene og ids ovenfra i funksjonen som vi skal opprette.

Dette er de målene vi vil oppnå når vi er ferdige:

1. Når noe er skrevet inn i våre passordfelter, sjekker vi styrken på passordet,
2. Vi viser deretter styrkenes resultater under passordfeltene, som ligner på hvordan WordPress gjør det,
3. Endelig aktiverer vi innleveringsknappen hvis passordet regnes som sterkt.

Vår styrke meter funksjon

La meg først vise deg den ferdige jQuery-funksjonen som vi skal bruke. Jeg vil forklare hver del i detalj etterpå:

 funksjonskontrollPasswordStrength ($ pass1, $ pass2, $ styrkeResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Tilbakestill skjemaet & meter $ submitButton.attr ('deaktivert', 'deaktivert'); $ styrkeResult.removeClass ('short bad good strong'); // Utvid vår svarteliste med de fra inngangene og nettsteddataene blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Få passordstyrken var styrke = wp.passwordStrength.meter (pass1, svartelisteArray, pass2); // Legg til styrkemålerens resultatbryter (styrke) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); gå i stykker; tilfelle 3: $ styrkeResult.addClass ('bra') .html (pwsL10n.good); gå i stykker; tilfelle 4: $ styrkeResult.addClass ('strong') .html (pwsL10n.strong); gå i stykker; sak 5: $ styrkeResult.addClass ('short') .html (pwsL10n.mismatch); gå i stykker; standard: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // Meterfunksjonen returnerer et resultat selv om pass2 er tomt, // aktiver kun send-knappen hvis passordet er sterkt og / / begge passordene fylles opp hvis (4 === styrke && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); returstyrke; jQuery (dokument) .ready (funksjon ($) // Binding for å utløse checkPasswordStrength $ ('body') .on ('keyup' 'input [navn = passord1], inntast [navn = passord2]', funksjon (hendelse) checkPasswordStrength ($ ('input [navn = passord]', // Første passordfelt $ ('input [name = password_retyped]' ), // Andre passordfelt $ ('# passordstyrke'), // Styrkemåler $ ('input [type = submit]'), // Send-knapp ['svart', 'oppført', 'ord'] // svartlistede ord);););

1. Argumenter og tilbakestille skjemaet

Jeg gjorde funksjonen ta alle de objektene vi vil endre eller trenger informasjon fra. Jeg prefixed alle jQuery-objektene med a $ for å gjøre det lettere å identifisere dem fra de normale JavaScript-objektene.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Tilbakestill skjemaet & meter $ submitButton.attr ('deaktivert', 'deaktivert'); $ styrkeResult.removeClass ('short bad good strong');

Disse første linjene er enkle og enkle, vi får passordene, og vi tilbakestiller vårt skjema. Vi gjør skjemaet alltid deaktivert ved starten, slik at vi bare kan aktivere senere, etter at vi får en god styrkepoengsum.

Vi skal også legge til stiler til vår styrkemåler ved å gi det klassenavn avhengig av poengsummen til passordet senere, for funksjonens start, skal vi fjerne stilen på måleren.

2. Blacklist Array

 // Utvid vår svarteliste med de fra inngangene og nettsteddataene blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Styrkemålerens svartelagte ord bør normalt være ok. Men bare incase du vil legge til mer, vår funksjon kan akseptere flere ord. Begge disse er fusjonert her for å bli inngått til måler funksjon.

3. Ringer på måler Funksjon

 // Få passordet styrke var styrke = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Nå kaller vi måler funksjon for å få styrken av passordet. Neste bestemmer vi hva vi skal gjøre med resultatet.

4. Viser måleresultatene

 // Legg til styrkemålerens resultatbryter (styrke) case 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); gå i stykker; tilfelle 3: $ styrkeResult.addClass ('bra') .html (pwsL10n.good); gå i stykker; tilfelle 4: $ styrkeResult.addClass ('strong') .html (pwsL10n.strong); gå i stykker; sak 5: $ styrkeResult.addClass ('short') .html (pwsL10n.mismatch); gå i stykker; standard: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Nå som vi har styrkepoengsummen, er dette den delen der vi viser den. WordPress gir oss JavaScript-objektet pwsL10n som holder etikettene for hver styrkepoeng. Vi viser etiketten inne i like under passordfeltene, tilordner vi også den tilsvarende stilklassen til etiketten.

5. Aktiverer Send-knappen

 // Meterfunksjonen returnerer et resultat selv om pass2 er tomt, // aktiver kun send-knappen hvis passordet er sterkt og / / begge passordene er fylt opp hvis (4 === styrke && "! == pass2.trim )) $ submitButton.removeAttr ('deaktivert');

Slutten på funksjonen er for å aktivere vår sende-knapp bare hvis vi har et sterkt passord.

6. Utløsing på tastatur

 jQuery (dokument) .ready (funksjon ($) $ ('body') .on ('keyup', 'input [navn = passord1], skriv inn [navn = passord2]', funksjon (hendelse) checkPasswordStrength 'Inntast [navn = passord]'), // Første passordfelt $ ('input [name = password_retyped]'), // Second passordfelt $ ('# passordstyrke') // Strength meter $ [type = send] '), // Send-knapp [' svart ',' oppført ',' ord '] // svarteliste ord);););

Til slutt, vi trenger en måte å utløse når du skal kjøre vår passordstyrke meter kontroller. Vi gjør dette ved å binde en handler til keyup hendelser til passordfeltene.

Vi er ferdige!

Endre styrketiketter

Etikettene for styrkemåleren lastes opp av WordPress under objektet pwsL10n.

For å endre og overstyre disse etikettene, må du lokalisere skriptet etter våre wp_enqueue_script i functions.php:

 wp_localize_script ('passordstyrke meter', 'pwsL10n', array ('empty' => __ ('Styrkeindikator'), 'short' => __ ('Veldig svak'), 'dårlig' => __ Svak '),' god '=> _x (' Middels ',' Passordstyrke '),' strong '=> __ (' Sterk '),' mismatch '=> __ (' Mislikning ')));

Konklusjon

I denne artikkelen lærte vi hvordan du bruker passordstyrke-skriptet som følger med WordPress. Dette kan brukes i dine egendefinerte registreringsskjemaer og front-end profilsider for nettstedets medlemmer.

Jeg håper du likte denne artikkelen. Jeg setter stor pris på tilbakemeldinger, kommentarer og forslag.

Gi meg beskjed hvis du har funnet en kul måte å bruke passordstyrken til. Del dine tanker nedenfor!