Vérificateur de force de mot de passe à l'aide du didacticiel JavaScript

Dans ce tutoriel, vous apprendrez à Créer un vérificateur de force de mot de passe en utilisant JavaScript. Le tutoriel vise à fournir à l’étudiant IT/CS et aux nouveaux programmeurs une référence pour améliorer leurs connaissances JS et leurs capacités de programmation. Ici, le tutoriel étape par étape avec des extraits sur la façon de créer le vérificateur de force de mot de passe est fourni. Le fichier zip du code source est également fourni et peut être téléchargé gratuitement.

Qu’est-ce que la force du mot de passe ?

Fiabilité du mot de passe mesure l’efficacité d’un mot de passe pour empêcher les attaquants de deviner facilement votre mot de passe. La longueur, la complexité et la nature imprévisible d’un mot de passe contribuent à sa force.

Comment créer un vérificateur de force de mot de passe en utilisant JS ?

En créant un Vérificateur de force de mot de passe en utilisant JavaScript, utilisez le match méthode de vérification des caractères du mot de passe. La match La méthode récupère le résultat de la correspondance de la chaîne avec l’expression régulière.

Étapes pour créer un vérificateur de force de mot de passe à l’aide de JS ?

Créez un élément de mot de passe sur votre page.
Dans votre script JS, définissez des variables pour la longueur minimale des caractères majuscules, minuscules, chiffres et symboles pour la force du mot de passe fort et moyen.
Ensuite, identifiez si la valeur du mot de passe respecte la longueur minimale de caractères d’un mot de passe fort ou moyen. Sinon, la force du mot de passe est faible.

Exemple

Voici les scripts d’un simple Vérificateur de force de mot de passe utilisant Javascript.

Interface

L’extrait suivant est un HTML fichier contenant le script des éléments qui affiche la saisie du mot de passe et la barre de progression qui affiche la force du mot de passe saisi. Le script ci-dessous charge le Bootstrap Framework à l’aide de CDN. Enregistrez le fichier sous index.html.

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 
    <script src=" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
        html, body{
            height: 100%;
            width: 100%;
        }
        body{
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
        }
        body>nav, body>footer{
            flex-shrink: 1;
        }
        body>main{
            flex-shrink: 1;
            flex-grow: 1;
            overflow: auto;
            margin: 1em 0;
            display: flex;
            align-items: center;
        }
<body style="background:#EEF1FF">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background:#7FBCD2">
            <a class="navbar-brand" href="./">Password Strength Checker - JS</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
 
    <main class="container-fluid">
        <div class="col-lg-5 col-md-7 col-sm-12 col-xs-12 mx-auto">
            <h2 class="text-center">Check Password Strength using JavaScript</h2>
 
            <div class="card mt-3 rounded-0">
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                            <label for="password" class="form-label">Password</label>
                            <input type="text" class="form-control rounded-0" id="password">
                            <div class="progress" id="password_strength">
                                <div class="progress-bar" role="progressbar" aria-label="Password Strenght"  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </main>
<footer class="container-fluid py-3" style="background:#7FBCD2; color:#fff">
    <div class="container-fluid my-2">
        <div class="text-center">
            <b>Password Strength Checker - JS &copy; 2022</b>
</footer>

Javascript

L’extrait suivant est un Javascript fichier contenant le script qui vérifie la force du mot de passe. Le dossier est connu sous le nom password_strength_check.js et ce fichier est chargé dans le index.html.

var password = document.getElementById('password')
var strengthBar = document.getElementById('password_strength')
/**
    * Strong password values
    */
let strong_pass = {
    lowerCase: 8,
    upperCase: 3,
    digits: 2,
    symbols: 2,
}
 
/**
    * medium_password
    */
let medium_pass = {
    lowerCase: 5,
    upperCase: 1,
    digits: 1,
    symbols: 1,
}
 
/**
    * Patterns
    */
let lowerCase = /[a-z]/g;
let upperCase = /[A-Z]/g;
let digits = /[0-9]/g;
let symbols = /[^a-zA-Z-0-9]/g;
 
 
password.addEventListener('input', function(){
    let pass = this.value
    // Lower Case Characters length in Password
    var lc_len = pass.match(lowerCase) !== null ? pass.match(lowerCase).length : ; 
    // Upper Case Characters length in Password
    var uc_len = pass.match(upperCase) !== null ? pass.match(upperCase).length : ; 
    // Digit Characters length in Password
    var d_len = pass.match(digits) !== null ? pass.match(digits).length : ; 
    // Symbols length in Password
    var sym_len = pass.match(symbols) !== null ? pass.match(symbols).length : ; 
 
 
    // console.log(`lowerCase:`+lc_len)
    // console.log(`upperCase:`+uc_len)
    // console.log(`digits:`+d_len)
    // console.log(`symbols:`+sym_len)
 
    var strength,strength_text, strengthClass;
 
    if(lc_len >= strong_pass.lowerCase && uc_len >= strong_pass.upperCase && d_len >= strong_pass.digits && sym_len >= strong_pass.symbols){
        // Password is strong
        strength = 100;
        strength_text = "Password is Strong!!!";
        strengthClass = "bg-primary"
    }else if(lc_len >= medium_pass.lowerCase && uc_len >= medium_pass.upperCase && d_len >= medium_pass.digits && sym_len >= medium_pass.symbols){
        // Password is in Medium Strength
        strength = 66.66;
        strength_text = "Password is Good!!!";
        strengthClass = "bg-success"
    }else if(pass.length > ){
        // Password is Weak
        strength = 33.33;
        strengthClass = "bg-danger"
        strength_text = "Password is Weak!!!";
    }else{
        // Password is null
        strength = ;
        strengthClass = ""
        strength_text = ""
    }
 
    //Progress Bar
    var strengthBar_progress = strengthBar.querySelector(".progress-bar")
 
    // Remove Progress Bar Background color ClassName
    strengthBar_progress.classList.remove('bg-primary')
    strengthBar_progress.classList.remove('bg-success')
    strengthBar_progress.classList.remove('bg-danger')
 
    // Add Progress Bar Background color ClassName if available
    if(strengthClass !== "")
        strengthBar_progress.classList.add(strengthClass);
 
    // Set the Progress Bar Filled Width
    strengthBar_progress.style.width = strength + "%"
    // Set the Progress Bar Value Now Attribute
    strengthBar_progress.setAttribute('aria-valuenow', strength)
 
    // Set the Progress Bar Text
    if(strength_text !== "")
        strengthBar.querySelector(".progress-bar").innerText = strength_text;
 
})

Voilà! Vous pouvez maintenant tester le DEMO Application de vérification de la force du mot de passe de votre côté.

Instantanés

Voici les images suivantes du résultat de l’application Password Strength Checker.

Mot de passe faible

Mot de passe moyen

Mot de passe fort

C’est ça! J’ai également fourni le fichier zip complet du code source sur ce site Web. Vous pouvez le télécharger en cliquant sur le bouton de téléchargement situé sous cet article.

VIDÉO DÉMO

C’est la fin de ce tutoriel. J’espère Cela Vérificateur de force de mot de passe à l’aide du didacticiel JavaScript vous aide avec ce que vous recherchez et vous trouverez cela utile pour les projets actuels et futurs.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.