Создание формы оценки сложности пароля с индикацией сложности в виде стилизованного элемента meter на jQuery

Множество крупных сайтов, таких как Dropbox, Gmail и eBay, используют специальный индикатор, для указания сложности пароля при регистрации.

Конечно это довольно старая технология, но до сих пор её использовали со старой разметкой (div с вложенным span). С появлением HTML5, у нас появилась возможность использовать новый тег meter, который на мой взгляд, семантически более точен и больше подходит для работы индикатора сложности пароля.

Как оценить сложность пароля?

3DBookShowcase2.jpg

Для оценки сложности пароля мы будем использовать библиотеку zxcvbn от Dropbox. Есть большое количество альтернативных JS библиотек, но для нашего проекта, больше подходит zxcvbn, потому что:

  1. Предоставляет простой API, который принимает пароль и возвращает его оценку от 0 до 4 (0 - легкий, 4 - сложный). Данный API, отлично работает с элементом meter, который может принимать значение в пределах указанного диапазона.
  2. Оценивает реальную надежность пароля, путем обнаружения всех возможных шаблонов, а затем сравнивает с базой распространенных паролей, словарями, клавиатурными шаблонами и проверяет на наличие повторений.
  3. Создана командой разработчиков Dropbox! На их официальном блоге можно найти гораздо больше информации о данной библиотеке.

Основная разметка индикатора сложности пароля

Начнем с разметки, добавим тег input типа password, с текстовым полем:

<label for="password">Enter password</label>
<input type="password" id="password" required>

Отлично, теперь добавим элемент meter и тег p в котором будет отображаться текстовая подсказка. Zxcvbn возвращает значение в диапазоне от 0 до 4.

<meter max="4" id="password-strength-meter"></meter>
<p id="password-strength-text"></p>

W3C рекомендуют отображать сложность пароля в текстовом виде, для старых браузеров. Однако, сейчас мы не будем добавлять данную функцию и разберем альтернативные методы в конце статьи.

Стилизация индикатора сложности пароля

В этом разделе, мы разберем только стилизацию элемента meter, весь оставшийся стиль, вы сможете найти в исходных файлах данного урока. Для того чтобы понять как настроить стиль для meter, мы должны разобраться, как браузеры отображают данный элемент. Пример работы данного элемента вы можете увидеть на сайте реклама в ПМР.

Пример работы meter в браузерах Blink/Webkit и Gecko:

Библиотека zxcvbn возвращает значение от 0 до 4. Это означает, что есть пять возможных значений индикации сложности пароля. Мы можем задать их при помощи селектора атрибута, например, meter[value="0"], meter[value="1"] и т.д.

Значение это - сложность пароля. Чем выше значение, тем сложнее будет взломать пароль. Мы будем отображать каждое значение различными цветами, для визуализации.

Стилизация прогресса

meter {
  /* Срос стандартного appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  margin: 0 auto 1em;
  width: 100%;
  height: 0.5em;

  /* Firefox */
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

Стилизация значения

/* Webkit */
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

/* Gecko */
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }

Обновление счетчика

3DBookShowcase2.jpg

Прежде чем продолжить, добавим библиотеку zxcvbn при помощи CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

Zxcvbn добавляет одну глобальную функцию, которая принимает один обязательный аргумент (пароль) и возвращает объект (результат проверки) со следующими свойствами:

  • guesses
  • guesses_log10
  • crack_time_seconds
  • crack_time_display
  • score
  • feedback.warning
  • feedback.suggestions
  • sequence
  • calc_time

Zxcvbn также принимает дополнительный аргумент user_inputs, это массив строк, который используется в качестве черного списка, например, личная информация пользователя которая совпадает с другими полями, такие как - имя, адрес, почта и т.д.

Теперь, каждый раз когда пользователь вводит новый пароль, мы передаем его в функцию zxcvbn и обновляем оценку сложности при помощи полученного значения. В дополнение к индикатору сложности пароля, мы должны отобразить текстовую подсказку о сложности введенного пароля.

Во-первых, мы будем отображать результаты в удобном для человека виде,

var strength = {
  0: "Слабый",
  1: "Плохой",
  2: "Средний",
  3: "Хороший",
  4: "Сложный"
}

Во-вторых, следим за изменениями в поле с паролем, если пользователь меняет пароль, обновляем счетчик.

var password = document.getElementById('password');
var meter = document.getElementById('password-strength-meter');
var text = document.getElementById('password-strength-text');

password.addEventListener('input', function() {
  var val = password.value;
  var result = zxcvbn(val);

  // Обновление счетчика
  meter.value = result.score;

  // Обновление текстовой подсказки
  if (val !== "") {
    text.innerHTML = "Strength: " + strength[result.score]; 
  } else {
    text.innerHTML = "";
  }
});

В демонстрационном варианте, добавлены текстовые подсказки feedback.warnings и feedback.suggestions, чтобы помочь пользователю ввести более сложный пароль.

See the Pen Password strength meter by Pankaj Parashar (@pankajparashar) on CodePen.

Fallback

Данный индикатор сложности пароля, работает во всех браузерах которые поддерживают HTML5 тег <meter>. И мы не должны волноваться о браузерах которые его не поддерживают. Они просто проигнорируют элемент meter и будут отображать текстовую подсказку, благодаря которой пользователь, легко определит сложность пароля.

Также в скором времени, мы напишем новую статью, в которой реализуем данный метод в полноценном виде даже для старых браузеров, т.е. они также будут пропускать элемент meter, но вместо него будут отображать анимированный span.

Перевод статьи Password Strength `meter`

Тэги: pluginpasswordzxcvbnusability

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.