Maison >interface Web >js tutoriel >Créez un générateur de mots de passe sécurisé avec Javascript

Créez un générateur de mots de passe sécurisé avec Javascript

Barbara Streisandoriginal: 2025-01-15 20:40:44993parcourir

Build a Secure Password Generator with Javascript

Dans le monde numérique d'aujourd'hui, disposer d'un mot de passe fort est crucial pour protéger vos comptes en ligne. Dans cet article, je vais vous guider dans la création d'un générateur de mots de passe simple mais efficace à l'aide de JavaScript. Ce générateur permet aux utilisateurs de personnaliser leur mot de passe en sélectionnant divers critères tels que la longueur et l'inclusion de lettres majuscules, de lettres minuscules, de chiffres et de symboles.

La panne du code

Structure HTML
Avant de plonger dans le code JavaScript, configurons la structure HTML de notre générateur de mots de passe. Voici un modèle de base :

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de mot de passe</title>
    <link rel="stylesheet" href="styles.css"> <!-- Ajoutez votre fichier CSS -->
&Lt;/tête>
<corps>
    <h1>Générateur de mot de passe</h1>
    <div>
        <label for="lengthSlider"> Longueur du mot de passe : <span>



<h2>
  
  
  Fonctionnalité JavaScript
</h2>

<p>Plongeons-nous maintenant dans le code JavaScript qui alimente notre générateur de mots de passe.<br>
</p><pre class="brush:php;toolbar:false">fonction generatePassword() {
    const length = document.getElementById('lengthSlider').value;
    const majuscule = document.getElementById('uppercase').checked;
    const lowercase = document.getElementById('lowercase').checked;
    const numéros = document.getElementById('numbers').checked;
    const symboles = document.getElementById('symboles').checked;

    laissez chars = '';
    if (majuscules) caractères = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (minuscules) caractères = 'abcdefghijklmnopqrstuvwxyz';
    if (nombres) caractères = '0123456789';
    if (symboles) chars = '!@#$%^&*()_ -=[]{}|;:,.<>?';

    laissez le mot de passe = '';
    pour (soit i = 0; i < longueur; i ) {
        mot de passe = chars.charAt(Math.floor(secureRandom() * chars.length));
    }

    document.getElementById('passwordOutput').value = mot de passe;
}

fonction secureRandom() {
    essayer {
        tableau const = nouveau 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); // Convertit les octets en un entier 32 bits non signé
        const normalisé = intVal / (Math.pow(2, 32) - 1); // Échelle à [0, 1)
        retour normalisé ;
    } attraper (erreur) {
        console.error("Erreur lors de la génération d'un nombre aléatoire sécurisé :", erreur);
        erreur de lancement ; // Relance ou gère selon les besoins
    }
}

fonction copyPassword() {
    const passwordOutput = document.getElementById('passwordOutput');
    mot de passeOutput.select();
    document.execCommand('copie');

    // Ajouter un retour visuel
    const btn = document.querySelector('.fa-copy').parentElement;
    btn.innerHTML = '<i>



<h2>
  
  
  Explication des fonctions clés
</h2>

<p>generatePassword() : Cette fonction collecte les préférences utilisateur de l'interface utilisateur et construit un jeu de caractères basé sur les options sélectionnées. Il génère ensuite un mot de passe aléatoire en sélectionnant des caractères dans cet ensemble.<br>
secureRandom() : Cette fonction utilise l'API Web Crypto pour générer des nombres aléatoires sécurisés, garantissant que les mots de passe générés sont non seulement aléatoires mais également sécurisés.<br>
copyPassword() : Cette fonction permet aux utilisateurs de copier facilement le mot de passe généré dans leur presse-papiers et fournit un retour visuel pour confirmer l'action.<br>
Écouteur d'événements pour le curseur de longueur : ceci met à jour dynamiquement la longueur du mot de passe affiché à mesure que l'utilisateur ajuste le curseur.</p>

<p>Le produit final : https://1limx.com/password-generator</p>

<h2>
  
  
  Conclusion
</h2>

<p>Avec seulement quelques lignes de code, vous pouvez créer un générateur de mots de passe robuste et personnalisable qui améliore votre sécurité en ligne. N'hésitez pas à développer ce projet en ajoutant plus de fonctionnalités ou en améliorant l'interface utilisateur ! Bon codage ! Si vous avez des questions ou des suggestions d'amélioration, n'hésitez pas à laisser un commentaire ci-dessous !</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Impression spécialisée de ballons, drapeaux, étiquettes de fruitsArticle suivant：Impression spécialisée de ballons, drapeaux, étiquettes de fruits

Articles Liés

Voir plus