Utilizarea Scriptului de măsurare a intensității parolei inclus în WordPress

WordPress utilizează un script destul de puternic pentru parole, care este folosit pentru a afișa dacă parolele introduse în adminul WordPress sunt: ​​nu aceleași, foarte slabe, slabe, medii sau puternice. În prezent, acest script este folosit numai atunci când creați noi utilizatori și când vă schimbați parola în admin.

În acest articol, vă voi învăța cum să utilizați contorul de putere al parolei WordPress în formele proprii.

Scriptul pentru întărirea parolei

Scorul metru de rezistență este nedocumentat la momentul prezentului articol, astfel încât utilizarea acestuia necesită un pic de săpat în corelația WordPress. Scriptul propriu-zis se află în interiorul WordPress la wp-admin / js / parolă rezistență-meter.js. Puteți verifica acest lucru pentru a afla mai multe despre modul în care funcționează scriptul.

Primul lucru pe care trebuie să-l facem este să includeți acest scenariu prin înscrierea în scenariul nostru functions.php:

wp_enqueue_script ('parola-strength-meter');

Ce este în Script?

Singurul scenariu nu face totul pentru noi. Ne dă doar aceste două funcții JavaScript:

• wp.passwordStrength.meter (parola1, lista neagră, parola2).Aceasta este funcția principală pe care o vom folosi. Analizează două șiruri date, apoi dă puterea acestor două ca număr între 1-5, 1 fiind cel mai slab și 5 cel mai puternic. De asemenea, este nevoie de o serie de cuvinte care figurează în lista neagră, care vor fi luate în calcul în timpul calculului drept cuvinte slabe.
• wp.passwordStrength.userInputBlacklist ().Această funcție creează o serie de cuvinte care ar trebui considerate cuvinte slabe în parole. Această funcție compilează șiruri de caractere găsite în titlul, sloganul și adresa URL a site-ului. De asemenea, verifică anumite câmpuri de introducere în pagina curentă, apoi adaugă cele din listă.

Putem măsura deja puterea parolelor doar cu aceste funcții de mai sus. Cu toate acestea, sunt mai multe. Scenariul nu ne dă rezultate pe care le putem afișa. Va trebui să construim o funcție proprie pentru a face acest lucru.

Formularul Meter Strength

Să luăm asta

Vom folosi câmpul numele și id-uri de sus în funcția pe care o vom crea.

Acestea sunt obiectivele pe care vrem să le atingem atunci când am terminat:

1. Când un câmp este scris în câmpurile de parolă, verificăm puterea parolei,
2. Apoi afișăm rezultatele de rezistență sub câmpurile de parolă similare cu modul în care WordPress o face,
3. În cele din urmă, activăm butonul de trimitere dacă parola este considerată puternică.

Funcția noastră de măsurare a forței

Permiteți-mi să vă arăt mai întâi funcția jQuery finită pe care o vom folosi. Voi explica fiecare parte în detaliu după aceea:

 funcția checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pa2 = $ pass2.val (); // Resetați formularul & metru $ submitButton.attr ("dezactivat", "dezactivat"); $ strengthResult.removeClass ("scurtă rău bun puternic"); // Extindeți matricea noastră neagră cu cele din datele de intrare & date site blacklistArray = lista neagrăArray.concat (wp.passwordStrength.userInputBlacklist ()) // obțineți puterea parolei var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Adăugați comutatorul pentru rezultatele rezistenței contorului (forța) caz 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); pauză; cazul 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); pauză; cazul 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); pauză; cazul 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); pauză; implicit: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // Funcția metru returnează un rezultat chiar dacă pass2 este gol, // activa numai butonul submit dacă parola este puternică și // ambele parole sunt completate dacă (4 === strength && "! == pass2.trim () () $ submitButton.removeAttr ('dezactivat'); întoarcere; jQuery (document) .ready (functie ($) // Legarea pentru a declanșa checkPasswordStrength $ (' 'input [nume = parola1], intrare [nume = parola2]', functie (eveniment) checkPasswordStrength ($) ), // Câmp al parolei secunde $ ('# password-strength'), // Metru de rezistență $ ('input [type = submit]'), // Butonul Submit ['black', 'listed', 'word'] // Cuvintele negre);););

1. Argumente & Resetarea formularului

Am făcut această funcție în toate obiectele pe care le vom modifica sau le vom avea nevoie de informații. Am prefixat toate obiectele jQuery cu a $ pentru a facilita identificarea acestora din obiectele obișnuite ale JavaScript.

 var permis1 = $ pass1.val (); var pa2 = $ pass2.val (); // Resetați formularul & metru $ submitButton.attr ("dezactivat", "dezactivat"); $ strengthResult.removeClass ("scurtă rău bun puternic");

Aceste primele linii sunt simple și simple, primim parolele, apoi ne reinițializăm formularul. Facem formularul întotdeauna dezactivat la început, astfel încât să putem activa mai târziu, după ce obținem un scor bun de rezistență.

Vom adăuga, de asemenea, stiluri la contorul nostru de putere, oferindu-i numele claselor în funcție de scorul parolei mai târziu, pentru începerea funcției, vom șterge stilul contorului.

2. Arrayul listei neagră

 // Extindeți matricea noastră neagră cu cele din intrările și datele de pe site blacklistArray = lista neagrăArray.concat (wp.passwordStrength.userInputBlacklist ());

În mod normal, cuvintele înlăturată ale scriptului metricilor ar trebui să fie în regulă. Dar doar incase pe care doriți să adăugați mai mult, funcția noastră poate accepta cuvinte suplimentare. Ambele sunt fuzionate aici pentru a fi introduse în metru funcţie.

3. Apelarea metru Funcţie

 // obțineți puterea parolei var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Acum numim metru pentru a obține scorul de putere al parolei. În continuare vom decide ce să facem cu rezultatul.

4. Afișarea rezultatelor măsurătorilor

 // Adăugați comutatorul pentru rezultatele rezistenței contorului (forța) caz 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); pauză; cazul 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); pauză; cazul 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); pauză; cazul 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); pauză; implicit: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Acum că avem scorul de putere, aceasta este partea în care o afișăm. WordPress ne dă obiectul JavaScript pwsL10n care deține etichetele pentru fiecare scor de rezistență. Afișăm eticheta în interiorul chiar sub câmpurile de parolă, atribuim, de asemenea, etichetei clasa de stil corespunzătoare.

5. Activarea butonului Trimitere

 // Funcția metru returnează un rezultat chiar dacă pass2 este gol, // permite numai butonul de trimitere dacă parola este puternică și // ambele parole sunt completate dacă (4 === forța && "! == pass2.trim ( )) $ submitButton.removeAttr ("dezactivat");

Sfârșitul funcției este pentru activarea butonului nostru de trimitere numai dacă avem o parolă puternică.

6. Triggering pe tastatură

 jQuery (document) .ready (functie ($) $ ('body') .on ('keyup', ' 'input [nume = parolă]'), // Câmp de parolă de primă $ ('input [name = password_retyped]'), // Câmp al parolei secunde $ (' [type = submit] '), // Butonul Submit [' black ',' listed ',' word ']] // Cuvintele neglijate);););

În cele din urmă, avem nevoie de o modalitate de a declanșa când să ne executăm verificatorul parolei. Facem acest lucru prin legarea unui handler la keyup evenimente în câmpurile de parolă.

Au fost efectuate!

Schimbarea etichetelor de rezistență

Etichetele pentru contorul de putere sunt încărcate de WordPress sub obiect pwsL10n.

Pentru a schimba și a înlocui aceste etichete, va trebui să localizați scriptul după al nostru wp_enqueue_script în functions.php:

 wp_localize_script ('parola-rezistență-metru', 'pwsL10n', array ('gol' => Slab ")," bun "=> _x (" Mediu "," putere parolă ")," puternic "=> __ (" Strong ")," nepotrivire "=> __ ("

Concluzie

În acest articol, am învățat cum să folosim scriptul de intensitate a parolei inclus în WordPress. Acest lucru poate fi folosit în formularele personalizate de înregistrare și în paginile profilului de profil pentru membrii site-ului dvs. web.

Sper că ți-a plăcut acest articol. Apreciez foarte mult orice feedback, comentarii și sugestii.

Dați-mi voie să știu dacă ați găsit un mod răcoros de utilizare a contorului de putere al parolei. Împărtășește-ți gândurile de mai jos!