Erstellen Sie einen sicheren Passwortgenerator mit Javascript-js-Tutorial-php.cn

Erstellen Sie einen sicheren Passwortgenerator mit Javascript

Barbara Streisand

Freigeben： 2025-01-15 20:40:44

Original

986 Leute haben es durchsucht

Build a Secure Password Generator with Javascript

In der heutigen digitalen Welt ist ein sicheres Passwort für den Schutz Ihrer Online-Konten von entscheidender Bedeutung. In diesem Beitrag werde ich Sie durch die Erstellung eines einfachen, aber effektiven Passwortgenerators mit JavaScript führen. Mit diesem Generator können Benutzer ihr Passwort anpassen, indem sie verschiedene Kriterien wie Länge und die Einbeziehung von Großbuchstaben, Kleinbuchstaben, Zahlen und Symbolen auswählen.

Die Code-Aufschlüsselung

HTML-Struktur
Bevor wir uns mit dem JavaScript-Code befassen, richten wir die HTML-Struktur für unseren Passwortgenerator ein. Hier ist eine grundlegende Vorlage:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passwortgenerator</title>
    <link rel="stylesheet" href="styles.css"> <!-- Fügen Sie Ihre CSS-Datei hinzu -->
</head>
<Körper>
    <h1>Passwortgenerator</h1>
    <div>
        <label for="lengthSlider">Passwortlänge: <span>



<h2>
  
  
  JavaScript-Funktionalität
</h2>

<p>Jetzt tauchen wir ein in den JavaScript-Code, der unseren Passwortgenerator antreibt.<br>
</p><pre class="brush:php;toolbar:false">Funktion genericPassword() {
    const length = document.getElementById('lengthSlider').value;
    const Uppercase = document.getElementById('uppercase').checked;
    const Lowercase = document.getElementById('lowercase').checked;
    const zahlen = document.getElementById('numbers').checked;
    const symbole = document.getElementById('symbols').checked;

    let chars = '';
    if (uppercase) chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (Kleinbuchstaben) chars = 'abcdefghijklmnopqrstuvwxyz';
    if (numbers) chars = '0123456789';
    if (symbols) chars = '!@#$%^&*()_ -=[]{}|;:,.<>?';

    let passwort = '';
    for (sei i = 0; i < Länge; i ) {
        Passwort = chars.charAt(Math.floor(secureRandom() * chars.length));
    }

    document.getElementById('passwordOutput').value = Passwort;
}

Funktion secureRandom() {
    versuchen {
        const array = new Uint8Array(8);
        const buf = window.crypto.getRandomValues(array);
        const offset = Math.random() < 0,5 ? 0: buf.length - 4;
        const dataView = new DataView(buf.buffer);
        const intVal = dataView.getUint32(offset, true); // Bytes in eine vorzeichenlose 32-Bit-Ganzzahl konvertieren
        const normalized = intVal / (Math.pow(2, 32) - 1); // Skalieren auf [0, 1)
        Rendite normalisiert;
    } Catch (Fehler) {
        console.error("Fehler beim Generieren einer sicheren Zufallszahl:", Fehler);
        Wurffehler; // Nach Bedarf erneut werfen oder handhaben
    }
}

Funktion copyPassword() {
    const passwortOutput = document.getElementById('passwordOutput');
    passwortOutput.select();
    document.execCommand('copy');

    // Visuelles Feedback hinzufügen
    const btn = document.querySelector('.fa-copy').parentElement;
    btn.innerHTML = '<i>



<h2>
  
  
  Erläuterung der wichtigsten Funktionen
</h2>

<p>generatePassword(): Diese Funktion sammelt Benutzereinstellungen von der Benutzeroberfläche und erstellt einen Zeichensatz basierend auf den ausgewählten Optionen. Anschließend wird ein zufälliges Passwort generiert, indem Zeichen aus diesem Satz ausgewählt werden.<br>
secureRandom(): Diese Funktion nutzt die Web Crypto API, um sichere Zufallszahlen zu generieren und stellt so sicher, dass die generierten Passwörter nicht nur zufällig, sondern auch sicher sind.<br>
copyPassword(): Mit dieser Funktion können Benutzer das generierte Passwort einfach in ihre Zwischenablage kopieren und erhalten ein visuelles Feedback zur Bestätigung der Aktion.<br>
Ereignis-Listener für Längenschieberegler: Dadurch wird die angezeigte Passwortlänge dynamisch aktualisiert, wenn der Benutzer den Schieberegler anpasst.</p>

<p>Das Endprodukt: https://1limx.com/password-generator</p>

<h2>
  
  
  Abschluss
</h2>

<p>Mit nur wenigen Codezeilen können Sie einen robusten und anpassbaren Passwortgenerator erstellen, der Ihre Online-Sicherheit erhöht. Fühlen Sie sich frei, dieses Projekt zu erweitern, indem Sie weitere Funktionen hinzufügen oder die Benutzeroberfläche verbessern! Viel Spaß beim Codieren! Wenn Sie Fragen oder Verbesserungsvorschläge haben, können Sie unten gerne einen Kommentar hinterlassen!</p>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie einen sicheren Passwortgenerator mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!