Furnizarea de feedback instant este in-thing chiar acum. De ce să vă limitați să verificați numele de utilizator și adresele de e-mail? De ce să nu extindeți acest aspect pentru a vă oferi feedback rapid despre puterea parolei introduse de utilizator? Astăzi, vom analiza modul de creare a unui simplu parolă de verificare a valorii parolei utilizând biblioteca jQuery, expresii regulate și un algoritm simplu.
Un cuvânt de la autor
După cum vă spun majoritatea experților în securitate, utilizatorul este întotdeauna cel mai slab link. Cele mai sigure sisteme sunt vulnerabile atunci când un utilizator alege o parolă extrem de prost recomandată. Având în vedere acest lucru, tendința recentă pare să ofere feedback rapid utilizatorilor cu privire la puterea parolei astfel încât utilizatorul să poată extinde sau modifica parola pentru ao face mai sigură.
Astăzi, vom folosi biblioteca jQuery, o grămadă de expresii regulate și un algoritm foarte simplu pentru a crea o verificare a puterii parolei de bază. Interesat? Să începem imediat! Iată o demonstrație a ceea ce încercăm să construim astăzi:
Scopurile proiectului
Scopurile noastre de proiectare pentru această funcționalitate specifică sunt relativ mici.
Furnizați feedback vizual utilizatorilor cu privire la puterea parolei.
Feedback-ul trebuie să fie instantaneu. Aceasta înseamnă că nu faceți clic pe un buton pentru a testa puterea.
Evenimentul declanșator poate fi oricare dintre evenimentele tastaturii. Am ales tastatura, deoarece aceasta este cea mai potrivita pentru nevoile noastre specifice.
Pentru feedback-ul vizual, modificarea textului singur, în timp ce este utilă, lipsește grav. Am ales să schimb și culorile de fundal pentru a atrage atenția utilizatorului asupra acestui lucru.
Oferiți feedback suplimentar cuantificabil, astfel încât utilizatorul să știe în ce departamente parola nu are putere și cum poate fi îmbunătățită.
Acum, că ne-am dat seama în mod adecvat nevoile noastre, putem trece la următoarea etapă.
Plan de actiune
Vom decide acum cu privire la ordinea pașilor individuali care trebuie făcuți.
Conectați dispozitivul de tratare a evenimentelor la keyup eveniment al casetei de intrare.
Permiteți manipulatorului evenimentului să verifice intrarea, dar să delege toate celelalte metode individuale de ajutor.
Metodele de ajutor trebuie să aibă grijă de parsarea intrării și de analiza acesteia, de calcularea complexității și de tipărirea rezultatelor.
Asigurați-vă că dispozitivul de procesare a evenimentelor dezactivează metodele de ajutor numai dacă lungimea intrării este mai mare decât minimul așteptat, astfel încât să nu se piardă ciclurile procesorului pe intrările nevalabile.
Reveniți la controlul evenimentului în cazul în care trebuie făcut altceva.
Algoritmul
În interesul de a menține această scriere succintă și abordabilă, am decis să merg cu un algoritm de bază. Algoritmul analizează șirul, dă bonusuri pentru lungimea suplimentară, prezența numerelor, simbolurilor și literelor mari și penalizări pentru intrări numai cu litere sau numere. Nu vom analiza modelele comune potrivite sau nu vom verifica datele introduse împotriva unui dicționar, deoarece acest lucru nu se încadrează în domeniul de aplicare al articolului. În cazul vârfurilor de interes, aș putea face un articol despre acest lucru în viitor.
Mai întâi verificăm lungimea șirului de intrare. Dacă este mai mare decât lungimea minimă, dați-i un scor de bază de 50. Altfel face-l 0. Apoi iterați prin fiecare caracter al șirului și verificați dacă acesta este un simbol, un număr sau o majusculă. Dacă da, faceți o notă.
Apoi, verificați câte caractere suplimentare are șirul, peste minimul recomandat și acordați un bonus pentru fiecare caracter. De asemenea, acordați un bonus dacă șirul conține o combinație de litere mari, numere și simboluri sau toate cele trei. Acordați un bonus și pentru prezența fiecăruia.
Verificați dacă șirul conține numai litere mici sau numere și, dacă da, penalizați.
Adăugați toate numerele și decideți în mod corespunzător puterea parolei.
Acesta este lungul și lungul algoritmului. Nu merge prea mult, dar captează multe parole proaste. Veți înțelege mai bine acest lucru odată ce îl vom vedea în cod.
Core Markup
Marcajul HTML al paginii demo arată astfel:
Parolă de verificare a intensității parolei - de către Siddharth pentru NetTuts
Creați un simplu controler al puterii parolei
de Siddharth pentru cei minunați de la Net Tuts
Introduceți parola pentru a obține feedback vizual privind puterea parolei.
Vă asigur, nu vă fură parolele. Formularul nu se supune. Puteți privi prin sursă dacă sunteți suspect. :)
Introduceți o valoare aleatorie
Defalcarea punctelor
Nu luați în considerare toate marcările obișnuite. Observați elementul de intrare cu un ID de Introduceti parola, elementul div cu un ID de complexitate care arată complexitatea parolei și elementului div cu un ID de Detalii care arată defalcarea punctelor.
Am inclus, de asemenea, biblioteca jQuery și propriul fișier de script. Extra puncte dacă apreciați numele fișierului nostru script.
Doar placă CSS pentru cazane și tipografie. Avem o grămadă de clase în partea de jos pentru fiecare evaluare a puterii individuale. Le vom adăuga la elemente atunci când este necesar.
Implementarea JavaScript
Acum, că avem un cadru solid și un stil de bază în loc, putem începe codificarea funcționalității necesare. Rețineți că folosim extensiv jQuery. Nu ezitați să vă conectați la CDN-ul Google dacă este necesar.
Variabile și manipularea evenimentelor
Din moment ce o mulțime de jonglerie va continua, avem nevoie de o grămadă de variabile pentru a ține valorile. Din moment ce este un cod de demo și nu de producție, am decis să declar variabilele globale și să le accesez prin metodele de ajutor, în loc să le declar intern și apoi să le transmit funcțiilor.
var strPassword; var charPassword; var complexitate = $ ("complexitate"); var minPasswordLength = 8; var baseScore = 0, scor = 0; var num = ; num.Exces = 0; num.Apper = 0; num.Numbers = 0; num.Symbols = 0; var bonus = ; bonus.Exces = 3; bonus.Upper = 4; bonus.Numbers = 5; bonus.Symbols = 5; bonus.Combo = 0; bonus.FlatLower = 0; bonus.FlatNumber = 0;
Numele variabilelor sunt destul de standard, dar oricum aș da o rundown. strPassword menține valoarea casetei de intrare, charPassword este o matrice care deține fiecare caracter al șirului, complexitate deține o referință la elementul div. De asemenea, definim lungimea minimă a parolei, scorul și scorul de bază.
Creăm un hash rapid pentru a ține numărul de caractere suplimentare, majuscule, numere și simboluri. Facem același lucru și pentru bonusuri. Num hash deține numărul de caractere în timp ce primă hash deține multiplicatorii de bonusuri. Puteți crea doar variabile individuale, dar cred că acest lucru pare mai curat.
Nu uitați să conectați evenimentul la eveniment.
$ ("# inputPassword"); bind ("keyup", checkVal);
checkVal este manipulatorul evenimentului pe care îl vom crea doar într-o mică măsură.
Operatorul de evenimente
funcția checkVal () if (charPassword.length> = minPasswordLength) baseScore = 50; analyzeString (); calcComplexity (); altceva baseScore = 0; outputResult ();
Mai întâi verificăm lungimea șirului de intrare. Dacă este mai mare sau egală cu lungimea minimă specificată, putem continua. Am stabilit scorul de bază la 50 și sunăm metodele de ajutor care se ocupă de analizarea șirului și de calculul complexității acestuia.
Dacă este mai mică decât lungimea așteptată, am setat scorul de bază la 0.
Apoi chemăm outputResult funcția care are grijă de a face sens calculului calculat. Vom vedea cum funcționează mai târziu.
Analiza intrării
analiza funcției String () pentru (i = 0; i
Poate arata cam un pic mai complicat, dar va promit, doar din cauza expresiilor regulate. Să trecem peste partea codului în parte.
În primul rând, trebuie să ne dăm seama de compoziția șirului în cauză. Ca și în, trebuie să ne dăm seama dacă șirul conține litere mari, numere sau simboluri și, dacă da, câte dintre ele sunt prezente. Având în vedere acest lucru, vom itera prin matricea caracterelor și vom verifica fiecare personaj pentru a vedea tipul acestuia. Meci ne permite să potrivim un șir cu o expresie regulată. Dacă sunteți nou în expresia regulată, vă sugerez să citiți articolul mare al lui Vasili aici.
Apoi, determinăm diferența dintre lungimea șirului de intrare și lungimea minimă specificată a parolei. Acest lucru ne oferă numărul excesiv de caractere care se joacă cu.
Apoi, verificăm dacă șirul are majuscule, numere și simboluri. Dacă da, acordați un bonus. De asemenea, verificăm dacă are combinații de două dintre ele și acordă un bonus mai mic dacă da.
În cele din urmă, verificăm dacă un șir este plat: dacă conține doar litere mici sau numai numere. Verificăm acest lucru cu o expresie regulată și, dacă da, penalizați parola pentru această practică.
Doar o simplă adăugare. Adăugăm scorul de bază la produsul din numărul de caractere în exces și este multiplicatorul. Același lucru este valabil și pentru literele mari, numerele și simbolurile. Apoi adăugăm un bonus pentru combinații, dacă este prezent, și adăugăm penalități dacă șirul este plat.
Actualizarea interfeței utile
Acum că tot calculul este în spatele nostru, putem actualiza interfața utilizator pentru a reflecta modificările. Iată fiecare dintre aceste state.
() () () () ($ ("inputPassword")). altfel dacă (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 && scor<75) complexity.html("Average!").addClass("strong"); else if (score>= 75 && scor<100) complexity.html("Strong!").addClass("stronger"); else if (score>= 100) complexity.html ("Secure!") AddClass ("cel mai puternic");
Nimic nu este aici, dar vom trece prin linie.
Mai întâi verificăm dacă intrarea este goală. Dacă da, schimbați textul rezultatului și adăugați a Mod implicit clasă pentru a schimba culoarea de fundal înapoi la gri original.
Dacă este mai mică decât lungimea minimă specificată, modificăm textul în mod corespunzător și adăugăm a slab clasa astfel încât fundalul este roșu. Facem același lucru dacă scorul total este mai mic de 50, dar modificați textul slab.
Pe măsură ce crește scorul, modificăm textul în mod corespunzător și adăugăm clasele necesare. Simțiți-vă liber să modificați scorurile de bază pentru fiecare evaluare. Am introdus valori neștiințifice pentru a face demo-ul.
Actualizarea defalcării detaliate
Cu actualizarea principalului rezultat, ne putem uita la actualizarea statisticilor acum.
Această parte nu este la fel de confuză pe cât pare. Lasă-mă să explic.
În loc să actualizăm doar valorile individuale pentru rezultatele detaliate, am recurs la actualizarea valorii HTML complete a containerului. Știu că va fi lent când se vor adăuga mai multe dintre aceste casete, dar accesarea fiecărui element individual și apoi actualizarea valorii sale pentru o demo mică părea a fi mai degrabă contraproductivă. Deci fugi cu mine aici.
Acest lucru este la fel ca injectarea HTML obișnuit într-un element, cu excepția faptului că am plasat două variabile în interior pentru a permite detaliile să fie actualizate instantaneu. Fiecare valoare devine a valoare clasa pentru ao face îndrăzneață. De asemenea, afișăm numărul de caractere speciale și este mai multe, astfel încât utilizatorul poate să evalueze elementele care obțin mai multă greutate.
Câteva Tweaks
În acest moment, există 2 bug-uri care apar.
Dacă tastați o parolă lungă și apoi ștergeți caseta de text, culorile de fundal nu se schimba înapoi.
În același scenariu, detaliile punctelor defalcate nu se actualizează așa cum ar trebui.
Îi vom aborda unul câte unul.
Pentru prima eroare, cauza principală este că nu eliminăm toate celelalte clase. Aceasta nu ar fi o problemă dacă cele mai recente clase adăugate au prioritate față de altele. Din păcate, nu este așa. Iată o rezolvare rapidă.
(= "") complexity.html ("Introduceți o valoare aleatorie") removeClass ("slab puternic puternic mai puternic") addClass ("implicit" "); altfel dacă (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 && scor<75) complexity.html("Average!").removeClass("stronger strongest").addClass("strong"); else if (score>= 75 && scor<100) complexity.html("Strong!").removeClass("strongest").addClass("stronger"); else if (score>= 100) complexity.html ("Secure!") AddClass ("mai puternic"); // Detalii actualizarea codului
Probabil că întrebați de ce nu eliminăm fiecare clasă aici. Răspunsul este simplu: profităm de unul dintre atributele principale ale CSS: cascadă. Dacă notați ordinea de declarație a fiecărei clase în fișierul CSS veți observa că Mod implicit apare primul și mai puternic vine ultimul care înseamnă dacă un element are mai puternic clasa va suprascrie orice modificare făcută de orice clasă de mai sus. Deci, va trebui să eliminăm clasele care apar sub clasa relevantă. De exemplu, pentru a avea un element puternic, va trebui să eliminăm mai puternica și mai puternic clase.
Motivul pentru care există cea de-a doua eroare se datorează faptului că variabilele individuale nu sunt resetate la apariția unui nou eveniment. Acestea se transmit și la următorul eveniment. Pentru a rezolva aceasta, vom crea o funcție rapidă care va reinitializa toate variabilele relevante și le va adăuga checkVal manipulator de evenimente, așa că se numește de fiecare dată când textul casetei de intrare este actualizat.
Dacă ați jucat puțin cu demo-ul, veți observa asta Pa $$ W0rd $ apare ca o parolă sigură, în timp ce, de fapt, va fi rupt destul de curând. Acest lucru se datorează simplității algoritmului nostru aici. Nu verificăm înlocuirea caracterelor. Sau parole comune sau modele pentru care contează. Făcând astfel de lucruri ar crește dificultatea acestui tutorial, reducând în același timp abordabilitatea acestuia, ambele pe care nu am vrut să le scriu în mod special.
Acest lucru este conceput ca un controler de bază de putere parola. Dacă aveți nevoie de carne de vită, puteți adăuga probabil câteva expresii regulate pentru a verifica modelele și repetarea caracterului și apoi pentru a regla rezultatele.
Privind introducerea împotriva unui dicționar este într-adevăr în afara sferei de aplicare a acestui articol și ar necesita fie un dictionar uriaș descărcat pe partea clientului sau conectarea-l la un sistem de server lateral pentru a face acest lucru. Din nou, am vrut cu adevărat să evit și pe amândoi de data asta.
Concluzie
Și acolo aveți: cum să adăugați o funcționalitate prietenoasă utilizatorilor, abilitatea de a lăsa utilizatorul să cunoască puterea unei parole pe care tocmai a intrat-o în proiectele dvs. Sperăm că ați găsit acest tutorial interesant și acest lucru a fost util pentru dvs. Simțiți-vă liber să reutilizați acest cod în altă parte în proiectele dvs. și faceți clic aici dacă întâmpinați dificultăți.
Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!
Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.
Share
Accentsconagua
