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

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

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

Запрос пользователя предоставить OTP (одноразовый пароль), отправленный по SMS, является распространенным способом подтверждения номера телефона пользователя. Существует несколько вариантов использования SMS OTP:

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

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

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

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

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

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

Например:

Your OTP is 123456

@web-otp.glitch.me #123456

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

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

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

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

Этот формат 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);
API WebOTP в действии.

Подробно о том, как использовать 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 .