Erstellen Sie einen einfachen Kennwortstärkeprüfer

sofortiges Feedback ist das Inting im Moment. Warum beschränken Sie sich auf die Überprüfung von Benutzernamen und E -Mail -Adressen? Warum nicht dies erweitern, um ein schnelles visuelles Feedback zur Stärke des Kennworts zu geben, den der Benutzer Eingaben hat? Heute werfen wir einen Blick darauf, wie Sie einen einfachen Kennwortstärkeprüfer mit regulären Ausdrücken und einen einfachen Algorithmus erstellen. Selbst die sichersten Systeme sind anfällig, wenn ein Benutzer ein äußerst schlecht beratenes Passwort wählt. In diesem Sinne scheint der jüngste Trend dem Benutzer schnell Feedback zur Stärke des Kennworts zu geben, damit der Benutzer das Kennwort erweitern oder ändern kann, um es sicherer zu machen. Interessiert? Fangen wir sofort an! Hier ist eine Demo von dem, was wir heute zu erstellen versuchen:

Designziele Unsere Designziele für diese spezifische Funktionalität sind relativ klein. Dies bedeutet, dass Sie nicht auf eine Schaltfläche klicken, um die Stärke zu testen.

Das Triggerereignis kann eines der Tastaturereignisse sein. Ich habe das Ereignis des Eingangsfelds von KeyUp

ausgewählt. In Bezug auf die Verschwendung von CPU-Zyklen für ungültige Einträge. Der Algorithmus analysiert die Zeichenfolge, wobei Boni für zusätzliche Länge und Verwendung von Zahlen, Symbolen und Großbuchstaben sowie Strafen für Eingänge von Buchstaben oder Zahlen verwendet wird. Wir werden uns nicht ansehen, die Eingabe gegen ein Wörterbuch zu überprüfen, da dies nicht im Rahmen des Artikels liegt. Wenn es größer als die minimale Länge ist, geben Sie ihm eine Basisbewertung von 50. Ansonsten machen Sie es 0. Als nächstes durch jedes Zeichen der Zeichenfolge und prüfen Sie, ob es sich um ein Symbol, eine Nummer oder ein Großbuchstaben handelt. Wenn ja, notieren Sie sich das.

Überprüfen Sie dann, wie viele zusätzliche Zeichen die String über das empfohlene Minimum haben, und gewähren Sie einen Bonus für jeden Charakter. Gewähren Sie auch einen Bonus, wenn die Zeichenfolge eine Kombination aus Großbuchstaben, Zahlen und Symbolen oder allen drei enthält. Gewähren Sie einen Bonus für die Anwesenheit jeder von ihnen. Es wird nicht außerordentlich komplex sein, aber es wird viele schlechte Passwörter erfassen. Sie werden dies besser verstehen, sobald wir es in Code sehen. Beachten Sie das Eingabeelement mit einer ID von

div

Element mit einer ID von Div

Element mit einer ID von Div

zu Message

enthält eine Nachricht über Strafen. Wir haben es fett und rot gemacht. erforderliche Funktionalität. Beachten Sie, dass wir JQuery umfassend nutzen. Fühlen Sie sich frei, falls erforderlich mit Googles CDN zu verlinken. Da es sich um eine Demo und kein Produktionscode handelt, habe ich beschlossen, die Variablen als global zu deklarieren und über die Helfermethoden zuzugreifen, anstatt sie intern zu deklarieren und an die Funktionen weiterzugeben.

Wir haben drei Konstanten. Das erste, das als Eingabe -Element und die Num

bezeichnet wird, enthält die Anzahl der zusätzlichen Zeichen, Großbuchstaben, Zahlen und Symbole. Wir tun dasselbe für das zweite Objekt, das als Num

-Objekt bezeichnet wird, die Anzahl der Zeichen, während die Funktion checkval

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

aufgerufen wird, wenn es ein Passwort -Input -Element gibt. Wir erhalten zuerst das vom Benutzer eingegebene Kennwort und machen dann eine variable Initialisierung in der Funktion outputResult ()

, die die Berechnung der berechneten Berechnungen erfasst. Wir werden später sehen, wie es funktioniert. Wenn Sie in regulären Ausdrücken neu sind, schlage ich vor, dass Sie den großen Artikel von Vasili über regelmäßige Ausdrücke lesen. Dies gibt uns die überschüssige Anzahl von Charakteren, mit denen wir herumspielen können.

Wir überprüfen dann, ob die Zeichenfolge Großbuchstaben, Zahlen und Symbole enthält. Wenn ja, gewähren Sie einen Bonus. Wir prüfen auch, ob es Kombinationen von zwei von ihnen enthält, und gewähren einen kleineren Bonus, wenn ja. Wir überprüfen dies mit einem regulären Ausdruck und bestrafen, wenn ja, das Kennwort für diese Praxis. Wir fügen die Basisbewertung dem Produkt der Anzahl der überschüssigen Zeichen und dessen Multiplikator hinzu. Wir tun dasselbe für Großbuchstaben, Zahlen und Symbole. Wenn wir dann einen Bonus für Kombinationen hinzufügen, fügen wir Strafen hinzu, wenn die Zeichenfolge flach ist. Hier sind alle Zustände.

Wir werden hier zwei Funktionen definieren. Die Hauptfunktion namens Div

, die zu entfernenden Klassen und die zugegebenen Klassen. Die Helferfunktion, die als Standard -

-Klassel bezeichnet wird, um ihre Hintergrundfarbe wieder in ihr ursprüngliches Schwarz zu ändern. Fühlen Sie sich frei, die Basiswerte für jede Bewertung zu ändern. Ich habe gerade unwissenschaftliche Werte eingegeben, um die Demo in Gang zu bringen. Lassen Sie mich erklären. Ich weiß, dass es träge wird, wenn sich die Anzahl dieser Felder summiert, aber auf jedes Element zugreifen und dann ihren Wert für eine winzige Demo zu aktualisieren, schien eher kontraproduktiv zu sein. Laufen Sie also hier mit mir. Jeder Wert erhält eine Init ()

-Funktion ist nicht nur für die Anfangswertzuweisung nützlich. Es kümmert sich tatsächlich um das Zurücksetzen der Punktzahl und der Strafwerte nach jeder analyzestring ()

-Funktion, und Sie werden gut gehen können.

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

Mal sehen, was hier vor sich geht. Wir beginnen damit, unser gesamtes Passwort in Kleinbuchstaben zu konvertieren. Danach konvertieren wir es in eine Größe Eigenschaft, um die Anzahl der eindeutigen Zeichen zu erhalten. Wenn die Anzahl der eindeutigen Zeichen kleiner oder gleich 3 beträgt, setzen wir den Wert für die Funktion Analyzestring () , um die Wiederholungsmuster zu überprüfen. Dies wird auf Regex beruhen und prüfen, ob eine Sequenz von 3 oder mehr alphanumerischen Zeichen im Kennwort wiederholt wird. Charaktere.

Im obigen Bild können Sie sehen, dass wir das Problem der Wiederholung von Zeichensequenzen erfolgreich angepasst haben. Ich habe jedoch ein Beispiel für eine weitere Einschränkung des Kennwortstärkeprüfers gegeben.  Sie können sehen, dass

pa $$ w0rd $

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

als sicheres Passwort auftaucht, während es tatsächlich ziemlich bald unterbrochen wird. Dies liegt an der Einfachheit unseres Algorithmus hier. Wir prüfen nicht nach Charakterersatz oder gängigen Kennwörtern oder Mustern. Solche Dinge zu tun, würde die Schwierigkeit dieses Tutorials erhöhen und gleichzeitig seine Annäherung verringern. Beide, die ich für dieses spezielle Aufschreiben nicht wollte. Auch hier wollte ich beide diesmal beide vermeiden. Hoffentlich haben Sie dieses Tutorial interessant gefunden, und das war für Sie nützlich. Fühlen Sie sich frei, diesen Code an anderer Stelle in Ihren Projekten wiederzuverwenden!

test()

Dieser Beitrag wurde mit Beiträgen von Monty Shokeen aktualisiert. Monty ist ein Full-Stack-Entwickler, der auch gerne Tutorials schreibt und sich über neue JavaScript-Bibliotheken informiert.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen einfachen Kennwortstärkeprüfer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!