Перевірте надійність пароля за допомогою JavaScript або jQuery та регулярних виразів (також із прикладами на стороні сервера!)

Я проводив деякі дослідження, щоб знайти хороший приклад перевірки надійності пароля, який використовує JavaScript та Регулярні вирази (Регекс). У моєму робочому додатку ми робимо повідомлення, щоб перевірити надійність пароля, і це досить незручно для наших користувачів.

Що таке Regex?

Регулярний вираз - це послідовність символів, що визначають шаблон пошуку. Зазвичай такі шаблони використовуються алгоритмами пошуку рядків для знаходити or знайти і замінити операції над рядками або для перевірки вводу. 

Ця стаття точно не навчить вас регулярних висловів. Просто знайте, що можливість використання регулярних виразів абсолютно спростить вашу розробку під час пошуку шаблонів у тексті. Важливо також зазначити, що більшість мов розробки оптимізували використання регулярних виразів ... тому замість парсингу та пошуку рядків, регулярний вираз зазвичай набагато швидший як на сервері, так і на стороні клієнта.

Я досить довго шукав в Інтернеті, перш ніж знайшов приклад деяких чудових регулярних виразів, які шукають комбінацію довжини, символів і символів. Однак код був трохи надмірним на мій смак і адаптованим для .NET. Тому я спростив код і помістив його в JavaScript. Завдяки цьому він перевіряє надійність пароля в режимі реального часу у веб-переглядачі клієнта, перш ніж опублікувати його назад… і надає користувачеві певний відгук про надійність пароля.

Введіть пароль

З кожним обведенням клавіатури пароль перевіряється на регулярний вираз, а потім користувачеві надається зворотний зв'язок у певному інтервалі під ним.

Функція надійності пароля JavaScript

Згідно з доповіддю Регулярні вирази виконати фантастичну роботу щодо мінімізації довжини коду. Ця функція Javascript перевіряє надійність пароля та перевіряє, чи легко, середньо, складно чи надзвичайно важко його вгадати. Коли людина друкує, з’являються підказки, як заохотити її бути сильнішою. Він перевіряє пароль на основі:

• довжина – Якщо довжина менше або більше 8 символів.
• Змішаний випадок – Якщо пароль містить символи верхнього та нижнього регістру.
• Номери – Якщо пароль містить цифри.
• Спеціальні символи – Якщо пароль містить спеціальні символи.

Функція відображає складність, а також деякі поради щодо подальшого посилення пароля.

function checkPasswordStrength(password) {
  // Initialize variables
  var strength = 0;
  var tips = "";

  // Check password length
  if (password.length < 8) {
    tips += "Make the password longer. ";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
    strength += 1;
  } else {
    tips += "Use both lowercase and uppercase letters. ";
  }

  // Check for numbers
  if (password.match(/\d/)) {
    strength += 1;
  } else {
    tips += "Include at least one number. ";
  }

  // Check for special characters
  if (password.match(/[^a-zA-Z\d]/)) {
    strength += 1;
  } else {
    tips += "Include at least one special character. ";
  }

  // Return results
  if (strength < 2) {
    return "Easy to guess. " + tips;
  } else if (strength === 2) {
    return "Medium difficulty. " + tips;
  } else if (strength === 3) {
    return "Difficult. " + tips;
  } else {
    return "Extremely difficult. " + tips;
  }
}

Якщо ви хочете оновити колір наконечника, це також можна зробити, оновивши код після // Return results лінія.

// Get the paragraph element
  var strengthElement = document.getElementById("passwordStrength");

  // Return results
  if (strength < 2) {
    strengthElement.textContent = "Easy to guess. " + tips;
    strengthElement.style.color = "red";
  } else if (strength === 2) {
    strengthElement.textContent = "Medium difficulty. " + tips;
    strengthElement.style.color = "orange";
  } else if (strength === 3) {
    strengthElement.textContent = "Difficult. " + tips;
    strengthElement.style.color = "black";
  } else {
    strengthElement.textContent = "Extremely difficult. " + tips;
    strengthElement.style.color = "green";
  }

Функція надійності пароля jQuery

З jQuery нам фактично не потрібно писати форму з оновленням oninput:

<form>
    <label for="password">Enter password:</label>
    <input type="password" id="password">
    <p id="password-strength"></p>
</form>

Ми також можемо змінити колір повідомлень, якщо хочемо. 

$(document).ready(function() {
    $('#password').on('input', function() {
        var password = $(this).val();
        var strength = 0;
        var tips = "";
  
        // Check password length
        if (password.length < 8) {
            tips += "Make the password longer. ";
        } else {
            strength += 1;
        }
  
        // Check for mixed case
        if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
            strength += 1;
        } else {
            tips += "Use both lowercase and uppercase letters. ";
        }
  
        // Check for numbers
        if (password.match(/\d/)) {
            strength += 1;
        } else {
            tips += "Include at least one number. ";
        }
  
        // Check for special characters
        if (password.match(/[^a-zA-Z\d]/)) {
            strength += 1;
        } else {
            tips += "Include at least one special character. ";
        }
  
        // Update the text and color based on the password strength
        var passwordStrengthElement = $('#password-strength');
        if (strength < 2) {
            passwordStrengthElement.text("Easy to guess. " + tips);
            passwordStrengthElement.css('color', 'red');
        } else if (strength === 2) {
            passwordStrengthElement.text("Medium difficulty. " + tips);
            passwordStrengthElement.css('color', 'orange');
        } else if (strength === 3) {
            passwordStrengthElement.text("Difficult. " + tips);
            passwordStrengthElement.css('color', 'black');
        } else {
            passwordStrengthElement.text("Extremely difficult. " + tips);
            passwordStrengthElement.css('color', 'green');
        }
    });
});

Затвердження вашого запиту на пароль

Важливо, щоб ви не просто перевіряли конструкцію пароля у своєму Javascript. Це дозволило б кожному, хто має засоби розробки браузера, обходити сценарій та використовувати будь-який бажаний пароль. Ви повинні ЗАВЖДИ використовувати перевірку на стороні сервера, щоб перевірити надійність пароля, перш ніж зберігати його на своїй платформі.

Функція PHP для надійності пароля

function checkPasswordStrength($password) {
  // Initialize variables
  $strength = 0;

  // Check password length
  if (strlen($password) < 8) {
    return "Easy to guess";
  } else {
    $strength += 1;
  }

  // Check for mixed case
  if (preg_match("/[a-z]/", $password) && preg_match("/[A-Z]/", $password)) {
    $strength += 1;
  }

  // Check for numbers
  if (preg_match("/\d/", $password)) {
    $strength += 1;
  }

  // Check for special characters
  if (preg_match("/[^a-zA-Z\d]/", $password)) {
    $strength += 1;
  }

  // Return strength level
  if ($strength < 2) {
    return "Easy to guess";
  } else if ($strength === 2) {
    return "Medium difficulty";
  } else if ($strength === 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

Функція Python для надійності пароля

def check_password_strength(password):
  # Initialize variables
  strength = 0

  # Check password length
  if len(password) < 8:
    return "Easy to guess"
  else:
    strength += 1

  # Check for mixed case
  if any(char.islower() for char in password) and any(char.isupper() for char in password):
    strength += 1

  # Check for numbers
  if any(char.isdigit() for char in password):
    strength += 1

  # Check for special characters
  if any(not char.isalnum() for char in password):
    strength += 1

  # Return strength level
  if strength < 2:
    return "Easy to guess"
  elif strength == 2:
    return "Medium difficulty"
  elif strength == 3:
    return "Difficult"
  else:
    return "Extremely difficult"

Функція C# для надійності пароля

public string CheckPasswordStrength(string password) {
  // Initialize variables
  int strength = 0;

  // Check password length
  if (password.Length < 8) {
    return "Easy to guess";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.Any(char.IsLower) && password.Any(char.IsUpper)) {
    strength += 1;
  }

  // Check for numbers
  if (password.Any(char.IsDigit)) {
    strength += 1;
  }

  // Check for special characters
  if (password.Any(ch => !char.IsLetterOrDigit(ch))) {
    strength += 1;
  }

  // Return strength level
  if (strength < 2) {
    return "Easy to guess";
  } else if (strength == 2) {
    return "Medium difficulty";
  } else if (strength == 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

Функція Java для надійності пароля

public String checkPasswordStrength(String password) {
  // Initialize variables
  int strength = 0;

  // Check password length
  if (password.length() < 8) {
    return "Easy to guess";
  } else {
    strength += 1;
  }

  // Check for mixed case
  if (password.matches(".*[a-z].*") && password.matches(".*[A-Z].*")) {
    strength += 1;
  }

  // Check for numbers
  if (password.matches(".*\\d.*")) {
    strength += 1;
  }

  // Check for special characters
  if (password.matches(".*[^a-zA-Z\\d].*")) {
    strength += 1;
  }

  // Return strength level
  if (strength < 2) {
    return "Easy to guess";
  } else if (strength == 2) {
    return "Medium difficulty";
  } else if (strength == 3) {
    return "Difficult";
  } else {
    return "Extremely difficult";
  }
}

І якщо ви просто шукаєте чудовий генератор паролів, я створив для цього гарний маленький онлайн-інструмент.

Генератор паролів