unForastero

<Webworking>


Anzeigen der Passwort-Stärke

Samstag, 22 November 2014       







es ist kein Geheimnis, das User ihre Passwörter leichtsinnigerweise viel zu einfach wählen. Sei es aus Bequemlichkeit oder Vergesslichkeit. Zeit also, mit jQuery das Passwort zu prüfen und die Stärke direkt on the fly zu ermitteln und anzuzeigen.

In dem wir dem User vor Augen halten, wie leicht oder stark sein gewähltes Passwort ist, helfen wir gleichzeitig, ein sichereres Passwort zu wählen. Was wir im ersten Schritt brauchen ist ein Formularfeld, im zweiten Schritt brauchen wir einen Prüfmechanismus, der die Usereingabe überwacht und letztendlich dann mit unseren Vorgaben abstimmt.

<form>
<label for="password">dein Passwort:</label>
<input name="password" id="password" value="" type="password"/>
<div id="resultat"></div>
</form>

Um die Usereingabe abzufangen, nutzen wir die jQuery-Funktion keyup(), jedesmal wenn eine Taste gedrückt und wieder lsogelassen wird, schlägt die Funktion zu. Wir schnappen uns, was im Feld drin steht und prüfen mit einer nächsten Funktion, wie sicher das Passwort ist, das Ergebnis geben wir dann an den Div mit der ID resultat zurück.

$(document).ready(function() {
$('#password').keyup(function(){
$('#resultat').html(pruefStaerke($('#password').val()))
});
});

Nun zum Salz in der Suppe. Wir müssen uns überlegen, was ein gutes Passwort ausmacht. Gleichzeitig muss unsere Funktion pruefStaerke() beurteilen können, ob das Kriterium erfüllt ist.

Als erstes formulieren wir ein KO-Kriterium. Eine Mindestanzahl an Zeichen muss das Passwort haben, sonst bringt es keine Sicherheit. Wenn das Passwort mindestens 6 Zeichen lang ist, ist das erste Sicherheitsmerkmal erfüllt. Danach geht es dann mit der eigentlichen Prüfung los, die Funktion weist einer internen Variablen einen Wert +1 zu, für jedes Kriterium, das als bestanden gilt. Gut ist zum Beispiel, wenn Groß- und Kleinbuchstaben verwendet werden, ein Sonderzeichen dabei ist oder sogar 2, nicht nur Buchstaben auch Zahlen verwendet werden.

Sind 2 solcher Kriterien erfüllt, ist das Passwort nicht mehr schlecht sondern gut, sind es 3 ist es ein starkes Passwort. Je nachdem, welchen Wert unsere interne Variable hat, geben wir einen anderen Text aus und können auch noch eine CSS-Klasse definieren, um auch farbig zu kennzeichen, wie gut oder schlecht das Passwort ist.

<style>
.kurz{color:#900000;}
.schwach{color: #ffa500;}
.gut{color:#000;}
.stark{color:#009000;}
</style>

Und nun die Kern-Funktion


function pruefStaerke(password){


var staerke = 0; // interner Wert

if (password.length < 6) {
$('#resultat').removeClass();
$('#resultat').addClass('kurz');
return 'Passwort zu kurz';
}

if(password.length > 7) staerke += 1;
if(password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) staerke += 1;
if(password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) staerke += 1;
if(password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) staerke += 1;


if (staerke < 2 ) {
$('#resultat').removeClass();
$('#resultat').addClass('schwach');
return 'schwach';
} else if (staerke == 2 ) {
$('#resultat').removeClass();
$('#resultat').addClass('gut');
return 'Gut';
} else {
$('#resultat').removeClass();
$('#resultat').addClass('stark');
return 'Stark';
}

}

Um die Länge zu prüfen, nutzen wir die Javascriptfunktion length(), die einfach durch Punkt getrennt hinter die Variable gesetzt wird. Danach nutzen wir match() und prüfen ob der reguläre Ausdruck auf die übergebene Syntax passt. removeClass() und addClass() entfernen bzw. vergeben die CSS-Klasse.



diese Seite teilen:




Kommentare












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz