, opbygge et enkelt kodeord styrke checker,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, at øjeblikkelig feedback er i lige nu.hvorfor begrænse sig til kontrol af brugernavne og e - mail - adresse?hvorfor ikke udvide dette til at yde hurtig visuel feedback om styrken af kodeordet brugeren har tilført?i dag skal vi se på, hvordan der kan skabes en enkelt kodeord styrke checker ved hjælp af jquery bibliotek, regelmæssige udtryk og en simpel algoritme.,,,,,, et ord fra forfatter, som de fleste sikkerhed eksperter vil sige, at de bruger altid er det svageste led.den mest sikre systemer er sårbar, når brugeren vælger en særdeles uklogt kodeord.med det i tankerne, den seneste tendens synes at være at yde hurtig feedback til brugeren med hensyn til styrken af den kode, så brugeren kan udvide eller ændre kodeord for at gøre det mere sikkert.,,, i dag skal vi bruge jquery bibliotek, en flok regelmæssigt udtryk og en meget enkel algoritme til at skabe en grundlæggende kodeord styrke checker.interesseret?lad os komme i gang!her er en prøve på det, vi forsøger at bygge i dag:,,, konstruktion, mål, udformning mål for denne specifikke funktioner, er relativt små., give visuel feedback til brugeren med hensyn til styrken af deres kodeord. tilbagemeldingerne skal øjeblikkelig.det betyder ikke at trykke på en knap til at afprøve styrken. den udløsende begivenhed, kan være en af de vigtigste bord begivenheder.jeg har valgt keyup, da dette er den mest hensigtsmæssige for vores særlige behov. for visuel feedback, ændring af teksten være nyttige, men mangler.jeg har valgt at ændre baggrunden farver for at gøre brugeren opmærksom på dette, give yderligere kvantificerbare feedback, så brugeren ved, hvilke afdelinger kodeordet mangler styrke, og hvordan det kan blive bedre, når vi nu har tilstrækkeligt ved vores behov, kan vi gå videre til næste etape. handlingsplan, vil vi nu træffe afgørelse om placering af de enkelte skridt, der skal gøres.,, sæt tilfælde fører til, keyup, tilfælde af input - æske. lad tilfælde fører kontrol med input, men overlade alt andet til individuelle hjælper metoder. de hjælper metoder bør tage sig af parsing input og analysere det, databehandling, kompleksiteten og trykning af resultater, sørge for, at den begivenhed. de skyder fra hjælper metoder, hvis varigheden af input, er større end den forventede mindste, således at der ikke spilde cpu cyklusser på ugyldig angivelser. tilbage til tilfælde fører kontrol i tilfælde af noget andet, der skal gøres.,, algoritmen,,, med henblik på at skrive kortfattet og ansvarlige, og jeg har besluttet at gå med en grundlæggende algoritme.algoritmen analyserer den snor, giver bonus for ekstra længde, tilstedeværelse af numre, symboler og versalerne og sanktioner ved brev eller nummer kun input.skal vi ikke se på tilsvarende fælles mønstre eller kontrollere input mod en ordbog, da dette er ude af artiklens anvendelsesområde.hvis renter toppe, jeg kan lave en artikel om dette i fremtiden. vi først kontrollere varigheden af input - snor.hvis det er større end den mindste længde, giv det en base - score på 50.andre gør det 0.næste iterate gennem hver karakter af en snor og se, om det er et symbol, nummer eller øvre sag brev.hvis ja, noter det.tjek, hvor mange ekstra tegn snoren, over den anbefalede minimum og give en bonus for hver art.også give en bonus, hvis den streng, der indeholder en kombination af bogstaver, tal og symboler eller alle tre.give en bonus for hver tilstedeværelse., kontrollere, om den snor kun indeholder små bogstaver eller tal, og i givet fald straffe.og tilføje alle de numre og beslutte, at styrke kodeordet i overensstemmelse hermed. det er den lange og korte algoritmen.det er ikke meget godt, men den fanger en masse dårlige passwords.du vil forstå det bedre, når vi ser det i kode. de centrale avance, html forhøjelse af demo - side ser ud til at være så:, <!DOCTYPE html> <html lang="en-GB"> <head> <title>Simple Password Strength Checker - by Siddharth for NetTuts</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/mocha.js"></script> </head> <body> <div id="container"> <h1>Create a simple password strength checker</h1> <h2 class="bolded">by Siddharth for the lovely folks at Net Tuts</h2> <p>Type in your password to get visual feedback regarding the strength of your password.</p> <p>I assure you, I am not stealing your passwords. form ikke forelægge.du kan kigge på kilden, hvis du er mistænkelig.:) < /p > < div klasse = "blokke" > < input id = "inputpassword" /> < div id = "kompliceret" klasse = "default" > træder ind i en tilfældig værdi < /div > < /div > < div klasse = "blokke" > < div id = "resultater" klasse = "default" > fordelingen af point < /div > < div id = "oplysninger" > < ///////div > < /div > < /div > < /organ > < /html > se bort fra alle de sædvanlige fortjeneste.ser de input element med et id - kort, inputpassword, div. element med et id af kompleksitet, som viser kompleksiteten af kodeordet og div element med et id, oplysninger, der viser fordelingen af punkter. vi har også medtaget de jquery biblioteks - og vores eget manuskript fil.ekstra point, hvis du sætter pris på navnet på vores manuskript fil., css - organ (font familie: "lucida grande", "verdana", uden serif;} h1 (skriftstørrelse: 30px; polstring: 0; margen: 0} h2 (skriftstørrelse: 18px; polstring: 0; margen: 0 5px 30px 0} input (bredde: 288px. højde: 30px; margen: 50px 0 0 0; polstring: 3px 5px; skriftstørrelsen: 22px; skrifttype familie: "lucida grande", "verdana", uden serif;}&#container (bredde: 820px; margen: auto; margen: auto - og fyld: 50px 0 0 0;}. blok (bredde: 300px; margen: 0 - 0 -;}&#kompleksitet,&#resultater (bredde: 300px; polstring: 3px 0. højde: 20px; farve:� skriftstørrelsen: 14px; tekst tilpasse: center;}&#resultater (margen: 30px 0 20px 0;}. misligholdelse (baggrund farve:&#ccc.}. svag {baggrund farve:&#ff5353;}. stærk {baggrund farve:&#fad054;}. stærkere {baggrund farve:]c9f4;} stærkeste {baggrund farve:&#b6ff6c;} span. værdi (font vægt: dristige og flyde: ret.}, kedel tallerken css for layout og typografi.vi har en masse klasser på bunden, for hver enkelt styrke vurderinger.vi vil gerne tilføje, at de elementer, når det er nødvendigt. javascript gennemførelse, nu hvor vi har en solid ramme og nogle grundlæggende design på plads, kan vi begynde med kodning af de krævede funktioner.gør opmærksom på, at vi gør udstrakt brug af jquery.det er gratis at link til googles cdn, hvis det er nødvendigt, variabler og begivenhed, håndtering, da en stor del af antallet at kommer til at gå på, vi har brug for en masse variabler for at holde de værdier.siden er en demo og ikke produktion kode, jeg havde besluttet at erklære de variabler, som globale og adgang til dem via hjælper metoder i stedet for at erklære dem internt, og så går det til funktioner, var strpassword, var charpassword; var kompleksitet = $("# kompleksiteten"), var minpasswordlength = 8 var basescore = 0, score = 0, var nam = {}; num.excess = 0, num.upper = 0, num.numbers = 0, num.symbols = 0, var bonus = {}; bonus.excess = 3; bonus.upper = 4; bonus.numbers = 5, bonus.symbols = 5, bonus.combo = 0, bonus.flatlower = 0, bonus.flatnumber = 0, variable navne er ret almindelige pris, men jeg ville give en redegørelse., strpassword, er input rubrik værdi, charpassword, er et system med enkelte tegn i snor, kompleksitet, indeholder en henvisning til div element.vi også definerer den minimale kodeord længde, score og basere score., skaber vi en hurtig hash for at holde antallet af ekstra tegn, der bogstaver, tal og symboler.vi gør det samme for bonus.det øjeblik, hash er antallet af personer, mens den bonus, hash er bonus multiplikatorer.du kan skabe individuelle variabler, men jeg synes, det her er renere.glem ikke at få tilfælde fører til begivenheden.$("# inputpassword"). bind ("keyup", checkval), vil vi tage dem en efter en. for det første insekt, årsagen er, at vi ikke fjerner alle andre klasser.ville det ikke være et problem, hvis de for nylig tilføjet klasser har forrang frem for andre.det er desværre ikke så.her er en hurtig, funktion outputresult() (hvis ($("# inputpassword"). val() = = ") (kompleksitet. html (" ind i en tilfældig værdi "). removeclass (" svag stærke stærkere stærkeste "). addclass (" standard ");} andre, hvis (charpassword.length < minpasswordlength) {kompleksitet. html (" mindst "+ minpasswordlength +" tegn! "). removeclass ("stærke stærkere stærkeste"). addclass ("svage");} andre, hvis (score < 50) (kompleksitet. html ("svag."). removeclass ("stærke stærkere stærkeste"). addclass ("svage");} andre, hvis (score > = 50 & & score < 75) (kompleksitet. html ("gennemsnit"). removeclass ("stærkere stærkeste"). addclass ("stærk");} andre, hvis (score > = 75 & & score < 100) (kompleksitet. html ("stærk!"). removeclass ("de stærkeste"). addclass ("stærkere");} andre, hvis (score > = 100) (kompleksitet. html ("sikker".). addclass ("de stærkeste");} //oplysninger om ajourføring af kode}, er du nok spørge, hvorfor vi ikke fjerne hver klasse her.svaret er enkelt: vi drage fordel af et af de primære egenskaber af css: kaskader,.hvis du bemærker, at angivelse af hver klasse i landestøttestrategien fil, du ser, at misligholdelse, finder sted den første og mest, er de sidste, der betyder, at hvis et element, der er den stærkeste, klasse, det vil tilsidesætte alle ændringer, der er foretaget af en klasse over det.så vi må kun fjerne klasser, som opstår under den relevante klasse.for eksempel, et element, stærk, vi er nødt til at fjerne den, stærkere og stærkeste, klasser.grunden til den anden insekt, der skyldes, at de enkelte variabler ikke nulstilles, når en ny begivenhed indtræffer.de overføres til den næste begivenhed så godt.for at ordne det, skaber vi en hurtig funktion, som reinitializes alle relevante variabler og tilføje det, checkval tilfælde handler det kaldes, hver gang de input, box tekst er ajourført, funktion init() {strpassword = $("# inputpassword"). val(); charpassword = strpassword split ("".); num.excess = 0, num.upper = 0, num.numbers = 0, num.symbols = 0, bonus.combo = 0, bonus.flatlower = 0, bonus.flatnumber = 0, basescore = 0, score = 0}, funktion checkval() {init(); //andre kode}, begrænsninger, hvis du har flirtet med demo en smule, ser du det, far w0rd $$, dukker op som et sikkert password, mens det i virkeligheden er brudt ud.det er på grund af den forenkling af vores algoritme.vi kan ikke kontrollere karakter afløsere.eller fælles kodeord eller mønstre for den sags skyld.gør sådanne ting ville øge de vanskeligheder af denne forelæsning samtidig med, at dets tilstedeværelse, som jeg ikke vil have for denne særlige skrive op.det er ment som en grundlæggende kodeord styrke checker.hvis du har brug for at få gang i det, kan du sikkert tilføje et par mere regelmæssigt udtryk for at tjekke for mønstre og karakter gentagelse og så sang resultaterne i overensstemmelse hermed. ser de input, op mod en ordbog, er virkelig ud af rækkevidden af denne artikel og ville kræve enten en enorm ordbog overført til kunden side, eller at den op til en server side system at gøre.igen, jeg ville virkelig gerne undgå dem begge to denne gang. sidst, og der har du det. hvordan til at tilføje en brugervenlig funktionalitet, evnen til at lade brugeren ved at styrke et kodeord, han er lige trådt til deres projekter.- jeg håber, du har fundet denne forelæsning interessant, og det har været godt for dig.det er gratis at genanvende denne kode andetsteds i deres projekter og bryde ind her, hvis du løber ind i vanskeligheder. spørgsmål?gode ting at sige?kritik?slog de bemærkninger, afsnit og efterlade mig en kommentar.- kodning.,, følger os på twitter, eller abonnere på nettuts + rss foder til den bedste web udvikling tutorials på nettet.,,,
