Как сделать подтверждение номера телефона на сайте

Форма с подтверждением телефона нужна в трёх местах почти любого сайта: при регистрации, при оформлении заказа и при публикации объявления. Разбираем, какие есть варианты реализации, сколько они стоят и как собрать сценарий со звонком.

Где на сайте нужно подтверждать номер

• Регистрация. Отсечь фейковые аккаунты и получить рабочий контакт.
• Оформление заказа. Убедиться, что курьер дозвонится, и отсечь ложные заказы — особенно при оплате при получении.
• Публикация объявления. Подтверждённый контакт продавца снижает долю мошеннических размещений.
• Восстановление доступа. Телефон как доказательство, что аккаунт принадлежит вам.
• Подтверждение операции. Смена реквизитов, крупная покупка, изменение доставки.

Разбор задач по отраслям — в статье где нужна верификация телефона.

Варианты реализации и что они стоят

У первых двух вариантов общая слабость: результат зависит от доставки сообщения, на которую вы не влияете. У третьего зависимость другая — от того, передаётся ли номер вызывающего абонента. Она затрагивает меньшую долю аудитории и, в отличие от доставляемости, предсказуема.

Как именно устроена проверка звонком — в статье про подтверждение номера телефона звонком. Если ваш продукт живёт не только в вебе, посмотрите отличия мобильного сценария в материале про подтверждение номера в приложении: там набор открывается одним касанием, и экран ожидания строится иначе.

Как встроить подтверждение звонком: 5 шагов

1. Зарегистрируйтесь и создайте проект. Он получит собственный ключ. Ключ живёт в переменных окружения на сервере — не в репозитории и не во фронтенде.
2. Добавьте эндпоинт «начать проверку» на своём бэкенде. Он принимает номер от фронтенда, валидирует его, вызывает создание проверки и возвращает во фронтенд только идентификатор и выделенный номер.
3. Покажите номер пользователю. Крупно, с таймером на 60 секунд, на мобильных — ссылкой tel:.
4. Добавьте эндпоинт «статус проверки». Фронтенд опрашивает его, а он проксирует запрос с ключом. Наружу отдавайте только статус — ни ключ, ни лишние поля клиенту не нужны.
5. Обработайте результат на бэкенде. По CONFIRMED — помечайте номер подтверждённым и продолжайте сценарий, по EXPIRED — предлагайте повторить.

Запросы, форматы ответов и примеры кода — в материале про API подтверждения номера.

Что показать пользователю в форме

Экран ожидания звонка решает больше, чем кажется: именно на нём пользователь либо делает нужное действие, либо закрывает вкладку.

• Номер — самый крупный элемент экрана. С разделителями, в привычном виде: +7 495 000-00-00. Его будут набирать руками с другого устройства.
• Кнопка копирования рядом с номером — на десктопе она нужнее, чем кажется.
• Ссылка tel: на мобильных: одно касание вместо переписывания.
• Понятная инструкция. «Позвоните на этот номер с телефона, который подтверждаете. Трубку брать не нужно — вызов оборвётся сам». Без слова «верификация».
• Таймер на 60 секунд. Показывает, что процесс идёт, и задаёт рамку ожидания.
• Автопереход при подтверждении. Пользователь не должен нажимать «Проверить» — экран меняется сам.
• После истечения таймера — «Позвонить ещё раз» и ссылка «Подтвердить другим способом».

Отдельно про звонок с того же номера: предупредите об этом заранее, одной строкой под номером. Иначе часть пользователей позвонит с рабочего телефона, проверка не подтвердится, и причина будет неочевидна.

Как обработать результат на бэкенде

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

Что учесть:

• Интервал опроса. Раз в одну-две секунды достаточно. Чаще — бессмысленно, реже — заметная задержка на экране.
• Условия остановки. Три штуки: CONFIRMED, EXPIRED, истёк локальный таймер. Без явных условий опрос продолжится после ухода пользователя со страницы.
• Доверять только своему серверу. Решение «номер подтверждён» принимается на бэкенде по ответу API, а не по тому, что прислал фронтенд.
• Идемпотентность на своей стороне. Один и тот же CONFIRMED может быть увиден несколькими запросами подряд — привязка номера должна отрабатывать один раз.
• Проверка баланса. Если средств не хватает, проверка не создастся и API вернёт ошибку. Обработайте её явно и заведите оповещение о низком балансе: иначе форма молча перестанет работать.
• Ограничение частоты на своём эндпоинте. Создание проверок стоит денег, поэтому лимит на число попыток с одного адреса или сессии нужен обязательно.
• Валидация номера до отправки. Приведите введённое к формату E.164 на своей стороне — так вы не потратите запрос на заведомо некорректный номер и покажете пользователю понятную ошибку сразу в форме.