Лучшие практики формирования SMS OTP

Узнайте, как оптимизировать форму SMS OTP и улучшить взаимодействие с пользователем.

Эйдзи Китамура

Просьба к пользователю предоставить OTP (одноразовый пароль), отправленный через SMS, является распространенным способом подтверждения номера телефона пользователя. Есть несколько вариантов использования SMS OTP:

  • Двухфакторная аутентификация. Помимо имени пользователя и пароля, SMS OTP может использоваться как сильный сигнал о том, что учетная запись принадлежит лицу, получившему SMS OTP.
  • Проверка номера телефона. Некоторые службы используют номер телефона в качестве основного идентификатора пользователя. В таких сервисах пользователи могут ввести свой номер телефона и OTP, полученный через SMS, для подтверждения своей личности. Иногда он сочетается с PIN-кодом для двухфакторной аутентификации.
  • Восстановление аккаунта. Когда пользователь теряет доступ к своей учетной записи, должен быть способ восстановить его. Отправка электронного письма на зарегистрированный адрес электронной почты или одноразового SMS-сообщения на номер телефона являются распространенными методами восстановления учетной записи.
  • Подтверждение платежа В платежных системах некоторые банки или эмитенты кредитных карт запрашивают у плательщика дополнительную аутентификацию в целях безопасности. Для этой цели обычно используется SMS OTP.

В этом посте объясняются лучшие практики создания формы SMS OTP для вышеуказанных случаев использования.

Контрольный список

Чтобы обеспечить максимальное удобство использования SMS OTP, выполните следующие действия:

  • Используйте элемент <input> с:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Используйте @BOUND_DOMAIN #OTP_CODE в качестве последней строки SMS-сообщения OTP.
  • Используйте API WebOTP .

Используйте элемент <input>

Использование формы с элементом <input> — это самый важный совет, которому вы можете следовать, поскольку он работает во всех браузерах. Даже если другие предложения из этого поста не работают в каком-то браузере, пользователь все равно сможет ввести и отправить OTP вручную.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

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

type="text"

Поскольку одноразовые пароли обычно представляют собой пяти- или шестизначные числа, использование type="number" для поля ввода может показаться интуитивно понятным, поскольку при этом мобильная клавиатура заменяется только цифрами. Это не рекомендуется, поскольку браузер ожидает, что поле ввода будет счетным числом, а не последовательностью нескольких чисел, что может привести к неожиданному поведению. Использование type="number" приводит к отображению кнопок вверх и вниз рядом с полем ввода; нажатие этих кнопок увеличивает или уменьшает число и может удалить предыдущие нули.

Вместо этого используйте type="text" . Это не превратит мобильную клавиатуру только в цифры, но это нормально, потому что следующий совет по использованию inputmode="numeric" сделает эту работу.

inputmode="numeric"

Используйте inputmode="numeric" , чтобы изменить мобильную клавиатуру только на цифры.

Некоторые веб-сайты используют type="tel" для полей ввода OTP, поскольку при фокусировке мобильная клавиатура также преобразуется только в цифры (включая * и # ). Этот хак использовался раньше, когда inputmode="numeric" не получил широкой поддержки. Поскольку Firefox начал поддерживать inputmode="numeric" , нет необходимости использовать семантически неверный хак type="tel" .

autocomplete="one-time-code"

Атрибут autocomplete позволяет разработчикам указать, какое разрешение имеет браузер для оказания помощи при автозаполнении, и информирует браузер о типе информации, ожидаемой в поле.

При использовании autocomplete="one-time-code" всякий раз, когда пользователь получает SMS-сообщение при открытой форме, операционная система эвристически анализирует OTP в SMS, и клавиатура предлагает пользователю ввести OTP. Он работает только в Safari 12 и более поздних версиях на iOS, iPadOS и macOS, но мы настоятельно рекомендуем его использовать, поскольку это простой способ улучшить работу SMS OTP на этих платформах.

`autocomplete="one-time-code"` в действии.

autocomplete="one-time-code" улучшает взаимодействие с пользователем, но вы можете сделать больше , гарантируя, что SMS-сообщение соответствует формату сообщения, привязанного к источнику .

Форматировать текст SMS

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

Правило формата простое: в конце SMS-сообщения укажите домен получателя, начинающийся с @ , и OTP, начинающийся с # .

Например:

Your OTP is 123456

@web-otp.glitch.me #123456

Использование стандартного формата OTP-сообщений делает извлечение из них кодов более простым и надежным. Связывание OTP-кодов с веб-сайтами затрудняет обман пользователей, заставляющих их предоставить код вредоносным сайтам.

Использование этого формата дает несколько преимуществ:

  • OTP будет привязан к домену. Если пользователь находится в доменах, отличных от указанного в SMS-сообщении, предложение OTP не появится. Это также снижает риск фишинговых атак и потенциального взлома учетных записей.
  • Браузер теперь сможет надежно извлекать OTP, не полагаясь на загадочные и ненадежные эвристики.

Когда веб-сайт использует autocomplete="one-time-code" , Safari с iOS 14 или более поздней версии предложит OTP в соответствии с вышеуказанными правилами.

Этот формат SMS-сообщений также полезен для других браузеров, кроме Safari. Chrome, Opera и Vivaldi на Android также поддерживают правило одноразовых кодов с привязкой к источнику с помощью API WebOTP, но не через autocomplete="one-time-code" .

Используйте API WebOTP

API WebOTP обеспечивает доступ к OTP, полученному в SMS-сообщении. Вызвав navigator.credentials.get() с типом otp ( OTPCredential ), где transport включает sms , веб-сайт будет ожидать доставки SMS, соответствующего одноразовым кодам источника, и предоставления пользователю доступа. Как только OTP передается в JavaScript, веб-сайт может использовать его в форме или отправлять POST непосредственно на сервер.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API в действии.

Узнайте подробнее, как использовать API WebOTP, в статье Проверка телефонных номеров в Интернете с помощью API WebOTP или скопируйте и вставьте следующий фрагмент. (Убедитесь, что для элемента <form> правильно установлены атрибуты action и method .)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Фото Джейсона Люна на Unsplash .