Utilizzo dello script del misuratore della forza password incluso in WordPress

WordPress utilizza uno script di forza della password piuttosto elegante che viene utilizzato per visualizzare se le password immesse nell'amministratore di WordPress sono: non uguali, molto deboli, deboli, medie o forti. Attualmente questo script viene utilizzato solo quando si creano nuovi utenti e quando si modifica la password nell'amministratore.

In questo articolo, ti insegnerò come usare il misuratore di forza password di WordPress nelle tue forme.

Lo script di sicurezza password

Lo script del misuratore di forza non è documentato al momento di questo articolo, quindi utilizzarlo richiede un po 'di scavo nel core di WordPress. Lo script attuale si trova all'interno di WordPress all'indirizzo wp-admin / JS / password-forza-meter.js. Puoi verificarlo per saperne di più su come funziona lo script.

La prima cosa che dobbiamo fare è includere questo script inserendolo nel nostro functions.php:

wp_enqueue_script ('password-strength-meter');

Cosa c'è nella sceneggiatura?

La sceneggiatura da sola non fa tutto per noi. Ci dà solo queste due funzioni JavaScript:

• wp.passwordStrength.meter (password1, lista nera, password2).Questa è la funzione principale che useremo. Analizza due stringhe date, quindi emette la forza di questi due come un numero compreso tra 1-5, 1 il più debole e 5 il più forte. Prende anche una serie di parole nella lista nera che saranno considerate durante il calcolo come parole deboli.
• wp.passwordStrength.userInputBlacklist ().Questa funzione crea una serie di parole che dovrebbero essere considerate come parole deboli nelle password. Questa funzione compila le stringhe trovate nel titolo, nella tagline e nell'URL del tuo sito. Controlla anche determinati campi di input nella pagina corrente, quindi li aggiunge all'elenco.

Possiamo già misurare la forza delle password con solo queste funzioni sopra. Tuttavia, c'è di più ad esso. Lo script non ci dà risultati che possiamo mostrare. Dovremo costruire una nostra funzione per farlo.

La nostra forma del misuratore di forza

Prendiamo questo

Useremo il campo nomi e ids dall'alto nella funzione che creeremo.

Questi sono gli obiettivi che vogliamo raggiungere quando abbiamo finito:

1. Quando qualcosa viene digitato nei nostri campi password, controlliamo la forza della password,
2. Quindi mostriamo i risultati della forza sotto i campi della password simili a quelli di WordPress,
3. Infine, abilitiamo il pulsante di invio se la password è considerata forte.

La nostra funzione di misuratore di forza

Lascia che ti mostri per prima cosa la funzione jQuery che useremo. Spiegherò in dettaglio ogni parte in dettaglio:

 function checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Resetta il modulo e calcola $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short bad good strong'); // Estendi il nostro array blacklist con quelli dagli input e dai dati del sito blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Ottieni la forza della password var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Aggiungi i risultati del misuratore di forza (forza) caso 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); rompere; caso 3: $ strengthResult.addClass ('buono') .html (pwsL10n.good); rompere; caso 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); rompere; caso 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); rompere; default: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // La funzione meter restituisce un risultato anche se pass2 è vuoto, // abilita solo il pulsante di invio se la password è forte e // entrambe le password vengono riempite se (4 === strength && "! == pass2.trim ()) $ submitButton.removeAttr ('disabled'); forza di ritorno; jQuery (document) .ready (function ($) // Binding per trigger checkPasswordStrength $ ('body') .on ('keyup', 'input [nome = password1], input [nome = password2]', funzione (evento) checkPasswordStrength ($ ('input [nome = password]'), // Primo campo password $ ('input [nome = password_retyped]' ), // Campo password secondaria $ ('# password-strength'), // Strength meter $ ('input [type = submit]'), // Pulsante Submit ['black', 'listed', 'word'] // parole nella lista nera);););

1. Argomenti e reimpostazione del modulo

Ho fatto in modo che la funzione includa tutti gli oggetti che modificheremo o di cui avremo bisogno. Ho aggiunto come prefisso tutti gli oggetti jQuery con a $ per renderlo più facile identificarli dai normali oggetti JavaScript.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Resetta il modulo e calcola $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short bad good strong');

Queste prime righe sono semplici e chiare, otteniamo le password e quindi ripristiniamo il nostro modulo. Facciamo in modo che il modulo sia sempre disabilitato all'inizio, in modo che possiamo abilitarlo in un secondo momento, dopo aver ottenuto un buon punteggio di forza.

Aggiungiamo anche stili al nostro misuratore di forza assegnandogli nomi di classe in base al punteggio della password in seguito, per l'inizio della funzione, cancelleremo lo stile del misuratore.

2. La matrice della lista nera

 // Estendi il nostro array blacklist con quelli dagli input e dai dati del sito blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Le parole nella blacklist dello script del misuratore di forza normalmente dovrebbero andare bene. Ma nel caso in cui tu voglia aggiungere altro, la nostra funzione può accettare parole aggiuntive. Entrambi sono uniti qui per essere immessi nel metro funzione.

3. Chiamare il metro Funzione

 // Ottiene l'intensità della password var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Ora chiamiamo il metro funzione per ottenere il punteggio di forza della password. Successivamente decideremo cosa fare con il risultato.

4. Visualizzazione dei risultati del misuratore

 // Aggiungi i risultati del misuratore di forza (forza) caso 2: $ strengthResult.addClass ('bad') .html (pwsL10n.bad); rompere; caso 3: $ strengthResult.addClass ('buono') .html (pwsL10n.good); rompere; caso 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); rompere; caso 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); rompere; default: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Ora che abbiamo il punteggio di forza, questa è la parte in cui lo mostriamo. WordPress ci fornisce l'oggetto JavaScript pwsL10n che contiene le etichette per ogni punteggio di forza. Mostriamo l'etichetta all'interno del appena sotto i campi della password, assegniamo anche la classe di stile corrispondente all'etichetta.

5. Abilitazione del pulsante Submit

 // La funzione meter restituisce un risultato anche se pass2 è vuoto, // abilita solo il pulsante di invio se la password è forte e // entrambe le password vengono riempite se (4 === strength && "! == pass2.trim ( )) $ submitButton.removeAttr ('disabled');

La fine della funzione è per abilitare il nostro pulsante di invio solo se abbiamo una password forte.

6. Attivazione su Keyup

 jQuery (document) .ready (function ($) $ ('body') .on ('keyup', 'input [nome = password1], input [nome = password2]', funzione (evento) checkPasswordStrength ($ ( 'input [nome = password]'), // Primo campo password $ ('input [nome = password_retyped]'), // Secondo campo password $ ('# password-strength'), // Strength meter $ ('input [type = submit] '), // Pulsante Submit [' black ',' listed ',' word '] // Blacklisted words);););

Infine, abbiamo bisogno di un modo per attivare quando eseguire il nostro correttore di misuratore di forza della password. Lo facciamo legando un conduttore al keyup eventi ai campi della password.

Sono stati fatti!

Modifica delle etichette di resistenza

Le etichette per il misuratore di forza vengono caricate da WordPress sotto l'oggetto pwsL10n.

Per cambiare e sovrascrivere queste etichette, dovresti localizzare lo script dopo nostro wp_enqueue_script nel functions.php:

 wp_localize_script ('password-strength-meter', 'pwsL10n', array ('vuoto' => __ ('Indicatore forza)', 'corto' => __ ('Molto debole'), 'cattivo' => __ (' Debole '),' buono '=> _x (' Medio ',' forza password '),' forte '=> __ (' Forte '),' disadattamento '=> __ (' Mancata corrispondenza ')));

Conclusione

In questo articolo, abbiamo imparato come utilizzare lo script di sicurezza della password incluso in WordPress. Può essere utilizzato nei moduli di registrazione personalizzati e nelle pagine del profilo front-end per i membri del sito Web.

Spero che questo articolo ti sia piaciuto. Apprezzo molto qualsiasi commento, commento e suggerimento.

Fammi sapere se hai trovato un modo interessante per utilizzare il misuratore della forza della password. Condividi i tuoi pensieri qui sotto!