Установка Google Recaptcha v3 на контактную форму prestashop 1.7.х.
Итак, приступим. Для начала возьмем необходимые параметры капчи. У вас должен быть гугл аккаунт. Переходим на https://www.google.com/recaptcha/intro/v3.html и жмем Admin console:
Заполняем информацию о домене. Копируем Ключ сайта и Секретный ключ. Понадобятся только эти два параметра:
Для удобства внедрения функционала, будем использовать модуль contactform, который идет в базовой версии престашоп:
Данный модуль обрабатывает запросы из контактной формы используя уже установленный виджет.
Итак, находим \themes\classic\modules\contactform\views\templates\widget\contactform.tpl шаблон модуля, который выводит контактную форму стандартной темы для фронт офиса.
По инструкции установки капчи, необходимо вставить следующие строки в шаблон:
|
1 2 3 4 5 6 7 8 |
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) { ... }); }); </script> |
Вставим их в самое начало файла contactform.tpl, перед тегом section и немного изменим, подставив данные (Ключ сайта), который был получен из настроек капчи. Также пропишем action и input для передачи токена. В результате получится такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{literal} <script src="https://www.google.com/recaptcha/api.js?render=testAACl-xWghm2xyTXDY7hMGo6"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('testAANCl-xWghm2xsYWlyyTXDY7hMGo6', {action: 'contactpage'}).then(function(token) { document.getElementById('g-recaptcha-token').value=token; }); }); </script> {/literal} |
Для передачи токена, пропишем input в теле формы (после 139 строки):
|
1 |
<input id="g-recaptcha-token" name="g-recaptcha-token" type="hidden" /> |
Итак, форма готова, осталась обработка сервера. Запрос будет обрабатываться через \modules\contactform\contactform.php. Найдем в нем, функцию sendMessage и изменим, вставив в самое начало функции, такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//captcha changes $g_secret_key = 'testAAAAOrelMxLZqzlewEE5jg1WMlLb'; $g_recaptcha_token = Tools::getValue('g-recaptcha-token'); $g_response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$g_secret_key."&response={$g_recaptcha_token}"); $g_response_arr = json_decode($g_response); if ($g_response_arr->success != true || $g_response_arr->action != 'contactpage' || $g_response_arr->score <= 0.5) { $this->context->controller->errors[] = $this->trans( 'Captcha is not correct.', [], 'Shop.Notifications.Error' ); return; } //#captcha changes |
Такой код, получает значение токена из формы отправки, отправляет его для проверки на сервер гугла. После получения ответа от сервера выводится сообщение о неверной капче и прерывается обработка функции:
Или продолжается в случае успешного результата:
Архив, с двумя файлами можете скачать здесь. Использованная версия модуля contactform = 4.1.1: