Sichere Deine Accounts mit starken Passwörtern

Einen Passwort Generator programmieren

 

Mit wenig Aufwand einen Browser-Basierten Passwort Generator programmieren

Es gibt viele Passwort-Generatoren im Internet, die Du verwenden kannst um Deine Accounts auf verschiedenen Plattformen abzusichern. Oftmals ist aber unbekannt, ob die Passwörter in einer fremden Datenbank gespeichert werden, wenn sie vom Server generiert werden.

Ich zeige Dir einen einfachen Algorithmus mit JavaScript, den wir unter anderem in unserem Passwort Generator verwenden. Du kannst den Generator auf Deine eigene Webseite einbinden oder für private Zwecke direkt im Browser ausführen.

 

Die HTML-Struktur des Passwort Generators

Das Grundgerüst in HTML beinhaltet alle wichtigen Felder, wie Checkboxen und Input-Felder um einige Eigenschaften für die Verwendung von verschiedenen Anwendungsgebieten zu ermöglichen.

Neben der Länge des Passworts soll gewählt werden können, ob Klein- und Großbuchstaben, sowie Nummern und Sonderzeichen in das Passwort eingefügt werden sollen. Durch einen Button soll dann zum Schluss ein Passwort aus Milliarden von Möglichkeiten generiert werden das in einem "readonly"-Textfeld eingefügt werden soll.

<!DOCTYPE html>
<html lang="de">
	
	<head>
		
		<meta charset="utf-8"/>
		
	</head>
	
	<body>
		
		<div id="password_generator">
			
			<div>
				<input type="number" id="length" name="length" value="16" placeholder="Länge des Passworts" />
			</div>
			
			<div>
				<input type="checkbox" id="low_characters" name="low_characters" checked value="on" /><label for="low_characters">Kleinbuchstaben</label>
				<input type="checkbox" id="upper_characters" name="upper_characters" checked value="on" /><label for="upper_characters">Großbuchstaben</label>
				<input type="checkbox" id="number_characters" name="number_characters" checked value="on" /><label for="number_characters">Zahlen</label>
				<input type="checkbox" id="special_characters" name="special_characters" checked value="on" /><label for="special_characters">Sonderzeichen</label>
			</div>
			
			<div>
				<input type="button" id="generate_pw" name="generate_pw" value="Passwort generieren" />
				<input type="text" id="pw_output" name="pw_output" value="" placeholder="Passwort" readonly />
			</div>
			
		</div>
		
	</body>
	
</html>
 

Du kannst durch die Verwendung von CSS und einer Umstellung der HTML-Struktur den Stil der Eingabemaske nach belieben verändern. Bitte achte darauf, dass ID's mit dem JavaScript übereinstimmen.

 

Das jQuery-Grundgerüst

Bevor wir den Algorithmus unseres Passwort Generators programmieren, benötigen wir eine Grundstruktur für unser JavaScript-Gebilde.

Um uns die Arbeit etwas zu vereinfachen verwenden wir jQuery. Durch diese Bibliothek können wir Felder besser Selektieren und die Checkboxen einfacher auslesen.

Das Grundgerüst des Programms wird von einem jQuery-NoConflict-Wrapper umschlossen, um anderen Quellcode nicht zu beeinflussen. Zudem bereiten wir die Klick-Funktion für den Button vor und die Funktionen zum Berechnen des Passworts. Der Skript-Tags wird innerhalb des <head> Bereichs eingefügt.

Zuletzt benötigen wir eine String-Erweiterung mit der wir eine Zeichenkette mischen können. Durch einen Prototype können wir eine vorhandene Klasse, wie den String um eine neue Funktion ergänzen.

<script src="/path/to/jQuery.js"></script>
<script>
	(function($) {
		$( document ).ready( function() {
			
			// Bevor die Funktion "bind" aufgerufen wird sollte man immer zuvor ein "unbind" auf das gleiche Element anwenden um zu verhindern, dass durch einen Logik-Fehler ein Doppel-Ereignis ausgelöst wird
			$( '#generate_pw' ).unbind( 'click' );
			$( '#generate_pw' ).bind( 'click', function() {
				
				// Der Aufruf unserer Funktion zum Erstellen eines Passworts wird hier eingefügt. Sollte es eine zweite Möglichkeit zum Aufruf der Funktion geben können wir die Funktion generate_password() dort ebenfalls hinterlegen.
				generate_password();
				
			});
			
			function generate_password() {
				
				// Hier werden die Einstellungen ausgelesen und das Passwort generiert
				
			}
			
			// Diese Erweiterung des Strings werden wir später beim Generieren eines Passworts benötigen. Durch die shuffle-Funktion wird ein vorhandener String gemischt
			String.prototype.shuffle = function() {
				var chars = this.split( "" );
				var length = chars.length;
				
				for( var i = length-1; i > 0; i-- ) {
					var j = Math.floor( Math.random() * ( i + 1 ) );
					var tmp = chars[ i ];
					chars[ i ] = chars[ j ];
					chars[ j ] = tmp;
				}
				return chars.join( "" );
			}
			
		});
	})(jQuery);
</script>
 
 

Die Logik des Passwort-Generators

Um den Algorithmus der Passwort-Erstellung zu programmieren ziehen wir zunächst die gesetzten Eingabefelder heran, die in jeweils einer Variable gesichert werden. Alle notwendigen Zeichen werden in unterschiedliche Strings definiert, um diese für den späteren Abruf zur Hand zu haben.

function generate_password() {
	
	var characters = 'abcdefghijklmnopqrstuvwxyz';
	var special = '|<>#+*~-_!?§$%&/()=@';
	var numbers = '0123456789';
	
	var length = $( '#length' ).val();
	var special_on = $( '#special_characters' ).prop( 'checked' );
	var number_on = $( '#number_characters' ).prop( 'checked' );
	var uppercase_on = $( '#upper_characters' ).prop( 'checked' );
	var lowercase_on = $( '#low_characters' ).prop( 'checked' );
	
}
 

Mit dieser Vorbereitung können wir uns nun um die Logik des Generators kümmern. Für die Zwischenablage und die Ausgabe verwenden wir eine Variable "result", die alle vom Benutzer geforderten Zeichen enthalten soll.

Mit ein paar Bedingungen wird geprüft, ob die jeweiligen Zeichen (Klein, Groß, Nummern, Sonderzeichen) in unserem Passwort enthalten sein sollen. In der Bedingung wird in Abhängigkeit der gewählten Passwort-Länge die entsprechenden Zeichen mehrmals in der Variable "result" verstaut.

Danach wird der String mit der Funktion shuffle() gemischt, mit der Funktion slice() auf die gewählte Passwort-Länge gekürzt und im Readonly-Feld unseres HTML-Konstrukts platziert. Aus diesem Feld kann der Benutzer dann letztendlich sein generiertes Kennwort entnehmen.

function generate_password() {
	
	[...] // Hier stehen die vorher definierten Variablen
	
	var result = '';
	if( special_on )
		for( var i=0; i < Math.ceil( length/8 ); i++ )
			result += special;
	
	if( number_on )
		for( var i=0; i < Math.ceil( length/5 ); i++ )
			result += numbers;
	
	if( uppercase_on )
		for( var i=0; i < Math.ceil( length/8 ); i++ )
			result += characters.toUpperCase();
	
	if( lowercase_on )
		for( var i=0; i < Math.ceil( length/8 ); i++ )
			result += characters.toLowerCase();
	
	result = result.shuffle().slice( 0, length );
	$( '#pw_output' ).val( result ).select();
	
}

Durch diese wenigen Zeilen Programmcode hast Du einen schlanken, aber effektiven Passwort-Generator, den Du Deinen Webseiten-Besucher anbieten kannst. Ein solcher Generator in Verbindung mit Deinem Registrierungs-Formular kann dem Benutzer als eine Einstiegs-Hilfe zu Deiner Plattform oder Blog dienen. Dadurch können höhere Absprung-Raten beim Registrieren gesenkt werden.

 

Da wir pures JavaScript in unserem Passwort Generator programmieren, findet kein Austausch zwischen dem Client und dem Server statt. Somit verhinderst Du einen potentiellen Man-in-the-Middle-Angriff.

Wenn Du weitere Interessante Tipps und Tricks rund um das Erstellen von Passwörtern lernen möchtest, kannst Du unseren Beitrag Sichere Passwörter erstellen lesen. Hier erklären wir detailliert, auf was man bei der Passwort-Erstellung für Accounts achten sollte und wie Du Deine Zugänge am besten Dokumentierst.

 

Den Passwort Generator downloaden

Du hast keine Zeit Deinen eigenen Passwort Generator zu programmieren, möchtest aber Deinen Besuchern einen Generator auf Deiner Webseite anbieten?

Hier kannst Du Dir den Quellcode zum einbinden auf Deine Webseite herunterladen:

Passwort Generator als ZIP downloaden
 

Bitte verlinke diesen Blog-Beitrag oder unseren Passwort Generator, falls Du das Skript auf Deiner Webseite verwendest.

 

Codepalm
Einen Passwort Generator programmieren
 

Das konnte dich auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Kommentare

Sei der Erste, der einen Kommentar erstellt!

 
Secured By miniOrange