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

Алексей Будагов,
Подключаем Goolge reCAPTCHA 2 к формам 1С-Битрикс

Стандартная каптча, с вводом непонятных символов это уже "прошлый век". Чаще "каптчи" ставят на различные формы. А эти данные очень важны для владельца сайта, т.к. это может быть заказ услуги, обратная связь, регистрация в партнерском разделе и т.п. Важно что бы защита от ботов не стала проблемой для ваших посетителей.

Что бы установить Google recaptcha 2 на сайт необходимо:
  • Зарегистрировать сайт на https://www.google.com/recaptcha/admin и получить секретные ключи и инструкцию по установке
  • Действовать согласно инструкции.  :) Шучу. Подключаем js библиотеку в header.php или в component_epilog.php компонента с формой.
    <?\Bitrix\Main\Page\Asset::getInstance()->addJs('//www.google.com/recaptcha/api.js');?> 
  • В настройках компонента формы отключите стандартную каптчу.
  • В шаблоне формы находим место подключения стандартной каптчи и меняем на предложенный по инструкции код. Параметр data-sitekey у вас будет свой.
    <div class="g-recaptcha" data-sitekey="6Leh4iETAAAAAM6ybuqexxuK0Sc4Q4MBYK3xO3JZ"></div>
  • Если ваша форма загружается с помощью ajax, просто подключите скрипт api.js в форме, а не в шаблоне сайта.
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  • Для изменения размера каптчи можно использовать параметр "data-size", либо с помощью css
    <div class="g-recaptcha" data-size="compact" ... 
     
    .g-recaptcha { 
    	transform:scale(0.77);
    	transform-origin:0 0; 
    }
  • В файле component_epilog.php шаблона формы получаем ответ от google и сохраняем в сессию пользователя
    <? 
    	$_SESSION['g-recaptcha-response'] = '';
    	if ($_POST['g-recaptcha-response']) {
    		$_SESSION['g-recaptcha-response'] = htmlspecialcharsbx(substr($_POST['g-recaptcha-response'], 0, 3000));
    	} 
    ?>
  • Добавляем обработчик добавления элементов в init.php и смотрим прошел ли пользователь проверку. Не забудьте заменить секретный ключ в POST параметрах и ID инфоблока.
    <?
    	AddEventHandler("iblock", "OnBeforeIBlockElementAdd", "checkGoogleCaptcha");
    
    	function checkGoogleCaptcha(&$arFields) {
    		if ($arFields['IBLOCK_ID'] == 6 && $_REQUEST['iblock_submit']) {
    			global $APPLICATION;
    			if ($_SESSION['g-recaptcha-response']) {
    				$result = file_get_contents(
    					'https://www.google.com/recaptcha/api/siteverify',
    					false,
    					stream_context_create(
    						array(
    							'http' => array(
    							'method' => 'POST',
    							'header' => 'Content-Type: application/x-www-form-urlencoded' . PHP_EOL,
    							'content' => 'secret=6Leh4iETAAAAAO7ynh2PqbbB6AU2orRlKnoIG0tc&response='. 
    								$_SESSION['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;
    			}
    		}
    	}
    ?>
  • Если форма загружается ajax`ом не забудьте обновить каптчу с помощью js-метода grecaptcha.reset();
Опубликовано 7 Июня 2016 | Обновлено 4 Мая 2017
разработчику, юзабилити

Возврат к списку

Комментарии
BarbaraHeems
Понедельник 01:48
Комментарий скрыт
Игорь
7 Дек 2017
Алексей, а можете рассказать подробнее как обновить капчу с помощью grecaptcha.reset()?
Алексей Будагов
Алексей Будагов
7 Дек 2017
Игорь, после успешного выполнения ajax запроса.
Например на jquery:
$.get('path/to/ajax', function(data){
{обновляем форму}
grecaptcha.reset();
});

Вообще в любой момент можете вызвать метод grecaptcha.reset(); и каптча будет обновлена.
Игорь
8 Дек 2017
Спасибо Алексей! Разобрался с вашей помощью! Добавлю, что если компонент работает в режиме "AJAX", то ловим событие onAjaxSuccess и уже в обработчике вызываем grecaptcha.render().
Владимир
8 Авг 2017
Алексей, спасибо за статью! Не понятно только о каком инфоблоке идет речь "Не забудьте заменить секретный ключ в POST параметрах и ID инфоблока"
Алексей Будагов
Алексей Будагов
8 Авг 2017
Владимир, инфоблок в который добавляются элементы из формы, к которой вы подключаете рекаптчу. В обработчике события добавления нового элемента есть проверка на ID инфоблока ($arFields['IBLOCK_ID'] == 6), для того что бы код срабатывал только для определенного инфоблока.
Fhntv
21 Июн 2017
целый день мучаюсь с этой рекапчей. везде она работает, но только не на битриксе.
в общем, ситуаевина какая: component_epilog.php файлы нет. (версия 16 битрикса).
постоянно не верный ключ. даже с гитхаба скачать рекапчу файлы по другим инструкциям. ничего не помогает.
Алексей Будагов
Алексей Будагов
21 Июн 2017
Fhntv, файл component_epilog.php необходимо создать, если его нет.
С Битриксом тяжело работать без изучения курсов и документации. Статья все же для тех кто уже хорошо разбираться в битриксе и кому необходим алгоритм подключения рекаптчи, а не готовый вариант.
Елена
3 Май 2017
Здравствуйте, хотела подключить рекапчу от гугл по вашему описанию, но капча не проходит проверку. И вот эта строка если вставляю выдаёт ошибку <?\Bitrix\Main\Page\Asset::getInstance()->addJs('//www.google.com/recaptcha/api.js');?> Можете подсказать в чём может заключаться моя ошибка?
Алексей Будагов
Алексей Будагов
4 Май 2017
Елена, возможно у вас отключена функция file_get_contents(), проверьте параметр php allow_url_fopen, должен быть On. И похоже у вас старое ядро, используйте вместо "\Bitrix\Main\Page\Asset::getInstance()->addJs();" старый метод: $APPLICATION->AddHeadScript();
andrey
30 Мар 2017
init.php где находится?
Алексей Будагов
Алексей Будагов
30 Мар 2017
andrey, /bitrix/php_interface/init.php или /local/php_interface/init.php. Без необходимых знаний не рекомендую самостоятельно создавать/редактировать данный файл.