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

Abonniere die Fanpage von Codepalm und verpasse keine Beitr├Ąge mehr

Codepalm auf Facebook
 
 
 
 
 
Das k├Ânnte Dir gefallen:

Das umfassende HTML5 und CSS3 Handbuch

EUR 44,90

Zu Amazon Mehr erfahren

Einstieg in Phyton - Ideal f├╝r Programmier-Anf├Ąnger

EUR 24,90

Zu Amazon Mehr erfahren

PHP7 und MySQL f├╝r Einsteiger und Profis

EUR 41,80

Zu Amazon Mehr erfahren

Kommentare

Sei der Erste, der einen Kommentar erstellt!

Schreibe einen Kommentar

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