Fornire feedback istantanei è l'in-thing in questo momento. Perché limitarti a controllare nomi utente e indirizzi email? Perché non estendere questo per fornire un rapido riscontro visivo sulla forza della password che l'utente ha inserito? Oggi daremo un'occhiata a come creare un semplice controllore della forza della password usando la libreria jQuery, le espressioni regolari e un semplice algoritmo.
Una parola dall'autore
Come la maggior parte degli esperti di sicurezza ti diranno, l'utente è sempre il link più debole. I sistemi più sicuri sono vulnerabili quando un utente sceglie una password estremamente sconsigliata. Con questo in mente, la recente tendenza sembra fornire all'utente un feedback rapido sulla forza della password, in modo che l'utente possa estendere o modificare la password per renderla più sicura.
Oggi utilizzeremo la libreria jQuery, un mucchio di espressioni regolari e un algoritmo molto semplice per creare un controllo di base per il rafforzamento della password. Interessato? Iniziamo subito! Ecco una demo di ciò che stiamo cercando di costruire oggi:
Obiettivi di progettazione
I nostri obiettivi di progettazione per questa specifica funzionalità sono relativamente piccoli.
Fornire un feedback visivo all'utente relativamente alla forza della propria password.
Il feedback deve essere istantaneo. Ciò significa che non si fa clic su un pulsante per testare la forza.
L'evento trigger può essere uno qualsiasi degli eventi della tastiera. Ho scelto keyup poiché questo è il più appropriato per le nostre esigenze specifiche.
Per il feedback visivo, la modifica del testo da sola, sebbene utile, è gravemente carente. Ho scelto di cambiare anche i colori di sfondo per attirare l'attenzione dell'utente su questo.
Fornire ulteriori feedback quantificabili in modo che l'utente sappia in quali dipartimenti la password manchi di forza e come possa essere migliorata.
Ora che abbiamo adeguatamente capito i nostri bisogni, possiamo passare alla fase successiva.
Piano di azione
Ora decideremo l'ordine dei singoli passaggi che devono essere eseguiti.
Collega il gestore eventi al keyup evento della casella di input.
Consenti al gestore di eventi di verificare l'input ma delegare tutto il resto ai singoli metodi di supporto.
I metodi di supporto dovrebbero occuparsi di analizzare l'input e analizzarlo, calcolando la complessità e stampando i risultati.
Assicurarsi che il gestore di eventi si spenga dai metodi helper solo se la lunghezza dell'ingresso è maggiore del minimo previsto in modo da non sprecare cicli CPU su voci non valide.
Restituisci il controllo al gestore eventi nel caso in cui debba essere fatto qualcos'altro.
L'algoritmo
Nell'interesse di mantenere questo scritto succinto e accessibile, ho deciso di seguire un algoritmo molto basilare. L'algoritmo analizza la stringa, offre bonus per la lunghezza extra, presenza di numeri, simboli e lettere maiuscole e penalità per gli input di lettere o numeri. Non esamineremo modelli comuni corrispondenti o controlleremo l'input rispetto a un dizionario poiché questo è fuori dall'ambito di questo articolo. Se i picchi di interesse, potrei fare un articolo su questo in futuro.
Per prima cosa controlliamo la lunghezza della stringa di input. Se è maggiore della lunghezza minima, assegnagli un punteggio base di 50. Altrimenti, fai 0. Poi continua iterando su ciascun carattere della stringa e controlla se è un simbolo, un numero o una lettera maiuscola. Se è così, prendine nota.
Quindi controlla quanti caratteri extra ha la stringa, oltre il minimo raccomandato e concedi un bonus per ogni personaggio. Concedi anche un bonus se la stringa contiene una combinazione di lettere maiuscole, numeri e simboli o tutti e tre. Concedi anche un bonus per la presenza di ciascuno.
Controlla se la stringa contiene solo lettere minuscole o numeri e, in tal caso, penalizza.
Sommare tutti i numeri e decidere di conseguenza la forza della password.
Questo è il lungo e breve dell'algoritmo. Non sta andando eccessivamente soave ma prende molte password cattive. Lo capirai meglio una volta che lo vedremo in codice.
Core Markup
Il markup HTML della pagina demo è così:
Simple Password Strength Checker - di Siddharth per NetTuts
Creare un semplice controllore della forza della password
di Siddharth per le persone adorabili di Net Tuts
Inserisci la tua password per ottenere feedback visivi sulla forza della tua password.
Ti assicuro, non sto rubando le tue password. Il modulo non presenta. Puoi guardare attraverso la fonte se sei sospettoso. :)
Inserisci un valore casuale
Scomposizione dei punti
Ignora tutto il solito markup. Si noti l'elemento di input con un ID di inserire password, l'elemento div con un ID di complessità che mostra la complessità della password e dell'elemento div con un ID di dettagli che mostra la ripartizione dei punti.
Abbiamo anche incluso la libreria jQuery e il nostro file di script. Punti extra se apprezzi il nome del nostro file di script.
Solo lastre CSS per lastre e tipografia. Abbiamo un sacco di classi in basso per ogni singola valutazione di forza. Li aggiungeremo agli elementi quando necessario.
Implementazione JavaScript
Ora che abbiamo una struttura solida e uno stile di base, possiamo iniziare a codificare la funzionalità richiesta. Si noti che facciamo ampio uso di jQuery. Sentiti libero di collegarti al CDN di Google, se necessario.
Variabili e gestione degli eventi
Poiché un sacco di giocoleria numerica andrà avanti, abbiamo bisogno di un mucchio di variabili per contenere i valori. Poiché è un codice demo e non di produzione, ho deciso di dichiarare le variabili come globali e accedervi tramite i metodi helper invece di dichiararli internamente e quindi passarli alle funzioni.
var strPassword; var charPassword; var complex = $ ("# complessità"); var minPasswordLength = 8; var baseScore = 0, score = 0; var num = ; num.Excess = 0; num.Upper = 0; num.Numbers = 0; num.Symbols = 0; var bonus = ; bonus.Excess = 3; bonus.Upper = 4; bonus.Numeri = 5; bonus.Symbols = 5; bonus.Combo = 0; bonus.FlatLower = 0; bonus.FlatNumber = 0;
I nomi delle variabili sono piuttosto standard, ma darei comunque un resoconto. strPassword mantiene il valore della casella di input, charPassword è un array che tiene ogni carattere della stringa, complessità contiene un riferimento all'elemento div. Definiamo anche la lunghezza minima della password, il punteggio e il punteggio base.
Creiamo un hash veloce per contenere il numero di caratteri in più, caratteri maiuscoli, numeri e simboli. Facciamo lo stesso per i bonus. Il num hash contiene il numero di caratteri mentre il indennità l'hash contiene i moltiplicatori di bonus. Puoi semplicemente creare variabili individuali ma penso che questo sia più pulito.
Non dimenticare di collegare il gestore dell'evento all'evento.
$ ("# inputPassword"). bind ("keyup", checkVal);
checkVal è il gestore di eventi che creeremo in pochissimo.
Il gestore eventi
function checkVal () if (charPassword.length> = minPasswordLength) baseScore = 50; analyzeString (); calcComplexity (); else baseScore = 0; outputResult ();
Per prima cosa controlliamo la lunghezza della stringa di input. Se è maggiore o uguale alla lunghezza minima specificata, possiamo procedere. Impostiamo il punteggio base su 50 e chiamiamo i metodi helper che si occupano di analizzare la stringa e calcolare la sua complessità.
Se è inferiore alla lunghezza prevista, impostiamo il punteggio base su 0.
Quindi chiamiamo il outputResult funzione che si occupa di dare un senso ai calcoli calcolati. Vedremo come funzionerà più avanti.
Analizzando l'input
function analyzeString () for (i = 0; i
Questo forse sembra un po 'complicato ma ti assicuro che è solo a causa delle espressioni regolari. Esaminiamo il codice parte per parte.
Innanzitutto, dobbiamo capire la composizione della stringa in questione. Come in, abbiamo bisogno di capire se la stringa contiene lettere maiuscole, numeri o simboli e, in tal caso, quanti di essi sono presenti. Con questo in mente, iteriamo attraverso l'array di caratteri e controlliamo ciascun personaggio per vedere il suo tipo. Il incontro metodo ci permette di abbinare una stringa a un'espressione regolare. Se sei nuovo nell'espressione regolare, ti suggerisco di leggere il grande articolo di Vasili qui.
Successivamente, abbiamo determinato la differenza tra la lunghezza della stringa di input e la lunghezza minima specificata della password. Questo ci dà l'eccesso di personaggi con cui giocare.
Quindi controlliamo se la stringa ha maiuscolo, numeri e simboli. Se è così, concedi un bonus. Controlliamo anche se ha combinazioni di due di esse e concediamo un bonus più piccolo in caso affermativo.
Infine, controlliamo se una stringa è piatta: se contiene solo lettere minuscole o solo numeri. Controlliamo questo con un'espressione regolare e, in tal caso, penalizziamo la password per questa pratica.
Solo una semplice aggiunta. Aggiungiamo il punteggio base al prodotto del numero di caratteri in eccesso e il suo moltiplicatore. Lo stesso vale per lettere maiuscole, numeri e simboli. Quindi aggiungiamo un bonus per le combinazioni, se presenti, e aggiungiamo delle penalità se la corda è piatta.
Aggiornamento dell'interfaccia utente
Ora che tutto il calcolo è dietro di noi, possiamo aggiornare l'interfaccia utente per riflettere le modifiche. Ecco ognuno degli stati.
function outputResult () if ($ ("# inputPassword"). val () == "") complex.html ("Enter a random value"). addClass ("default"); else if (charPassword.length < minPasswordLength) complexity.html("At least " + minPasswordLength+ " characters please!").addClass("weak"); else if (score<50) complexity.html("Weak!").addClass("weak"); else if (score>= 50 && punteggio<75) complexity.html("Average!").addClass("strong"); else if (score>= 75 && punteggio<100) complexity.html("Strong!").addClass("stronger"); else if (score>= 100) complex.html ("Sicuro!"). AddClass ("più forte");
Non c'è niente di speciale qui, ma lo esamineremo riga per riga.
Per prima cosa controlliamo se l'input è vuoto. In tal caso, modifica il testo del risultato e aggiungi un predefinito classe per cambiare il suo colore di sfondo al suo grigio originale.
Se è inferiore alla lunghezza minima specificata, cambiamo il testo di conseguenza e aggiungiamo a debole classe in modo che lo sfondo sia rosso. Facciamo lo stesso se il punteggio totale è inferiore a 50 ma cambia il testo in debole.
Man mano che il punteggio aumenta, cambiamo il testo di conseguenza e aggiungiamo le classi necessarie. Sentiti libero di modificare i punteggi di base per ogni valutazione. Ho appena inserito valori non scientifici per far funzionare la demo.
Aggiornamento della ripartizione dettagliata
Con il risultato principale aggiornato, possiamo guardare all'aggiornamento delle statistiche ora.
function outputResult () // Codice precedente $ ("# dettagli"). html ("Punteggio base:"+ baseScore +""+" Bonus di lunghezza:"+ (num.Excess * bonus.Excess) +" ["+ num.Excess +" x "+ bonus.Excess +"] "+" Bonus maiuscolo:"+ (num.Upper * bonus.Upper) +" ["+ num.Upper +" x "+ bonus.Upper +"] "+" Numero Bonus: "+ (num.Numeri * bonus.Numeri) +" ["+ num.Numeri +" x "+ bonus.Numeri +"]"+" Bonus simbolico: "+ (num.Symbols * bonus.Symbols) +" ["+ num.Symbols +" x "+ bonus.Symbols +"]"+" Bonus di combinazione: "+ bonus.Combo +""+" Minuscolo penalità: "+ bonus.FlatLower +""+" Penalità solo numeri: "+ bonus.FlatNumber +""+" Punteggio totale: "+ punteggio +""
Questa parte non è così confusa come sembra. Lasciatemi spiegare.
Invece di aggiornare semplicemente i singoli valori per i risultati dettagliati, ho fatto semplicemente l'aggiornamento del valore HTML completo del contenitore. So che sarà lento quando un certo numero di queste caselle si sommerà, ma l'accesso a ciascun elemento singolarmente e quindi l'aggiornamento del suo valore per una piccola demo sembra essere piuttosto controproducente. Quindi corri con me qui.
È come iniettare un normale codice HTML in un elemento, tranne per il fatto che abbiamo inserito un paio di variabili all'interno per consentire l'aggiornamento istantaneo dei dettagli. Ogni valore ottiene a valore classe per renderlo audace. Visualizziamo anche il numero di caratteri speciali ed è più multiplo così l'utente può valutare quali elementi ottengono più peso.
Alcuni tweaks
A questo punto del tempo, ci sono 2 bug che compaiono.
Se si digita una lunga password e si cancella la casella di testo, i colori dello sfondo non cambiano.
Nello stesso scenario, i dettagli dei punti analizzati non si aggiornano come dovrebbero.
Li affronteremo uno per uno.
Per il primo bug, la causa principale è il fatto che non rimuoviamo tutte le altre classi. Questo non sarebbe un problema se le classi aggiunte più recentemente hanno la precedenza su altre. Sfortunatamente, non è così. Ecco una soluzione rapida.
function outputResult () if ($ ("# inputPassword"). val () == "") complex.html ("Immettere un valore casuale"). removeClass ("weak strong strong strongestestest"). addClass ("default "); else if (charPassword.length < minPasswordLength) complexity.html("At least " + minPasswordLength+ " characters please!").removeClass("strong stronger strongest").addClass("weak"); else if (score<50) complexity.html("Weak!").removeClass("strong stronger strongest").addClass("weak"); else if (score>= 50 && punteggio<75) complexity.html("Average!").removeClass("stronger strongest").addClass("strong"); else if (score>= 75 && punteggio<100) complexity.html("Strong!").removeClass("strongest").addClass("stronger"); else if (score>= 100) complex.html ("Sicuro!"). AddClass ("più forte"); // Codice di aggiornamento dettagli
Probabilmente stai chiedendo perché non rimuoviamo ogni classe qui. La risposta è semplice: sfruttiamo uno degli attributi principali del CSS: a cascata. Se noti l'ordine di dichiarazione di ogni classe nel file CSS, lo noterai predefinito si verifica il primo e più forte arriva l'ultimo che significa se un elemento ha il più forte classe, sostituirà tutte le modifiche apportate da qualsiasi classe sopra di esso. Quindi dovremo rimuovere solo le classi che si verificano al di sotto della classe pertinente. Ad esempio, per un elemento avere forte, dovremo rimuovere il più forte e più forte classi.
Il motivo per cui il secondo bug esiste è dovuto al fatto che le variabili individuali non vengono ripristinate quando si verifica un nuovo evento. Portano anche al prossimo evento. Per risolvere questo problema, creiamo una funzione rapida che reinizializza tutte le variabili rilevanti e le aggiunge checkVal gestore di eventi quindi viene chiamato ogni volta che il testo della casella di input viene aggiornato.
Se hai giocato un po 'con la demo, lo noterai Pa $$ w0rd $ si presenta come una password sicura, mentre in realtà sarà rotta abbastanza presto. Questo è dovuto alla semplicità del nostro algoritmo qui. Non controlliamo le sostituzioni dei personaggi. O password o schemi comuni per quella materia. Fare cose del genere aumenterebbe la difficoltà di questo tutorial e ne ridurrebbe l'accessibilità, entrambe cose che non volevo per questa particolare scrittura.
Questo è inteso come un correttore di base per il rafforzamento della password. Se hai bisogno di rinforzarlo, potresti probabilmente aggiungere un paio di altre espressioni regolari per verificare la ripetizione di motivi e caratteri e quindi regolare di conseguenza i risultati.
Guardare l'input rispetto ad un dizionario è fuori dal campo di applicazione di questo articolo e richiederebbe un enorme dizionario scaricato sul lato client o collegato ad un sistema lato server per farlo. Ancora una volta, volevo davvero evitare entrambi la volta.
Conclusione
Ed ecco fatto: come aggiungere una funzionalità user friendly, la capacità di far conoscere all'utente la forza di una password appena inserita, ai tuoi progetti. Spero che tu abbia trovato questo tutorial interessante e questo ti è stato utile. Sentitevi liberi di riutilizzare questo codice altrove nei vostri progetti e suonare qui se vi trovate in difficoltà.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!
Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.
Share
Accentsconagua
