HTML-атрибуты для упрощения двухфакторной аутентификации

Maksym Pohribniak

В этой статье мы рассмотрим <input> и атрибуты HTML, которые помогут ускорить двухфакторную аутентификацию пользователей.

Обычная форма

Когда вы реализуете двухфакторную аутентификацию для веб-приложения, возможно, вам потребуется форма для ввода пользователем однократного пароля, который вы собираетесь отправить. Примерно следующий HTML:

<form action="/sessions/check-2fa" method="POST">
  <div>
    <label for="token">Please enter the code you were sent:</label>
    <input type="text" name="token" id="token" />
  </div>
  <button type="submit">Check token</button>
</form>

Это отличная форма. <input> имеет имя и уникальный идентификатор, а <label> использует корректный атрибут for, что отлично сказывается на доступности (также можно обернуть <label> вокруг <input> для того же эффекта и избавиться от id).

С небольшим количеством CSS форма может выглядеть примерно так:

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

Отображаем корректную клавиатуру

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

Может показаться, что переключение типа <input> с «text» на «number» сделает это:

<input type="number" name="token" id="token" />

Теперь действительно вызовется другая клавиатура на iOS, но она все-еще включает в себя ряд бесполезных клавиш.

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

inputmode

Атрибут inputmode изменяет клавиатуру, которую должен отображать браузер, без изменения значения данных. Мы хотим, чтобы в наш <input> вводили текст, но с цифровой клавиатуры. Поэтому вместо изменения типа добавим inputmode="numeric"

<input type="text" name="token" id="token" inputmode="numeric" />

Этот атрибут имеет также ряд других значений:

none – без виртуальной клавиатуры.

text – стандартная раскладка клавиатуры для пользователя, учитывая его локализацию.

decimal – дробные значения чисел.

numeric – числовая раскладка клавиатуры.

tel – раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решетку ("#").

search – клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на "Поиск".

email – клавиатура, оптимизированная для ввода электронной почты, с использованием символа "@".

url – клавиатура, оптимизированная для ввода ссылок. Может иметь кнопку "/", расположенную в более удобном месте.

Современные браузеры имеют отличную поддержку, но для более старых решение тоже есть.

pattern

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
/>

Атрибут pattern позволяет проверять содержимое <input> с помощью регулярного выражения. Регулярка [0-9]* указывает на то, что мы принимаем только числа, а также запускает цифровую панель в браузерах без поддержки атрибута inputmode. Так же, этот атрибут добавит нам дополнительную нативную валидацию.

Теперь на клавиатуре гораздо проще вводить цифры:

Еще одна вещь, которая сильно облегчит заполнение форм – автоматическое заполнение поля из сообщения.

HTML autocomplete

Атрибут autocomplete позволяет браузеру предоставлять автоматическую помощь при заполнении значений полей формы.

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

После добавления этого атрибута – форма выглядит так:

Другие полезные значения autocomplete

Доступно множество значений автозаполнения, охватывающих всё, от имен и адресов до кредитных карт и других данных. Для регистрации и входа в систему есть несколько особенно полезных значений: username, email, new-password, current-password.

Пример поля воода пароля с использованием атрибута new-password:

Браузер предлагает вам автоматически сгенерировать пароль, и тут же сохранить его во встроенный менеджер паролей.

Лучший опыт на чистом HTML

Элемент <input> является одним из самых интересных элементов. В зависимости от атрибутов это может быть текстовое поле, ползунок диапазона, селектор файлов, кнопка и многое другое.

Мы увидели, что с помощью небольшого количества атрибутов HTML можно упростить взаимодействие с нашей системой для пользователей, особенно на мобильных устройствах.

Спасибо за внимание!

Источники: