Привет всем!
Вводная часть
Наконец, я созрел опубликовать следующую часть серии про работу с Yandex SmartCaptcha. Тому послужило несколько причин. Во-первых, я увидел, что моя первая статья на первом экране в поисковой выдаче Яндекса по запросу "Yandex SmartCaptcha". Во-вторых, что более важно, появилось некое законченное удачное решение. Я имею ввиду - внедрение у клиента. Есть еще третий фактор. Мне хотелось бы как-то сделать, чтобы обойтись без копирования интересующего компонента в свое пространство компонентов. Этот момент пока не получился, но я думаю, и буду экспериментировать.
Задача
Установить каптчу для блокирования спама в форме "Заказать звонок" / "Обратный звонок" в решении "Аспро: Корпоративный сайт 3.0". Отдельная история, как я искал нужный компонент. Об этом тоже скоро будет отдельная статья.
Решение
Для начала заходим в консоль облачных сервисов Яндекса. Образаю внимание, что не так давно адрес изменился и теперь он https://console.yandex.cloud.
Создание каптчи
Видим дашборд с нашими сервисами.
Кликаем на Yandex SmartCaptcha. Попадаем в список каптч.
Нам необходимо создать новую каптчу (кнопка в правом верхнем углу, на скрине выделено красным)
На скрине выше зеленым выделены параметры, которые я изменял.
Обязательно нужно задать латинскими буквами имя каптчи.
Выберем основное задание - чекбокс (флажок) как-то привычнее.
Дополнительное задание - мне нравятся силуэты, свежо и необычно. Лучше, чем выбирать светофоры и пешеходные переходы.
Сложность я оставляю среднюю. Также задаю список доменов, можно задать несколько. Можно проверку доменов отключить, но мне кажется, что не стоит.
Внешний вид я выбирал стандартный, детальную настройку не проводил. Для скрина раскрыл форму, что так можно.
Прикольно, что на экране слева форма параметров, а справа искомая каптча. Нам показывает, как она будет выглядеть.
Нажимаем кнопку "Создать" (выделено красным). Возвращаемся в список каптч, наша каптча там появилась.
В правой части соответствующей строки нажимаем нопоку в виде трех точек, и в контекстном меню нажимаем кнопку "Подключить".
Здесь нас интересуют исходные коды для HTML и PHP. На скрине изображен исходный код HTML для подключения каптчи. Здесь уже сразу указан клиентский ключ Исходный код PHP находится в соответствующей вкладке.
Скопируем исходные коды и закроем форму.
Прочие параметры каптчи находятся на детальной странице каптчи. В нее можно перейти, если кликнуть в списке каптч в любом месте строки нужной каптчи.
Здесь можно увидеть все ранее настроенные параметры каптчи, но прежде всего нас интересует ключ клиента и ключ сервера. При наведении на ключ сервера появляется кнопка "Скопировать".
Теперь все готово, чтобы перейти в Битрикс.
Установка каптчи в Битриксе
Находим нужный компонент.
Установка каптчи состоит из двух этапов. Настройка отображения каптчи, которая выполняется в файле template.php нужного шаблона компонента, и настройка проверки каптчи, для которой нужно модифицировать файл component.php (или class.php) нужного компонента.
Сначала первый этап.
Поиск по файлам показал, что за форму обратной связи отвечает компонент aspro::form.allcorp3 (кто бы мог подумать).
Копируем компонент в свое пространство компонентов.
Выясняем, что за всплывающую форму отвечает шаблон - popup. Открываем его файл template.php. И ищем что-нибудь связанное с captcha
Находим блок со 104 по 117 строку в моем случае. Можно искать по слову captcha
И меняем его на код яндекса
Не забываем вставить подключение файла скрипта (104 строка) и контейнер. Не забываем проверить клиентский ключ и сохраняем файл.
На этом этапе отображение каптчи должно работать.
Второй этап
Открываем файл component.php. Аналочино ищем что-нибудь про каптчу.
У меня это блок с 516 по 523 строку. Опять таки можно искать по слову captcha
Начиная с 516 строки вставляем код Яндекса. Чуть его модифицируем под Битрикс. Код, который проверяет стандартную каптчу, можно не удалять.
У меня он не влез в скриншот, поэтому приведу его полностью, и немного прокомментирую, что и где меняем.
define('SMARTCAPTCHA_SERVER_KEY', ' );
function check_captcha($token) {
$ch = curl_init();
$args = http_build_query([
"secret" => SMARTCAPTCHA_SERVER_KEY,
"token" => $token,
"ip" => $_SERVER['REMOTE_ADDR'], // Нужно передать IP пользователя.
// Как правильно получить IP зависит от вашего прокси.
]);
curl_setopt($ch, CURLOPT_URL, "https://smartcaptcha.yandexcloud.net/validate?$args");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$server_output = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpcode !== 200) {
$arResult["FORM_ERRORS"][]="Allow access due to an error: code=$httpcode; message=$server_output\n";
$captcha_error = true;
}
$resp = json_decode($server_output);
return $resp->status === "ok";
}
$token = $_REQUEST['smart-token'];
if (check_captcha($token)) {
//echo "Passed\n";
} else {
$arResult["FORM_ERRORS"][] = "Не пройдена Captcha";
$captcha_error = true;
}
Номера строк буду давать по своему редактору в Битриксе.
Строка 517 - define('SMARTCAPTCHA_SERVER_KEY', ' '); - не забываем серверный ключ.
Обращение через curl можно было бы переписать на классы Битрикс, но пока работает и так. Вам может пондобится включить этот модуль php на вашем сервере. Например, в bitrixvm он по умолчанию выключен, если мне не изменяет память.
Для строки 524 - "ip" => $_SERVER['REMOTE_ADDR'], - нужно проверить, в какой серверной переменной передается ip-адрес пользователя, и при необходимости поправить. У меня работает и так, но бывают варианты.
Строку 536 - echo "Allow access due to an error: code=$httpcode; message=$server_output\n"; - меняем на - $arResult["FORM_ERRORS"][]="Allow access due to an error: code=$httpcode; message=$server_output\n"; - для сохранения ошибки и дальнейшего вывода ошибки на форму.
Добавляем строку 537 - $captcha_error = true; - для установки статуса ошибки.
Строку 545 - echo "Passed\n"; - комментируем. Нам не нужно, чтобы что-то выводилось на страницу. Просто продолжится исполнение кода, форма закроется, письмо с результатами формы отправится.
Строку 547 - echo "Robot\n"; - меняем на $arResult["FORM_ERRORS"][] = "Не пройдена Captcha";- для сохранения ошибки и дальнейшего вывода ошибки на форму.
Добавляем строку 548 - $captcha_error = true; - для установки статуса ошибки.
Сохраняем файл.
Не забываем изменить вызов компонента в файле /ajax/form.php на наш компонент.
Все должно работать. Результат показан на скрине.
Пишите в комменты, если у вас что-то не получилось, будем разбираться. Также вы можете задать вопрос, связанный с Битриксом и вебом, и я постараюсь подготовить статью.
Вы также можете обратиться ко мне по вопросам обслуживания и доработок ваших сайтов на Битриксе и облачных и коробочных корпоративных порталов Битрикс24 на электронную почту. Также я являюсь партнером Битрикса и прдаю лицензии. Вы очень поможете, если купите лицензию или ее продление через меня.
Здесь предыдущая серия
Подписывайтесь на канал. Спасибо