Подключаем reCAPTCHA 2 к формам 1С-Битрикс

Встроенная стандартная капча Битрикса все меньше стала помогать от спам-ботов в формах обратной связи. Сейчас наиболее распостранненный вариант защиты форм — это исползование Google reCAPTCHA, ниже инструкция как подключить ее к формам обратной связи 1С-Битрикс без использования плагинов.

На данный момент reCAPTCHA существует в версиях 2 и 3, мы будем подключать версию 2.

Шаг 1.

Регистрируем домен на сайте https://www.google.com/recaptcha/admin/ и получаем 2 ключа (ключ сайта и секретный ключ).

Шаг 2.

В header.php вашего шаблона добавляем:

 <script src="https://www.google.com/recaptcha/api.js" async defer></script>

Шаг 3.

Заходим в шаблон формы, ищем где подключается стандартная капча и меняем все на:

<div class="g-recaptcha" id="g-recaptcha" data-sitekey="6LexQ88UAAAAAGPs1eC9GFv0thZ7bH56456456YbEU"></div>

"sitekey" — это ключ сайта полученный при регистрации.

Должно получится что-то похожее:

if($arResult["isUseCaptcha"] == "Y")
{
?>
	<div class="g-recaptcha" id="g-recaptcha" data-sitekey="6LexQ88UAAAAAGPs1eC9GFv0thZ7bH56456456YbEU"></div>
<?
} // isUseCaptcha

Не забудьте в настройках компонента указать «Использовать капчу».

Шаг 4.

Теперь в файл init.php добавляем код (не забудьте заменить секретный ключ, на тот который получили при регистрации):

	function my_onBeforeResultAdd($WEB_FORM_ID, &$arFields, &$arrVALUES)
	{
	    global $APPLICATION;
	
	    if ($_REQUEST['g-recaptcha-response']) {
	        $httpClient = new \Bitrix\Main\Web\HttpClient;
	        $result = $httpClient->post(
	            'https://www.google.com/recaptcha/api/siteverify',
	            array(
	                'secret' => '6LexQ88UAsAAAAOl0oOlZaqddfedsrwt5Re2K3KO2V',
	                'response' => $_REQUEST['g-recaptcha-response'],
	                'remoteip' => $_SERVER['HTTP_X_REAL_IP']
	            )
	        );
	        $result = json_decode($result, true);
	        if ($result['success'] !== true) {
	            $APPLICATION->throwException("Вы не прошли проверку");
	            return false;
	        }
	    } else {
	        $APPLICATION->ThrowException('Вы не прошли проверку');
	        return false;
	    }
	}
	
AddEventHandler('form', 'onBeforeResultAdd', 'my_onBeforeResultAdd');

Подробнее о файле init.php можно прочитать в обучающих материалах Битрикс https://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=2916

Теперь reCaptcha должна работать.

Проблема с формами в режиме ajax

Если ваша Битрикс форма работает в режиме ajax, то reCaptcha будет работать некорректно. Например при поялении ошибок валидации формы, reCaptcha не будет отображаться.

Я решил это так:

Сначала строчку

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

нужно добавить в сам шаблон формы, а не в файл header.php шаблона как указано в шаге № 2.

Дальше нужно отследить событие onAjaxSuccess и перерисовать капчу, я сделал это добавив в файл bitrix/templates/.default/js/common.js код:

$(document).ready(function(){
	…
	…
	//Добавляем этот код
        BX.addCustomEvent('onAjaxSuccess', function(){
	    grecaptcha.render('g-recaptcha', {
	       'sitekey' : '6LexQ88UAAAAAGPs1eC9GFv0thZ7bHP2z6bIYbEU'
	});
});

После этого reCaptcha заработала 🙂

ajaxgoogleбитрикс