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

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

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

خیلی ضعیف
ضعیف
متوسط
عالی

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

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

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

ساختار 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

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

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

ساختار HTML

اسکریپت app.js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ