👻 Невидимая Яндекс Капча: полная инструкция
Обычная капча с галочкой "Я не робот" раздражает пользователей. Невидимая капча показывается только подозрительным пользователям (VPN, прокси, боты). Обычные люди отправляют форму мгновенно и даже не знают, что капча есть!
✅ Результат: Обычный пользователь → форма отправляется сразу.
🔍 Подозрительный пользователь (VPN/бот) → появляется капча с заданиями.
🔍 Подозрительный пользователь (VPN/бот) → появляется капча с заданиями.
1
Создайте капчу в Яндекс.Облаке
Перейдите в консоль Яндекс.Облака и создайте капчу для вашего домена.
Публичный ключ (на сайт): ysc1_XXXXXXXXXXXXXX Секретный ключ (на сервер): ysc2_XXXXXXXXXXXXXX
💡 Важно: Секретный ключ нельзя показывать в коде сайта! Только на сервере.
2
Подключите скрипт капчи
Вставьте этот код в <head> или перед закрывающим </body>:
<script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onCaptchaLoad" defer></script>
3
Добавьте невидимый контейнер на страницу
Контейнер скрыт — пользователь его не видит:
<!-- Невидимый контейнер капчи -->
<div id="captcha-container" class="smart-captcha"
data-sitekey="ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ"
style="position: absolute; left: -9999px; top: -9999px;">
</div>
<!-- Скрытое поле для токена -->
<input type="hidden" name="smart-token" id="smart-token" value="">
4
JavaScript инициализация
<script>
let captchaWidgetId = null;
function onCaptchaLoad() {
if (window.smartCaptcha && document.getElementById('captcha-container')) {
captchaWidgetId = window.smartCaptcha.render('captcha-container', {
sitekey: 'ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ',
invisible: true, // 👈 ГЛАВНОЕ: невидимый режим
callback: function(token) {
document.getElementById('smart-token').value = token;
document.getElementById('myForm').submit(); // отправляем форму
},
'expired-callback': function() {
document.getElementById('smart-token').value = '';
alert('Время проверки истекло, попробуйте снова');
}
});
}
}
function submitForm() {
const agree = document.querySelector('input[name="agree"]');
if (!agree.checked) {
alert('Подтвердите согласие на обработку данных');
return false;
}
// Запускаем капчу
if (window.smartCaptcha && captchaWidgetId) {
window.smartCaptcha.execute(captchaWidgetId);
}
return false;
}
</script>
5
Измените кнопку отправки
Кнопка должна быть типа button, а не submit:
<button type="button" onclick="submitForm()">Отправить</button>
6
Проверка на сервере (PHP)
Добавьте в начало обработчика формы:
<?php
$secretKey = 'ВАШ_СЕКРЕТНЫЙ_КЛЮЧ'; // ysc2_...
$token = $_POST['smart-token'] ?? '';
if (empty($token)) {
die('Капча не пройдена');
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://smartcaptcha.yandexcloud.net/validate');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
'secret' => $secretKey,
'token' => $token,
'ip' => $_SERVER['REMOTE_ADDR']
]));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200) {
die('Ошибка проверки капчи');
}
$result = json_decode($response, true);
if (!isset($result['status']) || $result['status'] !== 'ok') {
die('Капча не пройдена');
}
// ... ваш код отправки письма/сохранения в БД
?>
📋 Полный пример формы
<form method="post" action="/send.php" id="myForm">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="tel" name="phone" placeholder="Телефон" required>
<!-- Скрытые поля от простых ботов -->
<input type="email" name="email" style="display:none">
<input type="url" name="url" style="display:none">
<!-- Капча -->
<div id="captcha-container" class="smart-captcha"
data-sitekey="ysc1_XXXXXXXXXXXXXX"
style="position: absolute; left: -9999px;"></div>
<input type="hidden" name="smart-token" id="smart-token">
<div>
<input type="checkbox" name="agree" id="agree">
<label for="agree">Я согласен с политикой конфиденциальности</label>
</div>
<button type="button" onclick="submitForm()" id="submitBtn" disabled>Отправить</button>
</form>
<script>
// Включение кнопки при согласии
document.getElementById('agree').onchange = function() {
document.getElementById('submitBtn').disabled = !this.checked;
};
let captchaWidgetId = null;
function onCaptchaLoad() {
if (window.smartCaptcha) {
captchaWidgetId = window.smartCaptcha.render('captcha-container', {
sitekey: 'ysc1_XXXXXXXXXXXXXX',
invisible: true,
callback: function(token) {
document.getElementById('smart-token').value = token;
document.getElementById('myForm').submit();
},
'expired-callback': function() {
document.getElementById('smart-token').value = '';
}
});
}
}
function submitForm() {
const agree = document.getElementById('agree');
if (!agree.checked) {
alert('Подтвердите согласие');
return;
}
if (window.smartCaptcha && captchaWidgetId) {
window.smartCaptcha.execute(captchaWidgetId);
}
}
</script>
📊 Сравнение режимов капчи
| Характеристика | Обычная капча | Невидимая капча |
|---|---|---|
| Показывается | Всем всегда | Только подозрительным |
| Обычный пользователь | Видит галочку | Ничего не видит |
| Пользователь с VPN | Видит галочку | Видит проверку (если нужно) |
| Удобство | 😐 Среднее | 😍 Отличное |
| Защита от ботов | ✅ Хорошая | ✅ Отличная |
❓ Частые вопросы
🔹 Сколько стоит?
Бесплатно до 100 000 проверок в месяц. Потом — символическая плата.
Бесплатно до 100 000 проверок в месяц. Потом — символическая плата.
🔹 Что делать, если капча не работает на тестовом домене?
Добавьте тестовый домен в список разрешённых в консоли Яндекс.Облака.
Добавьте тестовый домен в список разрешённых в консоли Яндекс.Облака.
🔹 Как понять, что капча работает?
Откройте сайт через VPN (другая страна) — должна появиться капча.
Откройте сайт через VPN (другая страна) — должна появиться капча.
🔹 Нужно ли подключать библиотеки?
Нет, всё работает через один скрипт от Яндекса.
Нет, всё работает через один скрипт от Яндекса.
⚠️ Важно! Никогда не проверяйте капчу только на стороне клиента (JavaScript). Всегда делайте проверку на сервере, иначе боты обойдут защиту!
Комментарии
Пока нет комментариев. Будьте первым!