Автоподстановка OTP из SMS: форматы для Android, iOS и веба

Your Example code is 123456.

@example.com #123456

Как работает автоподстановка OTP в вебе?

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

<input type="text" inputmode="numeric"
       autocomplete="one-time-code" name="otp" />

Документация Chrome рекомендует атрибут для кросс-браузерной совместимости и сообщает, что Safari использует его, чтобы предлагать код из правильно оформленного SMS, хотя JavaScript API WebOTP в нём нет.

Для Chrome на Android вызовите WebOTP с транспортом sms. API требует защищённого источника (HTTPS), а AbortController позволяет отменить ожидающий запрос, если пользователь введёт код вручную.

if ("OTPCredential" in window) {
  const ac = new AbortController();
  const form = document.querySelector("form");
  const input = document.querySelector("input[autocomplete=one-time-code]");

  form.addEventListener("submit", () => ac.abort());

  navigator.credentials
    .get({ otp: { transport: ["sms"] }, signal: ac.signal })
    .then((otp) => {
      input.value = otp.code;
      form.submit();
    })
    .catch(() => {}); // user dismissed, or no matching SMS
}

SMS должно следовать формату с привязкой к источнику из спецификации WICG и руководства Chrome: код из четырёх–десяти буквенно-цифровых символов хотя бы с одной цифрой перед последней строкой, затем последняя строка, начинающаяся с @, хоста, одного пробела и # с кодом. В хосте не должно быть пробельных символов.

Может ли одно SMS работать на Android, iOS и в вебе?

Часто да, потому что правила совместимы. Поставьте читаемый текст первым, хеш для Android в строку выше конца, а строку с привязкой к домену — последней. Эта схема собрана из документированных правил, а не гарантирована производителем, поэтому протестируйте её.

Your Example code is 483921. Do not share it.
Ab3dE+9xYz1
@example.com #483921

Почему такой порядок: и Apple, и спецификация веба хотят видеть домен и код в последней строке. Google требует 11-символьный хеш где-либо в сообщении, но на проверенной нами странице положение хеша не фиксирует. Пример выше занимает 78 байт простых латинских символов, что с запасом укладывается в лимит 140 байт.

Чек-лист перед запуском:

1. Код — один токен, чётко отделённый от других цифр в тексте.
2. Домен в последней строке совпадает с сайтом и связанным доменом приложения.
3. Общая длина для варианта Retriever укладывается в 140 байт.
4. Хеш соответствует ключу подписи тестируемой сборки.
5. Проверено на телефоне каждой платформы у операторов, через которых вы реально отправляете.

Что с арабским текстом и Unicode?

Оставляйте код и две машиночитаемые части простыми. Лимит Google задан в байтах, а в Unicode-SMS помещается гораздо меньше символов, чем в GSM-7: 70 против 160 в одном сегменте (см. лимиты символов SMS и Unicode). Поэтому арабская фраза быстро съедает бюджет, а один символ вне GSM переводит всё сообщение в Unicode.

Надёжный подход: код пишите латинскими цифрами, @domain #code оставляйте в ASCII, а арабский текст делайте коротким. Официальной документации об автоподстановке кодов, записанных в других системах цифр, мы не нашли, поэтому не касаемся этого и рекомендуем протестировать перед использованием.

Как шаблоны аутентификации WhatsApp справляются с автоподстановкой?

Шаблоны аутентификации Meta имеют три стиля кнопок, у каждого фиксированный текст тела вида <code> is your verification code.

В документации Meta также отмечено, что в iOS 26 и новее подсказки клавиатуры дают автозаполнение без интеграции, а пользователи платформ без zero-tap получают кнопку копирования кода. Срок действия можно задать через code_expiration_minutes, а API предпросмотра принимает значения от 1 до 90 минут. Сравнение каналов — в статье OTP в WhatsApp или в SMS.

Пример: вход в приложение такси

У «Qafila Rides» (вымышленный пример) есть приложение для Android, приложение для iOS и мобильный сайт qafila.example.

1. Android-приложение запускает SMS Retriever, когда пользователь нажимает «Отправить код».
2. Бэкенд генерирует шестизначный код со сроком действия в несколько минут и отправляет трёхстрочное сообщение выше через SMS API.
3. Android передаёт сообщение приложению. iOS предлагает код над клавиатурой. На мобильном сайте Safari подсказывает его, а Chrome подставляет через WebOTP.
4. Сервер проверяет код один раз, отклоняет повторное использование и просроченные коды и ограничивает частоту запросов.
5. Если SMS не подтверждено за короткое время, бэкенд предлагает шаблон аутентификации WhatsApp как второй путь.

Какие ошибки встречаются чаще всего?

• Код не сам по себе. Лишние числа (телефон, цена, дата) рядом с кодом сбивают распознавание. Используйте один код на сообщение.
• Неверный хеш. Хеш следует за сертификатом подписи. Хеш отладочного ключа не подойдёт для боевой сборки.
• Несовпадение домена. @example.com должен совпадать с сайтом или связанным доменом, иначе iOS и WebOTP не предложат код.
• Сломанная последняя строка. Любой текст после #code, отсутствующий пробел или пробельные символы внутри домена ломают формат.
• Слишком длинное сообщение или много Unicode, что превышает лимит Retriever в 140 байт.
• Слишком позднее прослушивание. User Consent API игнорирует сообщения, полученные до запуска.
• Автоподстановка как защита. Автоподстановка — это удобство. По-прежнему проверяйте код на сервере, ограничивайте срок действия и число попыток и следите за мошенничеством с накруткой SMS.
• Границы статьи. Руководство описывает документированное поведение на момент написания. Правила платформ меняются, поэтому перед релизом сверяйтесь с источниками по ссылкам.

О формулировках сообщений и выборе срока действия см. руководство по OTP и аутентификационным сообщениям.

Чем помогает OmniChannels.ai

OmniChannels.ai отправляет OTP по SMS и WhatsApp через прямые подключения BroadNet к операторам, так что вы контролируете точный текст сообщения, от которого зависит ваш формат автоподстановки. Шаблоны WhatsApp охватывают аутентификацию с копированием кода, one-tap и zero-tap. Резервирование каналов, например WhatsApp, затем SMS, настраивается для каждого сценария, а статусы доставки приходят в одном формате вебхука. См. документацию SMS API, документацию WhatsApp API и решение для OTP.