🔐 Programmiere einen Passwort-Generator für deine Webseite

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 ich in meinem Passwort Generator verwende. Du kannst den Generator auf deine eigene Webseite einbinden oder für private Zwecke direkt im Browser ausführen.

Wie funktioniert ein Passwort-Generator?

Eine Methode, um einen Passwort-Generator zu programmieren ist die Verwendung von mehreren Strings, die nach Zeichen-Typen erstellt werden. Diese Typen wären zum Beispiel Buchstaben, Zahlen und Sonderzeichen.

Für meinen Generator habe ich die Buchstaben zusätzlich in Vokale und Konsonanten getrennt, um ein leicht merkbares Passwort erstellen zu können. Die Vokale und Konsonanten werden abwechselnd verwendet. Dadurch kann man sich das Passwort besser merken.

Die verschiedenen Strings werden alle in einen großen Zeichen-Haufen zusammen gesetzt. Je nach dem wie häufig ein Zeichen-Typ vorkommen soll, können diese Strings häufiger zum Resultat hinzugefügt werden.

Sollen zum Beispiel mehr Buchstaben als Zahlen hinzugefügt werden, können die Buchstaben-Strings zwei Mal oder noch häufiger hinterlegt werden.

Nachdem der String generiert wurde, kann er mit der JavaScript-Funktion shuffle() gemischt werden. Dieser String wird dann nur noch auf die gewünschte Länge mit der Funktion slice() getrimmt und in einem Textfeld ausgegeben.

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 Passwort-Generieren 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.

See the Pen Passwort Generator in JavaScript by Codepalm (@Codepalm) on CodePen.

Da ich kein PHP in meinem Passwort Generator verwende, 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 meinen Beitrag Sichere Passwörter erstellen lesen. Hier erkläre ich detailliert, auf was man bei der Passwort-Erstellung für Accounts achten sollte und wie du deine Zugänge am besten Dokumentierst.