Erstellen Sie eine einfache Überprüfung der Kennwortstärke

() translation by (you can also view the original English article)

Sofortiges Feedback zu geben, ist derzeit angesagt. Warum beschränken Sie sich darauf, Benutzernamen und E-Mail-Adressen zu überprüfen? Warum nicht erweitern, um schnelles visuelles Feedback über die Stärke des vom Benutzer eingegebenen Passworts zu geben? Heute betrachten wir, wie Sie mithilfe der jQuery-Bibliothek, regulärer Ausdrücke und eines einfachen Algorithmus eine einfache Überprüfung der Kennwortstärke erstellen.

Ein Wort vom Autor

Wie die meisten Sicherheitsexperten Ihnen sagen werden, ist der Benutzer immer das schwächste Glied. Die sichersten Systeme sind anfällig, wenn ein Benutzer ein äußerst schlecht beratenes Kennwort wählt. Ein aktueller Trend besteht vielleicht darin, dem Benutzer ein schnelles Feedback zur Kennwortstärke zu geben, damit er das Kennwort erweitern oder ändern kann, um es sicherer zu machen.

Heute werden wir die jQuery-Bibliothek, eine Reihe regulärer Ausdrücke und einen sehr einfachen Algorithmus verwenden, um eine grundlegende Überprüfung der Kennwortstärke zu erstellen. Interessiert? Fangen wir gleich an! Hier ist eine Demo von dem, was wir heute versuchen zu bauen:

Designziele

Unsere Designziele für diese spezifische Funktionalität sind relativ klein.

Geben Sie dem Benutzer visuelles Feedback zur Stärke seines Passworts.
Die Rückmeldung muss sofort erfolgen. Das bedeutet, dass Sie nicht auf eine Schaltfläche klicken müssen, um die Stärke zu testen.
Das Triggerereignis kann eines der Tastaturereignisse sein. Ich habe Keyup gewählt, weil dies für unseren speziellen Bedarf am besten geeignet ist.
Für das visuelle Feedback fehlt es stark, den Text allein zu ändern, obwohl er nützlich ist. Ich habe mich entschieden, auch die Hintergrundfarben zu ändern, um den Benutzer darauf aufmerksam zu machen.
Geben Sie zusätzliches quantifizierbares Feedback, damit der Benutzer weiß, in welchen Abteilungen das Kennwort nicht sicher genug ist und wie es verbessert werden kann.

Nachdem wir unsere Bedürfnisse hinreichend herausgefunden haben, können wir mit der nächsten Stufe fortfahren.

Aktionsplan

Wir werden nun die Reihenfolge der einzelnen Schritte festlegen, die ausgeführt werden müssen.

Verbinden Sie den Ereignishandler mit dem Keyup-Ereignis des Eingabefelds.
Lassen Sie den Ereignishandler die Eingabe überprüfen, delegieren Sie jedoch alles andere an einzelne Hilfsmethoden.
Die Hilfsmethoden sollten sich darum kümmern, die Eingabe zu analysieren und zu analysieren, die Komplexität zu berechnen und die Ergebnisse auszudrucken.
Stellen Sie sicher, dass die Ereignishandler die Hilfsmethoden nur dann auslösen, wenn die Länge der Eingabe größer als das erwartete Minimum ist, um keine CPU-Zyklen für ungültige Einträge zu verschwenden.
Geben Sie die Steuerung an den Ereignishandler zurück, falls noch etwas getan werden muss.

Der Algorithmus

Um dieses Schreiben kurz und zugänglich zu halten, habe ich mich für einen sehr einfachen Algorithmus entschieden. Der Algorithmus analysiert die Zeichenfolge, gibt Boni für zusätzliche Länge, Vorhandensein von Zahlen, Symbolen und Großbuchstaben sowie Strafen für Eingaben nur für Buchstaben oder Zahlen. Wir werden uns nicht mit übereinstimmenden allgemeinen Mustern oder der Überprüfung der Eingabe anhand eines Wörterbuchs befassen, da dies außerhalb des Geltungsbereichs des Artikels liegt. Wenn das Interesse steigt, kann ich in Zukunft einen Artikel darüber schreiben.

Zuerst überprüfen wir die Länge der Eingabezeichenfolge. Wenn es größer als die Mindestlänge ist, geben Sie ihm eine Basispunktzahl von 50. Andernfalls machen Sie es 0. Durchlaufen Sie als Nächstes jedes Zeichen der Zeichenfolge und prüfen Sie, ob es sich um ein Symbol, eine Zahl oder einen Großbuchstaben handelt. Wenn ja, notieren Sie es sich.

Überprüfen Sie dann, wie viele zusätzliche Zeichen die Zeichenfolge über dem empfohlenen Minimum hat, und gewähren Sie für jedes Zeichen einen Bonus. 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 auch einen Bonus für die Anwesenheit jedes Einzelnen.

Überprüfen Sie, ob die Zeichenfolge nur Kleinbuchstaben oder Zahlen enthält, und bestrafen Sie sie gegebenenfalls.

Addieren Sie alle Zahlen und bestimmen Sie die Stärke des Passworts entsprechend.

Das ist das Lange und Kurze des Algorithmus. Es wird nicht besonders höflich, aber es fängt viele schlechte Passwörter ab. Sie werden dies besser verstehen, wenn wir es im Code sehen.

Core Markup

Das HTML-Markup der Demoseite sieht folgendermaßen aus:

<!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. The form doesn't not submit. You can look through the source if you are suspicious. :)</p> 

<div class="block">
<input id="inputPassword"/>
<div id="complexity" class="default">Enter a random value</div>
</div>

<div class="block">
<div id="results" class="default">Breakdown of points</div>
<div id="details"></div>
</div>

</div>
</body>
</html>

Ignorieren Sie alle üblichen Markups. Beachten Sie das Eingabeelement mit der ID inputPassword, das div-Element mit einer ID der Komplexität, die die Komplexität des Kennworts anzeigt, und das div-Element mit einer ID von Details, die die Aufschlüsselung der Punkte anzeigt.

Wir haben auch die jQuery-Bibliothek und unsere eigene Skriptdatei hinzugefügt. Zusätzliche Punkte, wenn Sie den Namen unserer Skriptdatei schätzen.

CSS-Styling

body{
	font-family: "Lucida Grande", "Verdana", sans-serif;
}

h1{
	font-size: 30px;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 18px;
	padding: 0;
	margin: 0 5px 30px 0;
}

input{
	width: 288px;
	height: 30px;
	margin: 50px 0 0 0;
	padding: 3px 5px;
	font-size: 22px;
	font-family: "Lucida Grande", "Verdana", sans-serif;
}

#container{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
}

.block{
	width: 300px;
	margin: 0 auto 0 auto;
}

#complexity, #results{
	width: 300px;
	padding: 3px 0;
	height: 20px;
	color: #000;
	font-size: 14px;
	text-align: center;
}

#results{
	margin: 30px 0 20px 0;
}

.default{background-color: #CCC;}
.weak{background-color: #FF5353;}
.strong{background-color: #FAD054;}
.stronger{background-color: #93C9F4; }
.strongest{background-color: #B6FF6C;}

span.value{
	font-weight:bold;
	float: right;
}

Nur Kesselplatte CSS für Layouts und Typografie. Wir haben unten eine Reihe von Klassen für jede einzelne Stärkebewertung. Wir werden sie bei Bedarf zu den Elementen hinzufügen.

JavaScript-Implementierung

Nachdem wir ein solides Framework und einige grundlegende Stile haben, können wir mit dem Codieren der erforderlichen Funktionen beginnen. Beachten Sie, dass wir jQuery in großem Umfang nutzen. Sie können bei Bedarf auch auf das CDN von Google verlinken.

Variablen- und Ereignisbehandlung

Da viel Zahlenjonglieren stattfinden wird, benötigen wir eine Reihe von Variablen, um die Werte zu halten. Da es sich um eine Demo und nicht um Produktionscode handelt, habe ich beschlossen, die Variablen als global zu deklarieren und über die Hilfsmethoden auf sie zuzugreifen, anstatt sie intern zu deklarieren und dann an die Funktionen zu übergeben.

	var strPassword;
	var charPassword;
	var complexity = $("#complexity");
	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.Numbers = 5;
	bonus.Symbols = 5;
	bonus.Combo = 0; 
	bonus.FlatLower = 0;
	bonus.FlatNumber = 0;

Die Variablennamen sind ziemlich normal, aber ich würde trotzdem einen Überblick geben. strPassword enthält den Wert des Eingabefelds, charPassword ist ein Array, das jedes Zeichen der Zeichenfolge enthält, Komplexität enthält einen Verweis auf das div-Element. Wir definieren auch die minimale Passwortlänge, Punktzahl und die Basispunktzahl.

Wir erstellen einen schnellen Hash, um die Anzahl der zusätzlichen Zeichen, Großbuchstaben, Zahlen und Symbole zu speichern. Wir machen das gleiche für die Boni. Der num-Hash enthält die Anzahl der Zeichen, während der Bonus-Hash die Bonusmultiplikatoren enthält. Sie können nur einzelne Variablen erstellen, aber ich denke, das sieht sauberer aus.

Vergessen Sie nicht, den Ereignishandler an das Ereignis anzuschließen.

1	$("#inputPassword").bind("keyup", checkVal);

checkVal ist der Event-Handler, den wir in Kürze erstellen werden.

Der Ereignishandler

function checkVal()
{
	if (charPassword.length >= minPasswordLength)
	{
		baseScore = 50;	
		analyzeString();	
		calcComplexity();		
	}
	else
	{
		baseScore = 0;
	}
	
	outputResult();
}

Wir überprüfen zuerst die Länge der Eingabezeichenfolge. Wenn es größer oder gleich der angegebenen Mindestlänge ist, können wir fortfahren. Wir setzen den Basiswert auf 50 und rufen die Hilfsmethoden auf, die sich um die Analyse des Strings und die Berechnung seiner Komplexität kümmern.

Wenn es weniger als die erwartete Länge ist, setzen wir einfach die Basispunktzahl auf 0.

Wir rufen dann die Funktion outputResult auf, die dafür sorgt, dass die berechneten Berechnungen sinnvoll sind. Wir werden später sehen, wie es funktioniert.

Eingabe analysieren

function analyzeString ()
{	
	for (i=0; i<charPassword.length;i++)
	{
		if (charPassword[i].match(/[A-Z]/g)) {num.Upper++;}
		if (charPassword[i].match(/[0-9]/g)) {num.Numbers++;}
		if (charPassword[i].match(/(.*[!,@,#,$,%,^,&,*,?,_,~])/)) {num.Symbols++;} 
	}
	
	num.Excess = charPassword.length - minPasswordLength;
	
	if (num.Upper && num.Numbers && num.Symbols)
	{
		bonus.Combo = 25; 
	}

	else if ((num.Upper && num.Numbers) || (num.Upper && num.Symbols) || (num.Numbers && num.Symbols))
	{
		bonus.Combo = 15; 
	}
	
	if (strPassword.match(/^[\sa-z]+$/))
	{ 
		bonus.FlatLower = -15;
	}
	
	if (strPassword.match(/^[\s0-9]+$/))
	{ 
		bonus.FlatNumber = -35;
	}
}

Das sieht vielleicht etwas kompliziert aus, aber ich verspreche Ihnen, es liegt nur an den regulären Ausdrücken. Lassen Sie uns den Code Teil für Teil durchgehen.

Zuerst müssen wir die Zusammensetzung der fraglichen Zeichenfolge herausfinden. Wie in müssen wir herausfinden, ob die Zeichenfolge Großbuchstaben und Symbolzahlen enthält und wenn ja, wie viele davon vorhanden sind. In diesem Sinne durchlaufen wir das Zeichenarray und überprüfen jedes Zeichen auf seinen Typ. Mit der Match-Methode können wir eine Zeichenfolge mit einem regulären Ausdruck abgleichen. Wenn Sie neu im regulären Ausdruck sind, empfehle ich Ihnen, Vasilis großartigen Artikel hier zu lesen.

Als nächstes haben wir den Unterschied zwischen der Länge der Eingabezeichenfolge und der angegebenen Mindestlänge des Passworts ermittelt. Dies gibt uns die überschüssige Anzahl von Charakteren, mit denen wir herumspielen können.

Wir prü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 davon gibt, und gewähren in diesem Fall einen kleineren Bonus.

Schließlich prüfen wir, ob eine Zeichenfolge flach ist: ob sie nur Kleinbuchstaben oder nur Zahlen enthält. Wir überprüfen dies mit einem regulären Ausdruck und bestrafen in diesem Fall das Passwort für diese Praxis.

Berechnen Sie die Komplexität

function calcComplexity()
{
	score = baseScore + (num.Excess*bonus.Excess) + (num.Upper*bonus.Upper) + (num.Numbers*bonus.Numbers) + 
(num.Symbols*bonus.Symbols) + bonus.Combo + bonus.FlatLower + bonus.FlatNumber;	
}

Nur eine einfache Ergänzung. Wir addieren die Basispunktzahl zum Produkt aus der Anzahl der überschüssigen Zeichen und dem Multiplikator. Gleiches gilt für Großbuchstaben, Zahlen und Symbole. Wir fügen dann einen Bonus für Kombinationen hinzu, falls vorhanden, und fügen Strafen hinzu, wenn die Saite flach ist.

Aktualisieren der Benutzeroberfläche

Nachdem die gesamte Berechnung hinter uns liegt, können wir die Benutzeroberfläche aktualisieren, um die Änderungen widerzuspiegeln. Hier sind die einzelnen Staaten.

function outputResult()
{
	if ($("#inputPassword").val()== "")
	{ 
		complexity.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 && 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");
	}
}

Nichts Besonderes hier, aber wir werden es Zeile für Zeile durchgehen.

Wir prüfen zunächst, ob die Eingabe leer ist. Wenn ja, ändern Sie den Text des Ergebnisses und fügen Sie eine default klasse hinzu, um die Hintergrundfarbe wieder in das ursprüngliche Grau zu ändern.

Wenn es weniger als die angegebene Mindestlänge ist, ändern wir den Text entsprechend und fügen eine weak Klasse hinzu, sodass der Hintergrund rot ist. Wir machen dasselbe, wenn die Gesamtpunktzahl weniger als 50 beträgt, ändern aber den Text in weak.

Mit zunehmender Punktzahl ändern wir den Text entsprechend und fügen die erforderlichen Klassen hinzu. Sie können die Basiswerte für jede Bewertung jederzeit ändern. Ich habe nur unwissenschaftliche Werte eingegeben, um die Demo in Gang zu bringen.

Aktualisieren der detaillierten Aufschlüsselung

Nachdem das Hauptergebnis aktualisiert wurde, können wir uns jetzt die Aktualisierung der Statistiken ansehen.

function outputResult()
{
	// Previous Code
    
    $("#details").html("Base Score :<span class=\"value\">" + baseScore  + "</span>"
				  + "<br />Length Bonus :<span class=\"value\">" + (num.Excess*bonus.Excess) + " ["+num.Excess+"x"+bonus.Excess+"]</span> " 
				  + "<br />Upper case bonus :<span class=\"value\">" + (num.Upper*bonus.Upper) + " ["+num.Upper+"x"+bonus.Upper+"]</span> "
				  + "<br />Number Bonus :<span class=\"value\"> " + (num.Numbers*bonus.Numbers) + " ["+num.Numbers+"x"+bonus.Numbers+"]</span>"
				  + "<br />Symbol Bonus :<span class=\"value\"> " + (num.Symbols*bonus.Symbols) + " ["+num.Symbols+"x"+bonus.Symbols+"]</span>"
				  + "<br />Combination Bonus :<span class=\"value\"> " + bonus.Combo + "</span>"
				  + "<br />Lower case only penalty :<span class=\"value\"> " + bonus.FlatLower + "</span>"
				  + "<br />Numbers only penalty :<span class=\"value\"> " + bonus.FlatNumber + "</span>"
				  + "<br />Total Score:<span class=\"value\"> " + score  + "</span>" 
}

Dieser Teil ist nicht so verwirrend wie es aussieht. Lassen Sie mich erklären.

Anstatt nur die einzelnen Werte für die detaillierten Ergebnisse zu aktualisieren, habe ich nur den vollständigen HTML-Wert des Containers aktualisiert. Ich weiß, dass es träge wird, wenn sich einige dieser Felder summieren, aber es schien ziemlich kontraproduktiv zu sein, auf jedes Element einzeln zuzugreifen und dann den Wert für eine winzige Demo zu aktualisieren. Also lauf mit mir hierher.

Dies ist wie das Einfügen von normalem HTML in ein Element, mit der Ausnahme, dass wir einige Variablen darin platziert haben, damit die Details sofort aktualisiert werden können. Jeder Wert erhält eine value klasse, um ihn fett zu machen. Wir zeigen auch die Anzahl der Sonderzeichen und den Multiplikator an, damit der Benutzer beurteilen kann, welche Elemente mehr Gewicht erhalten.

Ein paar Verbesserungen

Zu diesem Zeitpunkt treten 2 Fehler auf.

Wenn Sie ein langes Passwort eingeben und dann das Textfeld löschen, ändern sich die Hintergrundfarben nicht zurück.
Im selben Szenario werden die Details der Punkte nicht ordnungsgemäß aktualisiert.

Wir werden sie einzeln angehen.

Für den ersten Fehler ist die Hauptursache die Tatsache, dass wir nicht alle anderen Klassen entfernen. Dies wäre kein Problem, wenn die zuletzt hinzugefügten Klassen Vorrang vor anderen haben. Leider ist es nicht so. Hier ist eine schnelle Lösung.

function outputResult()
{
	if ($("#inputPassword").val()== "")
	{ complexity.html("Enter a random value").removeClass("weak strong stronger strongest").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 && 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");}

	// Details updating code
}

Sie fragen sich wahrscheinlich, warum wir hier nicht jede Klasse entfernen. Die Antwort ist einfach: Wir nutzen eines der Hauptmerkmale von CSS: cascading. Wenn Sie die Deklarationsreihenfolge jeder Klasse in der CSS-Datei notieren, werden Sie feststellen, dass die Standardeinstellung die erste und die stärkste die letzte ist. Wenn ein Element die stärkste Klasse hat, werden alle Änderungen überschrieben, die von einer darüber liegenden Klasse vorgenommen wurden. Wir müssen also nur Klassen entfernen, die unterhalb der entsprechenden Klasse auftreten. Damit ein Element beispielsweise stark ist, müssen wir die stärkeren und stärksten Klassen entfernen.

Der Grund für den zweiten Fehler liegt in der Tatsache, dass die einzelnen Variablen nicht zurückgesetzt werden, wenn ein neues Ereignis auftritt. Sie übertragen sich auch auf die nächste Veranstaltung. Um dies zu beheben, erstellen wir eine Schnellfunktion, die alle relevanten Variablen neu initialisiert und sie dem checkVal-Ereignishandler hinzufügt, sodass sie jedes Mal aufgerufen wird, wenn der Text des Eingabefelds aktualisiert wird.

function 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;
}

function checkVal()
{
	init();
    
	// Other code
}

Einschränkungen

Limitation with the current implementation

Wenn Sie ein bisschen mit der Demo herumgespielt haben, werden Sie feststellen, dass Pa$$W0rd$ als sicheres Passwort auftaucht, obwohl es ziemlich bald kaputt sein wird. Dies liegt an der Einfachheit unseres Algorithmus hier. Wir suchen nicht nach Zeichenersetzungen. Oder gängige Passwörter oder Muster für diese Angelegenheit. Solche Dinge zu tun würde die Schwierigkeit dieses Tutorials erhöhen und gleichzeitig seine Zugänglichkeit verringern, was ich für diesen speziellen Artikel nicht wollte.

Dies ist als grundlegende Überprüfung der Kennwortstärke gedacht. Wenn Sie es verbessern müssen, können Sie wahrscheinlich ein paar weitere reguläre Ausdrücke hinzufügen, um nach Mustern und Zeichenwiederholungen zu suchen und die Ergebnisse dann entsprechend abzustimmen.

Das Nachschlagen der Eingabe anhand eines Wörterbuchs fällt nicht in den Geltungsbereich dieses Artikels und erfordert entweder ein umfangreiches Wörterbuch, das auf die Clientseite heruntergeladen wird, oder das Anschließen an ein serverseitiges System, um dies zu tun. Auch dieses Mal wollte ich beide unbedingt vermeiden.

Schlussfolgerung

Und da haben Sie es: wie Sie Ihren Projekten eine benutzerfreundliche Funktionalität hinzufügen, die Fähigkeit, dem Benutzer die Stärke eines soeben eingegebenen Passworts mitzuteilen. Hoffentlich haben Sie dieses Tutorial interessant gefunden und es hat Ihnen geholfen. Sie können diesen Code auch an anderer Stelle in Ihren Projekten wiederverwenden und hier einschalten, wenn Sie auf Schwierigkeiten stoßen.

Fragen? Schöne Dinge zu sagen? Kritik? Klicken Sie auf den Kommentarbereich und hinterlassen Sie mir einen Kommentar. Viel Spaß beim Codieren!

Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im internet zu bekommen.