Формы и спам

Как установить Яндекс SmartCaptcha на сайт

SmartCaptcha — капча от Яндекса с серверами в России и бесплатным лимитом. Показываем, как её подключить: от создания ключей до проверки на сервере, — и что учесть, чтобы не потерять заявки.

Обновлено 11 ноября 20263 мин чтенияКоманда nbots

Содержание
  1. Что понадобится
  2. Шаг 1. Создайте капчу и получите ключи
  3. Шаг 2. Добавьте виджет на страницу
  4. Шаг 3. Проверьте токен на сервере
  5. Частые ошибки
  6. Если не хочется капчи
  7. Частые вопросы

Коротко

  • Нужны два ключа: клиента — для страницы, сервера — только для обработчика формы.
  • Токен из поля smart-token обязательно проверяйте на сервере.
  • Первые 10 000 успешных проверок в месяц бесплатны.

Что понадобится

  • аккаунт в Yandex Cloud с платёжным аккаунтом (первые 10 000 успешных проверок в месяц бесплатны);
  • доступ к коду страницы с формой;
  • доступ к обработчику формы на сервере — без проверки токена на сервере капча ничего не защищает.
  1. Создайте капчу в Yandex Cloud

    Укажите домен сайта и получите ключи клиента и сервера.

  2. Добавьте виджет на страницу

    Скрипт и контейнер с ключом клиента внутри формы.

  3. Проверьте токен на сервере

    Отправьте smart-token с ключом сервера в сервис проверки.

  4. Протестируйте

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

Шаг 1. Создайте капчу и получите ключи

В консоли Yandex Cloud откройте сервис SmartCaptcha, создайте капчу и укажите домен сайта. Вы получите два ключа:

  • ключ клиента — вставляется в код страницы, его видят все;
  • ключ сервера — хранится только на сервере, никому его не показывайте.

Шаг 2. Добавьте виджет на страницу

Подключите скрипт и поставьте контейнер внутри формы:

<script src="https://smartcaptcha.cloud.yandex.ru/captcha.js" defer></script>

<form method="post" action="/send">
  <input name="phone" type="tel" required>
  <div class="smart-captcha" data-sitekey="КЛЮЧ_КЛИЕНТА" style="height:100px"></div>
  <button type="submit">Отправить</button>
</form>

После прохождения проверки виджет сам добавит в форму скрытое поле smart-token с одноразовым токеном.

Шаг 3. Проверьте токен на сервере

При отправке формы обработчик отправляет токен на проверку в SmartCaptcha:

<?php
$ch = curl_init('https://smartcaptcha.cloud.yandex.ru/validate');
curl_setopt_array($ch, [
  CURLOPT_POST => true,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_TIMEOUT => 3,
  CURLOPT_POSTFIELDS => http_build_query([
    'secret' => getenv('SMARTCAPTCHA_SERVER_KEY'),
    'token'  => $_POST['smart-token'] ?? '',
    'ip'     => $_SERVER['REMOTE_ADDR'],
  ]),
]);
$res = json_decode(curl_exec($ch), true);
if (($res['status'] ?? '') !== 'ok') {
  http_response_code(400);
  exit('Проверка не пройдена');
}
// дальше — сохранение заявки

Если в ответе "status": "ok" — проверка пройдена, заявку можно принимать. Если "failed" — отклонить.

Частые ошибки

  • Проверка только в браузере. Бот отправит форму напрямую на сервер, минуя виджет. Токен обязательно проверять на сервере.
  • Повторное использование токена. Токен одноразовый — после проверки он больше не действует.
  • Ключ сервера в коде страницы. Его могут украсть и тратить ваш лимит.
  • Нет запасного варианта. Решите заранее, что делать, если сервис проверки не ответил: принять заявку и пометить её или отклонить.

Если не хочется капчи

Капча — это дополнительное действие для каждого посетителя. Альтернатива — невидимая проверка: антибот оценивает посетителя по браузеру и поведению, а на сервере вы проверяете отправителя одним запросом. Людям ничего решать не нужно. Сравнение вариантов — в статье «Капча для сайта».

Частые вопросы

Сколько стоит Яндекс SmartCaptcha?

Первые 10 000 успешных проверок в месяц бесплатны, дальше — по тарифам Yandex Cloud за каждую тысячу проверок. Неуспешные проверки не тарифицируются.

Нужно ли проверять токен SmartCaptcha на сервере?

Да, обязательно. Без проверки на сервере бот может отправить форму напрямую и обойти виджет.

Можно ли поставить SmartCaptcha на Тильду?

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

Где взять ключи SmartCaptcha?

В консоли Yandex Cloud, в сервисе SmartCaptcha: после создания капчи на её странице есть ключ клиента и ключ сервера.

Что делать, если сервис проверки не ответил?

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

Можно ли сделать SmartCaptcha невидимой?

У SmartCaptcha есть невидимый режим: задание показывается только при подозрении. Подробности — в документации Yandex Cloud.

Работает ли SmartCaptcha без JavaScript?

Нет, виджету нужен JavaScript. Посетители с отключённым JavaScript не смогут отправить защищённую форму.

Читайте также