Как установить Яндекс SmartCaptcha на сайт
SmartCaptcha — капча от Яндекса с серверами в России и бесплатным лимитом. Показываем, как её подключить: от создания ключей до проверки на сервере, — и что учесть, чтобы не потерять заявки.
Содержание
Коротко
- Нужны два ключа: клиента — для страницы, сервера — только для обработчика формы.
- Токен из поля smart-token обязательно проверяйте на сервере.
- Первые 10 000 успешных проверок в месяц бесплатны.
Что понадобится
- аккаунт в Yandex Cloud с платёжным аккаунтом (первые 10 000 успешных проверок в месяц бесплатны);
- доступ к коду страницы с формой;
- доступ к обработчику формы на сервере — без проверки токена на сервере капча ничего не защищает.
- Создайте капчу в Yandex Cloud
Укажите домен сайта и получите ключи клиента и сервера.
- Добавьте виджет на страницу
Скрипт и контейнер с ключом клиента внутри формы.
- Проверьте токен на сервере
Отправьте smart-token с ключом сервера в сервис проверки.
- Протестируйте
Отправьте форму сами, затем — без токена: заявка должна отклониться.
Шаг 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 не смогут отправить защищённую форму.