Å gi øyeblikkelig tilbakemelding er det i orden akkurat nå. Hvorfor begrense deg selv med å sjekke brukernavn og e-postadresser? Hvorfor ikke utvide dette for å gi rask visuell tilbakemelding om styrken til passordet brukeren har innspill? I dag tar vi en titt på hvordan du oppretter en enkel passordstyrkekontroll ved hjelp av jQuery-biblioteket, vanlige uttrykk og en enkel algoritme.
Et ord fra forfatteren
Som de fleste sikkerhetseksperter vil fortelle deg, er brukeren alltid den svakeste lenken. De sikreste systemene er sårbare når en bruker velger et ekstremt dårlig advarsel. Med det for øye synes den siste trenden å gi rask tilbakemelding til brukeren angående styrken av passordet, slik at brukeren kan utvide eller endre passordet for å gjøre det sikrere.
I dag skal vi bruke jQuery-biblioteket, en gjeng med vanlige uttrykk og en veldig enkel algoritme for å lage en grunnleggende passordstyrker. Interessert? La oss komme i gang med en gang! Her er en demonstrasjon av hva vi prøver å bygge i dag:
Designmål
Våre designmål for denne spesifikke funksjonaliteten er relativt liten.
Gi visuell tilbakemelding til brukeren angående styrken av passordet.
Tilbakemeldingen må være øyeblikkelig. Dette betyr ikke å klikke på en knapp for å teste styrken.
Utløseren kan utgjøre noen av tastaturhendelsene. Jeg har valgt keyup siden dette er det mest hensiktsmessige for vårt spesifikke behov.
For den visuelle tilbakemeldingen er det svært manglende å endre teksten alene, mens den er nyttig. Jeg har valgt å også endre bakgrunnsfarger for å trekke brukerens oppmerksomhet til dette.
Gi ytterligere kvantifiserbar tilbakemelding slik at brukeren vet i hvilke avdelinger passordet mangler styrke og hvordan det kan forbedres.
Nå som vi har tilstrekkelig funnet ut våre behov, kan vi gå videre til neste stadium.
Handlingsplan
Vi skal nå avgjøre rekkefølgen til de enkelte trinnene som må gjøres.
Koble hendelseshandleren til keyup hendelsen til inngangsruten.
La hendelseshandleren sjekke inngangen, men deleger alt annet til individuelle hjelpemetoder.
Hjælpermetodene skal ta seg av å analysere innspillingen og analysere den, beregne kompleksiteten og skrive ut resultatene.
Pass på at hendelseshandleren bare brenner av hjelpemetoder hvis lengden på inngangen er større enn forventet minimum, slik at du ikke kaster bort CPU-sykluser på ugyldige oppføringer.
Retur kontroll til hendelsen handler i tilfelle noe annet må gjøres.
Algoritmen
For å holde dette skrive opp kortfattet og tilnærmet, har jeg bestemt meg for å gå med en veldig grunnleggende algoritme. Algoritmen analyserer strengen, gir bonuser for ekstra lengde, tilstedeværelse av tall, symboler og store bokstaver og straffer for bare bokstaver eller tall bare innganger. Vi kommer ikke til å se på matchende vanlige mønstre eller sjekke innspillet mot en ordbok siden dette ikke er omfattet av artikkelen. Hvis renter toppene, kan jeg gjøre en artikkel om dette i fremtiden.
Først sjekker vi lengden på inngangsstrengen. Hvis den er større enn minimumslengden, gi den en basispoengsum på 50. Ellers gjør den 0. Neste iterate gjennom hvert tegn på strengen, og kontroller om det er et symbol, tall eller stor bokstav. I så fall gjør det et notat.
Sjekk deretter hvor mange ekstra tegn strengen har, over det anbefalte minimumet og gi en bonus for hvert tegn. Gi også en bonus hvis strengen inneholder en kombinasjon av store bokstaver, tall og symboler eller alle tre. Gi også en bonus for hver sin tilstedeværelse.
Sjekk om strengen bare inneholder enten små bokstaver eller tall og i så fall straffe.
Legg opp alle tallene og bestem styrken til passordet tilsvarende.
Det er lang og kort av algoritmen. Det går ikke veldig suave, men det fanger mange dårlige passord. Du forstår dette bedre når vi ser det i kode.
Core Markup
HTML-oppslaget på demo siden ser slik ut:
Enkel Password Strength Checker - av Siddharth for NetTuts
Lag en enkel passord styrke sjekker
av Siddharth for de nydelige folkene på Net Tuts
Skriv inn passordet ditt for å få visuell tilbakemelding angående styrken av passordet ditt.
Jeg forsikrer deg, jeg stjeler ikke passordene dine. Skjemaet sendes ikke inn. Du kan se gjennom kilden hvis du er mistenksom. :)
Skriv inn en tilfeldig verdi
Fordeling av poeng
Se bort fra alle vanlige oppslag. Legg merke til inngangselementet med en ID på inputPassword, div-elementet med en ID av kompleksitet som viser kompleksiteten til passordet og div-elementet med en ID på detaljer som viser sammenbrudd av poeng.
Vi har også inkludert jQuery-biblioteket og vår egen skriptfil. Ekstra poeng hvis du setter pris på navnet på skriptfilen vår.
Bare kjeleplate CSS for layout og typografi. Vi har en rekke klasser nederst for hver individuelle styrkeverdier. Vi legger dem til elementene når det trengs.
JavaScript-implementering
Nå som vi har et solid rammeverk og noen grunnleggende styling på plass, kan vi begynne å kode opp den nødvendige funksjonaliteten. Legg merke til at vi utnytter jQuery mye. Du er velkommen til å koble til Googles CDN om nødvendig.
Variabler og hendelseshåndtering
Siden mange antall jonglering skal fortsette, trenger vi en rekke variabler for å holde verdiene. Siden er en demo og ikke produksjonskode, hadde jeg bestemt meg for å erklære variablene som globale og få tilgang til dem gjennom hjelpemetoder i stedet for å erklære dem internt og deretter sende dem til funksjonene.
var strPassword; var charPassword; var kompleksitet = $ ("# kompleksitet"); var minPasswordLength = 8; var baseScore = 0, score = 0; var num = ; num.Excess = 0; num.Upper = 0; num.Numbers = 0; num.Symboler = 0; var bonus = ; bonus.Excess = 3; bonus.Upper = 4; bonus.Numbers = 5; bonus.Symboler = 5; bonus.Combo = 0; bonus.FlatLower = 0; bonus.FlatNumber = 0;
De variable navnene er ganske standardpris, men jeg vil likevel gi en oversikt. strPassword har inntastingsboksens verdi, charPassword er et array som holder hvert tegn av strengen, kompleksitet inneholder en referanse til div-elementet. Vi definerer også minimum passordlengde, poengsum og basispoeng.
Vi lager en rask hash for å holde antall ekstra tegn, store bokstaver, tall og symboler. Vi gjør det samme for bonusene. De num hash holder antall tegn mens bonus hash har bonusmultiplikatorene. Du kan bare lage individuelle variabler, men jeg synes dette ser renere ut.
Ikke glem å koble hendelseshandleren til arrangementet.
$ ("# inputPassword"). bind ("keyup", checkVal);
checkVal er hendelsesbehandleren som vi skal lage på bare en liten bit.
Vi kontrollerer først lengden på inngangsstrengen. Hvis den er større enn eller lik den minste angitte lengden, kan vi fortsette. Vi setter basestillingen til 50 og kaller hjelpemetoder som tar seg av å analysere strengen og beregne det er kompleksitet.
Hvis det er mindre enn forventet lengde, satte vi bare grunnpoengene til 0.
Vi kaller da outputResult funksjon som tar seg av å gi mening om de beregnede beregningene. Vi ser hvordan det fungerer senere nedenfor.
Analyserer inngangen
funksjonanalyseString () for (i = 0; i
Dette kan se litt komplisert ut, men jeg lover deg, det er bare på grunn av de vanlige uttrykkene. La oss gå over kodedelen av en del.
Først må vi finne ut sammensetningen av strengen i spørsmålet. Som i må vi finne ut om strengen inneholder store bokstaver, tall eller symboler, og i så fall hvor mange av dem er til stede. Med dette i bakhodet, vier det gjennom tegnserien og kontrollerer hvert tegn for å se sin type. De kamp Metoden lar oss matche en streng mot et vanlig uttrykk. Hvis du er ny til vanlig uttrykk, foreslår jeg at du leser Vasilis store artikkel her.
Deretter har vi bestemt forskjellen mellom lengden på inntastingsstrengen og den angitte minimumslengden av passordet. Dette gir oss overskytende antall tegn å leke med.
Vi ser etter om strengen har store bokstaver, tall og symboler. Hvis ja, gi en bonus. Vi sjekker også for å se om den har kombinasjoner av to av dem og gi en mindre bonus hvis det er tilfelle.
Til slutt ser vi om en streng er flat: om den bare inneholder små bokstaver eller bare tall. Vi sjekker dette med et regulært uttrykk og i så fall straffer passordet for denne øvelsen.
Bare et enkelt tillegg. Vi legger til basispoenget til produktet av antall overskytende tegn, og det er multiplikator. Samme for store bokstaver, tall og symboler. Vi legger da til en bonus for kombinasjoner, hvis det er til stede, og legg til straffer hvis strengen er flat.
Oppdaterer brukergrensesnittet
Nå som alle beregningene ligger bak oss, kan vi oppdatere brukergrensesnittet for å gjenspeile endringene. Her er hver av statene.
funksjon outputResult () if ($ ("# inputPassword") .val () == "") complexity.html ("Skriv inn en tilfeldig verdi"). addClass ("standard"); annet hvis (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 && score<75) complexity.html("Average!").addClass("strong"); else if (score>= 75 && score<100) complexity.html("Strong!").addClass("stronger"); else if (score>= 100) complexity.html ("Secure!"). AddClass ("strongest");
Ikke noe fancy her, men vi vil gå gjennom det linje for linje.
Vi kontrollerer først for å se om inngangen er tom. Hvis så, endre resultatets tekst og legg til en misligholde klassen for å endre den er bakgrunnsfargen tilbake til den er original grå.
Hvis det er mindre enn minimums angitt lengde, endrer vi teksten tilsvarende og legger til en svak klasse så det er bakgrunnen er rød. Vi gjør det samme hvis totalpoengsummen er mindre enn 50, men endrer teksten til svak.
Etter hvert som poenget øker, endrer vi teksten tilsvarende og legger til de nødvendige klassene. Du er velkommen til å endre basispoengene for hver vurdering. Jeg legger bare inn uvitenlige verdier for å få demoen til å gå.
Oppdaterer detaljert sammenbrudd
Med hovedresultatet oppdatert, kan vi se på oppdateringen av statistikken nå.
funksjon outputResult () // Forrige kode $ ("# detaljer"). html ("Basisscore:"+ baseScore +""+" Lengde Bonus:"+ (num.Excess * bonus.Excess) +" ["+ num.Excess +" x "+ bonus.Excess +"] "+" Øvre tilfelle bonus:"+ (num.Upper * bonus.Upper) +" ["+ num.Upper +" x "+ bonus.Upper +"] "+" Nummerbonus: "+ (num.Numbers * bonus.Numbers) +" ["+ num.Numbers +" x "+ bonus.Numbers +"]"+" Symbol Bonus: "+ (num.Symbols * bonus.Symbols) +" ["+ num.Symbols +" x "+ bonus.Symboler +"]"+" Kombinasjonsbonus: "+ bonus.Combo +""+" Bunnlager bare straff: "+ bonus.FlatLower +""+" Nummer bare straff: "+ bonus.FlatNumber +""+" Total poengsum: "+ score +""
Denne delen er ikke så forvirrende som den ser ut. La meg forklare.
I stedet for bare å oppdatere de enkelte verdiene for de detaljerte resultatene har jeg tatt til å bare oppdatere den komplette HTML-verdien til containeren. Jeg vet at det kommer til å være tregt når et antall av disse boksene legger opp, men får tilgang til hvert element enkeltvis, og deretter oppdateres det verdien for en liten demo, syntes å være ganske motproduktiv. Så løp med meg her.
Dette er akkurat som å injisere vanlig HTML i et element bortsett fra at vi har plassert et par variabler inne for å aktivere detaljene som skal oppdateres øyeblikkelig. Hver verdi får en verdi klasse for å gjøre det modig. Vi viser også antall spesialtegn og det er multipler slik at brukeren kan måle hvilke elementer som får mer vekt.
Noen få tweaks
På dette tidspunktet er det 2 feil som dukker opp.
Hvis du skriver inn et langt passord og sletter tekstboksen, endres bakgrunnsfargerne ikke tilbake.
I samme scenario, oppdaterer detaljene til punktene ikke oppdateres som det skal.
Vi takler dem en etter én.
For den første feilen, skyldes grunnårsaken at vi ikke fjerner alle de andre klassene. Dette ville ikke være et problem hvis de sistnevnte klassene har forrang over andre. Dessverre er det ikke slik. Her er en rask løsning.
functionComputer () if $ ("# inputPassword") .val () == "") complexity.html ("Skriv inn en tilfeldig verdi"). removeClass ("svak sterk sterkeste sterkeste"). "); annet hvis (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 && score<75) complexity.html("Average!").removeClass("stronger strongest").addClass("strong"); else if (score>= 75 && score<100) complexity.html("Strong!").removeClass("strongest").addClass("stronger"); else if (score>= 100) complexity.html ("Secure!"). AddClass ("strongest"); // Detaljer oppdateringskode
Du spør sannsynligvis hvorfor vi ikke fjerner hver klasse her. Svaret er enkelt: Vi utnytter en av de viktigste egenskapene til CSS: gripende. Hvis du merker ordrenes rekkefølge for hver klasse i CSS-filen, vil du legge merke til det misligholde oppstår den første og sterkeste kommer det siste som betyr at hvis et element har sterkeste klassen vil det overstyre eventuelle endringer som er gjort av noen klasse over den. Så vi må bare fjerne klasser som forekommer under den aktuelle klassen. For eksempel, for et element å ha sterk, vi må fjerne sterkere og sterkeste klasser.
Årsaken til at den andre feilen er, skyldes at individene variabler ikke tilbakestilles når en ny hendelse oppstår. De overfører også til neste arrangement. For å fikse dette, oppretter vi en rask funksjon som reinitialiserer alle relevante variabler og legger til den checkVal hendelseshåndterer så det kalles hver gang tekstboksen er oppdatert.
Hvis du har spilt rundt med demoen litt, vil du legge merke til det Pa $$ W0rd $ dukker opp som et sikkert passord, mens det faktisk blir ødelagt ganske snart. Dette skyldes enkelheten i vår algoritme her. Vi ser ikke etter tegnutskiftninger. Eller vanlige passord eller mønstre for den saks skyld. Å gjøre slike ting vil øke vanskeligheten ved denne opplæringen mens du reduserer dens tilnærming, begge som jeg ikke vil ha for denne spesielle skrive opp.
Dette er ment som et grunnleggende passord styrke sjekker. Hvis du trenger å bøte opp det, kan du sannsynligvis legge til et par mer vanlige uttrykk for å sjekke etter mønstre og karakterrepetisjon og deretter justere resultatene tilsvarende.
Ser innspillingen opp mot en ordliste er virkelig ute av denne artikkelen, og det vil kreve at enten en stor ordbok lastes ned til klientsiden eller koble den opp til et serversidesystem for å gjøre det. Igjen ønsket jeg virkelig å unngå dem begge denne gangen.
Konklusjon
Og der har du det: Hvordan legge til en brukervennlig funksjonalitet, muligheten til å la brukeren vite styrken til et passord han nettopp har skrevet inn, til prosjektene dine. Forhåpentligvis har du funnet denne opplæringen interessant, og dette har vært nyttig for deg. Du er velkommen til å bruke denne koden på andre steder i prosjektene dine og chime her hvis du har problemer.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding!
Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.
Share
Accentsconagua
