Bitrix recaptcha v3

Каптча которая установлена в Битриксе по умолчанию устарела. Уже много лет ее с легкостью распознают боты и как следствие сыпется спам с форм. Поэтому часто возникает задачка , как поставить «новую» Google  Recaptcha v3.  Разумеется без маркетплейса Битрикса. Расписываю пошагово.

1. для начала на сайте https://www.google.com/recaptcha/admin зарегить сайт который будем защать от спама. Выбрать последнюю recaptcha v3 и получить 2 ключа

2. Подключить к форме на  Bitrix, которую будем защищать — гугловский javascript. Стандартную каптчу отключить. А код recaptcha v3 подключем в component_epilog.php компонента с формой.

<?php $APPLICATION->AddHeadScript('/www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key'); ?>

И кусок кода ответственный за запуск проверки из документации

<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
...
});
});
</script>

Этот кусок из документации практически всегда не работает по умолчанию 🙂

В моем случае в инструментах разработчика постоянно вылетала ошибка Uncaught ReferenceError: grecaptcha is not defined. Обращение к api.js занимает время, и когда пытаюсь запустить проверку, объект grecaptcha еще не существует. Попытка загрузить api.js в самом начале страницы, тоже ничего не давала. Документация по recaptcha v3 пакостная. В итоге все заработало только когда сделал вызов через callback функцию. При отладке проще было работать присваивая токен, скрытому полю.

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

И код для recaptcha v3 в итоге получился такой.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallbackRecap&render=reCAPTCHA_site_key" async defer></script>
<script>
var onloadCallbackRecap = function() {
grecaptcha.ready(function () {
grecaptcha.execute('reCAPTCHA_site_key', { action: 'contact_callback' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
};
</script>

После того как заработало на «клиенте» делаем серверную часть. Там все попроще. Ищем где на bitrix сайте обработчик формы и в него добавляем проверку от рекапчи.

if (isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && $_SERVER["REQUEST_METHOD"] == "POST" && is_array($_POST["CALLBACK"]) && isset($_POST['recaptcha_response'])) {
header("Cache-Control: no-store, no-cache, must-revalidate");

$recaptcha_key = 'YOUR_RECAPTCHA_SERVER_KEY';


$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_params = [
'secret' => $recaptcha_key,
'response' => $_POST['recaptcha_response'],
'remoteip' => $_SERVER['REMOTE_ADDR'],
];

$ch = curl_init($recaptcha_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $recaptcha_params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$response = curl_exec($ch);
if (!empty($response)) {
$decoded_response = json_decode($response);
}

$recaptcha_success = false;
//dbg2f($decoded_response, 'responce');

if ($decoded_response && $decoded_response->score > 0) {
$recaptcha_success = $decoded_response->score;
// обрабатываем данные формы, которая защищена капчей
} else {
// прописываем действие, если пользователь оказался ботом
}

$SITE_ID = $_POST["CALLBACK"]["SITE_ID"];

$arr["MESSAGE"]["ERROR"] = 0;

if($recaptcha_success > 0.5) CEvent::SendImmediate("CALLBACK_FORM", $SITE_ID, $_POST["CALLBACK"]);

echo json_encode($arr);

return;
}

$decoded_response->score это вероятность бот-человек. Экспериментировал в нескольких броузерах и с разных компов, гугл дает мне обычно 0.8-0.9. А спамботы на тестовых сайтах обычно выдают 0.1-0.2.

Вот так выглядит статистика на форме прикрытой от спама рекапчей на одном из рабочих bitrix сайтов у клиента

Я при проверке в коде выставил, пропускать письма при score 0.5 но на некоторых сайтах можно выставлять и выше. Пока что recaptcha v3 справляется со спамом весьма успешно.