Recaptcha несколько форм на одной странице
Мне приходилось разрабатывать капчи самостоятельно, но, стоит честно заметить, что все они не дотягивают до уровня рекапчи. Да что говорить – сам гугл её использует. И вот, на одном из проектов, надо было установить капчу (поставить защиту от накрутки) и я решил поставить именно рекапчу. И эта, казалось бы элементарная процедура, вызвала некоторые сложности. Именно о них и пойдет речь ниже.
Сначала добавляем на страницу
Получаем пост запрос
И если все в порядке
Инициализируем курл и отправляем запрос по адресу гугла
Если запрос подтвержден
На странице не забываем добавить в форму класс
Теперь все отлично у нас работает.
Несколько рекапч на одной странице
Однако, если вы попробуете добавить две или более рекапчи на одну страницу, то у вас будет отображаться только одна. Это не баг – разработчик дал пояснение, что только одна рекапча может отображаться на странице в один момент времени. Неужели нет выхода? Есть! Мы используем некоторую хитрость и JavaScript. В начале страницы вставьте такую функцию:
А в нужных местах вот эти дивы:
Здесь мы пользуемся методом grecaptcha.render и динамически вызываем рекапчу. Работает? Работает!
Итак, вот так просто можно поставить рекапчу на сайт, причем сразу несколько штук. Если у вас есть вопросы по поводу капчи, защиты сайта или любые другие по скриптам или расширению функциональности сайтов, то вы в любое время можете написать мне на почту up777up@yandex.ru или прямо в скайп up777u2 – за небольшое денежное вознаграждение я вам с удовольствием помогу. Выполню практически любые работы по сайтам, блогам, порталам, форумам – на php, js.
заметки, капча, рекапча, php, сайтостроение
ReCaptchaV2 и несколько форм на одной странице
Особенности использования ReCaptchaV2 в MODX, если у вас на странице более чем одна форма.
Отличный компонент ReCaptchaV2 обеспечивает хорошую защиту от ботов и в целом простую установку на сайт, некоторые трудности могут возникнуть, если на вашей странице присутствует более чем одна форма, например «Обратный звонок» + «Оставить комментарий». Проблема в том, что простой сниппет recaptchav2_render, предназначенный непосредственно для вывода капчи, каждый раз будет подключать API от google и использует один и тот же идентификатор для блока, в котором нужно выводить капчу.
Поэтому нужно подключить все в ручную:
Шаг 1. Подключаем в секции head нашей страницы api recaptcha:
Обращаем внимание, что для указания языка мы можем использовать системную настройку cultureKey. Кроме того, мы используем параметр onload, который всплывет в шаге 3.
Шаг 2. В тех местах форм, где нам нужны «I`m not Robot», добавляем слои для помещения в них капчи:
Здесь важно! Атрибут class — оставляем единым, а вот id — делаем различным и уникальным, например captcha_callback, captcha_comment и т.д.
Шаг 3. Отображаем капчу, при помощи небольшого скрипта, размещенного или в конце страницы или в вашем js файле:
Что происходит? Да просто ищем наши слои (используя css класс captcha-item), а затем вызываем метод render, указывая ему в качестве параметра id этого слоя.
На этом клиентская часть готова и капча должна отображаться в нужных местах.
Вся серверная часть остается стандартной, т.е. мы используем hook recaptchav2 (не забывая его ставить до иных хуков, например email). Если капча не проходит — то у нас будет установлена ошибка recaptchav2_error, доступная в плейсхолдере
Recaptcha несколько форм на одной странице
Многие сталкивались с тем, что стандартная Captcha от Битрикс не справляется со спам ботами, как не настраивай ее. Даже, сделав ее практически не читаемой людьми, боты все-равно ее обходят.
Выход только в том, чтобы использовать капчи более продвинутые, логические и т.п., которых нет в Битриксе.
Делаем все по шагам:
1. Заходим в личный кабинет ReCaptcha в Google https://www.google.com/recaptcha/admin#list, для этого у вас должен быть аккаунт в гугл, т.е. заведенная почта. И в этом личном кабинете добавляем сайт, на который встраиваем ReCaptcha. После добавления сайта вы получите 2-а ключа, которые нам нужны дальше.
2. Скачиваем библиотеку ReCaptcha тут https://github.com/google/recaptcha, далее из этой библиотеки берем только файлы из директории /SRC/ autoload.php и директорию /ReCaptcha/ и кjпируем их в /bitrix/php_interface/include/ (директорию /include/ нужно создать, ее там изначально нет).
3. Далее в init,php подключаем капчу с ключами, вставляя следующий код в самом начале файла, ну после @require_once ‘include/autoload.php’; define(«RE_SITE_KEY»,»6Lfi5R8TAAAAACpUg7U2IJjuTVMGglUsz-fgTgdu»); define(«RE_SEC_KEY»,»6Lfi5R8TAAAAADVYQPeYcECtyFAQATCoIkruBdhrbn»); Ключи заменяем соответственно на свои, которые получили в личном кабинете.
4. Далее в шаблоне сайта или компонента подключаем js с Google:
5. В шаблоне компонента (template.php), в месте отображения капчи вставляем код:
Как подключить несколько ReCaptcha на одной странице.
Кто пробовал уже поняли, что на странице будет отображаться только одна капча, а если у нас, например, 2-е и более форм на одной странице?! Решение тоже есть.
1, 2, 3 и 6-й шаги делаем, как описано выше.
4. Далее в КОНЦЕ шаблона сайта или компонента подключаем js с Google:
5. В шаблоне компонента (template.php), в месте отображения капчи вставляем код:
6. Все как описано выше.
7. Вставляем javascript инициализации, у Google в примере он находится в head, но мы размещали и после всех форм, т.к. нужно было генерировать после цикла foreach и все тоже работало. Код следующий:
Дальше все должно работать, проверено. Удачи!
Несколько форм с reCAPTCHA на одной странице
Установить несколько форм с reCAPTCHA на одной странице, при условии, что данные с форм отправляются обычным сабмитом, не составляет труда. Ведь при обычной отправке страница перезагружается и все reCaptcha обновляются вместе со страницей. Но как быть, если отправка данных осуществляется с помощью ajax? Решение есть и оно довольно простое.
Если вы уже установили reCaptcha на свой сайт, по инструкции изложенной в этой статье и внесли правки в сниппет, о которых написано здесь, то вам осталось сделать совсем немного.
Как отправлять и обрабатывать ajax данные с форм решать вам. Самый популярный способ описан здесь и мы его тоже используем.
Теперь начнем:
Во первых, нужно закрыть комментарием вызов javascript reCAPTCHA в нашем сниппете и вызывать его в шаблоне страницы, потому, что если форм несколько, то каждая из них будет добавлять этот вызов в HEAD страницы.
Во вторых, если форм больше одной, то потребуется обработать каждую reCAPTCHA по отдельности, для чего нам понадобятся две небольших JavaScript функции. Подробнее об этом читайте у разработчиков Google reCAPTCHA.
Итак, закрываем в сниппете комментарием эту строку:
В HEAD страницы сайта ставим вызов javascript reCAPTCHA:
Как вы заметили, после загрузки он обращается к функции onReCaptchaLoad, которую мы пропишем в самом низу страницы (можно вынести в отдельный файл со скриптами). Функция нужна для первоначального рендеринга виджетов reCAPTCHA.
Еще нам понадобится функция для сброса reCAPTCHA:
И, наконец, в функцию получения ajax ответа из упомянутой статьи нужно добавить вызов функции recaptchaReload с ID блока содержащего форму:
Не так уж и сложно.
Вы могли заметить, что в функции recaptchaReload используется не grecaptcha.reset, а grecaptcha.render.
Это вызвано тем, что у виджета reCAPTCHA в нашей форме, ID устанавливается динамически скриптом и меняется при получении ajax ответа.