cari

Rumah >hujung hadapan web >tutorial js >Bina Penjana Kata Laluan Selamat dengan Javascript

Bina Penjana Kata Laluan Selamat dengan Javascript

Barbara Streisand
Barbara Streisandasal
2025-01-15 20:40:44987semak imbas

Build a Secure Password Generator with Javascript

Dalam dunia digital hari ini, mempunyai kata laluan yang kukuh adalah penting untuk melindungi akaun dalam talian anda. Dalam siaran ini, saya akan membimbing anda membuat penjana kata laluan yang mudah tetapi berkesan menggunakan JavaScript. Penjana ini membolehkan pengguna menyesuaikan kata laluan mereka dengan memilih pelbagai kriteria seperti panjang dan kemasukan huruf besar, huruf kecil, nombor dan simbol.

Pecahan Kod

Struktur HTML
Sebelum menyelami kod JavaScript, mari sediakan struktur HTML untuk penjana kata laluan kami. Berikut ialah templat asas:

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penjana Kata Laluan</title>
    <pautan rel="stylesheet" href="styles.css"> <!-- Tambah fail CSS anda -->
</head>
<badan>
    <h1>Penjana Kata Laluan</h1>
    <div>
        <label for="lengthSlider">Panjang Kata Laluan: <span>



<h2>
  
  
  Fungsi JavaScript
</h2>

<p>Sekarang, mari kita selami kod JavaScript yang memberi kuasa kepada penjana kata laluan kami.<br>
</p><pre class="brush:php;toolbar:false">fungsi generatePassword() {
    panjang const = document.getElementById('lengthSlider').value;
    huruf besar const = document.getElementById('huruf besar').ditanda;
    huruf kecil const = document.getElementById('huruf kecil').ditanda;
    nombor const = document.getElementById('nombor').ditanda;
    simbol const = document.getElementById('simbol').ditanda;

    biarkan aksara = '';
    jika (huruf besar) aksara = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    jika (huruf kecil) aksara = 'abcdefghijklmnopqrstuvwxyz';
    jika (nombor) aksara = '0123456789';
    jika (simbol) aksara = '!@#$%^&*()_ -=[]{}|;:,.<>?';

    biarkan kata laluan = '';
    untuk (biar i = 0; i < panjang; i ) {
        kata laluan = chars.charAt(Math.floor(secureRandom() * chars.length));
    }

    document.getElementById('passwordOutput').value = kata laluan;
}

fungsi secureRandom() {
    cuba {
        const array = new Uint8Array(8);
        const buf = window.crypto.getRandomValues(array);
        const offset = Math.random() < 0.5 ? 0 : buf.panjang - 4;
        const dataView = new DataView(buf.buffer);
        const intVal = dataView.getUint32(offset, true); // Tukar bait kepada integer 32-bit yang tidak ditandatangani
        const dinormalisasi = intVal / (Math.pow(2, 32) - 1); // Skala kepada [0, 1)
        kembali normal;
    } tangkap (ralat) {
        console.error("Ralat menjana nombor rawak selamat:", ralat);
        ralat lontaran; // Lempar semula atau kendalikan mengikut keperluan
    }
}

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

    // Tambah maklum balas visual
    const btn = document.querySelector('.fa-copy').parentElement;
    btn.innerHTML = '<i>



<h2>
  
  
  Penjelasan Fungsi Utama
</h2>

<p>generatePassword(): Fungsi ini mengumpul pilihan pengguna daripada UI dan membina set aksara berdasarkan pilihan yang dipilih. Ia kemudian menjana kata laluan rawak dengan memilih aksara daripada set ini.<br>
secureRandom(): Fungsi ini menggunakan Web Crypto API untuk menjana nombor rawak selamat, memastikan kata laluan yang dijana bukan sahaja rawak tetapi juga selamat.<br>
copyPassword(): Fungsi ini membolehkan pengguna menyalin kata laluan yang dijana dengan mudah ke papan keratan mereka dan memberikan maklum balas visual untuk mengesahkan tindakan.<br>
Event Listener for Length Slider: Ini mengemas kini panjang kata laluan yang dipaparkan secara dinamik semasa pengguna melaraskan slider.</p>

<p>Produk akhir: https://1limx.com/password-generator</p>

<h2>
  
  
  Kesimpulan
</h2>

<p>Dengan hanya beberapa baris kod, anda boleh mencipta penjana kata laluan yang mantap dan boleh disesuaikan yang meningkatkan keselamatan dalam talian anda. Jangan ragu untuk mengembangkan projek ini dengan menambahkan lebih banyak ciri atau menambah baik antara muka pengguna! Selamat mengekod! Jika anda mempunyai sebarang soalan atau cadangan untuk penambahbaikan, sila tinggalkan komen di bawah!</p>

Atas ialah kandungan terperinci Bina Penjana Kata Laluan Selamat dengan Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Integer Array if for select try throw catch Error math const using Chars Length Interface Event copy console number function this href innerHTML viewport https ui
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Percetakan khusus belon, bendera, label buah-buahanArtikel seterusnya：Percetakan khusus belon, bendera, label buah-buahan

Artikel berkaitan

Lihat lagi