Java Script, jQuery : 암호 강도 표시 기능 : 예제, 구현, 방법

Java Script, jQuery : 암호 강도 표시 기능 : 예제, 구현, 방법

 

대부분의 웹 사이트에서 보안이 가장 큰 문제이므로 웹 사이트를 최대한 안전하게 만드는 것이 중요합니다. 그러나 개발자가 코드를 사용하여 수행할 수 있는 모든 예방 조치에 비해 사용자가 강력한 암호를 가지고 있지 않다는 것입니다.

사용자가 자신의 비밀번호를 입력할 수 있는 시스템을 구축하는 경우, 비밀번호가 얼마나 안전한지 알려주는 것이 좋습니다. 이 튜토리얼에서는 사용자 암호를 확인하고 보안 수준을 알려주는 작은 JQuery 스니펫을 만들 것입니다.

 

 

 

The HTML Form

먼저 암호를 변경할 수 있는 간단한 양식을 작성하여 이 튜토리얼을 시작하겠습니다. 여기에 암호 확인 상자가 포함된 암호 입력 상자가 포함됩니다. 사용자가 암호를 잘못 입력하지 않았는지 확인합니다. 암호를 만들 때 문자를 잘못 입력했기 때문에 암호를 잘못 입력하는 경우가 많습니다.

 

<form action="" method="post">
        <p><label for="passwordInput">Password: <input type="password" id="passwordInput" name="passwordInput"></label></p>
    <p><label for="confirmPasswordInput">Confirm Password: <input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label></p>
    <p><div class="" id="passwordStrength"></div></p>
    <p><input type="submit" value="Change Password" class="btn"></p>
</form>

 

입력 텍스트 상자 사이에 있는 양식에 있는 Div는 제출 단추를 표시합니다. 여기서 현재 암호의 강도를 나타내는 메시지를 표시합니다. 

여기서 jQuery snippet을 생성하여 암호의 강도를 확인하는 작업을 수행합니다. 암호를 판단할 때 확인해야 할 것이 몇 가지 있습니다. - 암호와 확인 암호가 서로 일치하는지 확인해야 합니다.

- 비밀번호가 최소 6자 이상인지 확인해야 합니다.
- 암호가 대문자 또는 숫자 없이 6자 이상이면 약한 암호입니다.
- 비밀번호가 대문자 또는 숫자로 6자 이상이면 보통 비밀번호입니다.
- 대문자, 숫자 및 특수 문자를 가진 암호가 6자 이상이면 강력한 암호입니다.

이러한 모든 상태를 확인하고 이러한 암호에 대해 정규식이 실패할 경우 메시지를 표시하기 위해 정규식을 만들어야 합니다. 먼저 비밀번호와 비밀번호가 일치하는지 확인하고 비밀번호를 확인해야 하며, 일치하지 않을 경우 사용자가 비밀번호를 입력할 때 실수를 했으므로, 비밀번호가 잘못되었을 경우 비밀번호 강도를 확인할 필요가 없습니다. 이 두 개의 암호 필드가 일치하면 다음과 같은 정규식을 사용하여 암호의 강도를 확인할 수 있습니다.

 

// Must have capital letter, numbers and lowercase letters
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

 

 

Medium Password

// Must have either capitals and lowercase letters or lowercase and numbers
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

 

 

Weak Password

// Must be at least 6 characters long
var okRegex = new RegExp("(?=.{6,}).*", "g");

 

그런 다음 이 패턴 각각에 대해 검사를 수행하여 어떤 패턴이 통과하는지 확인합니다. 강력한 암호는 먼저 이 패턴을 확인하고, 중간 패턴을 확인하고, 약한 패턴을 확인해야 합니다. 다음은 비밀번호 보안 등급 확인의 전체 코드 조각입니다.

 

 

$(document).ready(function() {

    $('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {

        if($('#passwordInput').val() == '' && $('#confirmPasswordInput').val() == '')
        {
            $('#passwordStrength').removeClass().html('');

            return false;
        }

     if($('#passwordInput').val() != '' && $('#confirmPasswordInput').val() != '' && $('#passwordInput').val() != $('#confirmPasswordInput').val())
        {
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');
            return false;
        }

        // Must have capital letter, numbers and lowercase letters
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

        // Must have either capitals and lowercase letters or lowercase and numbers
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

        // Must be at least 6 characters long
        var okRegex = new RegExp("(?=.{6,}).*", "g");

        if (okRegex.test($(this).val()) === false) {
            // If ok regex doesn't match the password
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');

        } else if (strongRegex.test($(this).val())) {
            // If reg ex matches strong password
            $('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');
        } else if (mediumRegex.test($(this).val())) {
            // If medium password matches the reg ex
            $('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');
        } else {
            // If password is ok
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');
        }

        return true;
    });
});