بررسی امنیت رمز عبور با جاوا اسکریپت

بررسی امنیت رمز عبور با جاوا اسکریپت

امنیت رمز عبور جاوااسکریپت – حتما در خیلی از وب سایت در زمان ثبت نام شاهد این بوده اید که میزان سختی و امنیت رمزعبور تان به صورت real time نمایش داده می شود .

با کمک این آموزش میزان سختی رمز عبور را نمایش می دهیم که به طور کلی :

  1. خیلی ضعیف
  2. ضعیف
  3. متوسط
  4. عالی

را دارا خواهد بود .

البته از این کتابخانه هم کمک می گیریم .

دموی سختی رمز عبور جاوااسکریپت

امنیت رمز عبور جاوااسکریپت


ساختار HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="container">
        <a class="text-center" id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی
            برنامه نویسان</a>

        <div class="wrapper col-6 m-auto">
            <form action="">

                <label for="password" class="mb-2">پسورد</label>
                <input type="password" class="form-control mb-3" id="password" dir="ltr" placeholder="******">

                <div id="password-monitor" class="bg-secondary text-center shadow d-block p-2 rounded mb-3">_</div>

            </form>
        </div>
    </div>
    <script src="static/js/lib/password-checker.js"></script>
    <script src="static/js/app.js"></script>
</body>

</html>


اسکریپت app.js

window.addEventListener("load" , function(){

    function translate (data){
        let targetTranslate = "";

        switch(data.value){
            case "Too weak":
                targetTranslate = "خیلی ضعیف";
            break;

            case "Weak":
                targetTranslate = "ضعیف";
            break;

            case "Medium":
                targetTranslate = "بدک نیست";
            break;

            case "Strong":
                targetTranslate = "حرف نداره";
            break;

            default:
                targetTranslate = "؟؟؟";
            break;
        }   

        data.value = targetTranslate;

        return data;
    }

    function checkStrongPassword(passwordCharacters){
        return translate(passwordStrength.passwordStrength(passwordCharacters));
    }

    function passwordCheckHandler(){
        const thisElement = this;
        const result = checkStrongPassword(this.value);

        const valueTargets = {
            "0" : "bg-danger too-bad-password",
            "1" : "bg-warning bad-password",
            "2" : "bg-primary text-white good-password",
            "3" : "bg-success text-white great-password",
        }

        const cssClass = valueTargets[result.id];

        passwordMonitor.setAttribute("class" , cssClass +" text-center shadow d-block p-2 rounded mb-3");
        passwordMonitor.textContent = result.value;
    }


    const password = document.getElementById("password");
    const passwordMonitor = document.getElementById("password-monitor");
    
    password.addEventListener("keyup" , passwordCheckHandler);

});


دانلود سورس امنیت رمز عبور js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us