ReCaptchaV2 и несколько форм на одной странице

13.02.2017
MODx, Дополнение, Инструкции, Трюки

Особенности использования ReCaptchaV2 в MODX, если у вас на странице более чем одна форма.

Отличный компонент ReCaptchaV2 обеспечивает хорошую защиту от ботов и в целом простую установку на сайт, некоторые трудности могут возникнуть, если на вашей странице присутствует более чем одна форма, например «Обратный звонок» + «Оставить комментарий». Проблема в том, что простой сниппет recaptchav2_render, предназначенный непосредственно для вывода капчи, каждый раз будет подключать API от google и использует один и тот же идентификатор для блока, в котором нужно выводить капчу.

Поэтому нужно подключить все в ручную:

Шаг 1. Подключаем в секции head нашей страницы api recaptcha:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit&hl=[[++cultureKey]]" async defer></script>

Обращаем внимание, что для указания языка мы можем использовать системную настройку cultureKey. Кроме того, мы используем параметр onload, который всплывет в шаге 3.

Шаг 2. В тех местах форм, где нам нужны «I`m not Robot», добавляем слои для помещения в них капчи:

<div class="captcha-item" id="captcha_callback"></div>

Здесь важно! Атрибут class — оставляем единым, а вот id — делаем различным и уникальным, например captcha_callback, captcha_comment и т.д.

Шаг 3. Отображаем капчу, при помощи небольшого скрипта, размещенного или в конце страницы или в вашем js файле:

<script type="text/javascript">
var onloadCaptchaCallback = function() {
  var siteKey = '[[++recaptchav2.site_key]]';
  $('.captcha-item').each(function(index) {
    grecaptcha.render($(this).attr('id'), {
      'sitekey' : siteKey
    });
  });
};
</script>

Что происходит? Да просто ищем наши слои (используя css класс captcha-item), а затем вызываем метод render, указывая ему в качестве параметра id этого слоя.

На этом клиентская часть готова и капча должна отображаться в нужных местах.

Вся серверная часть остается стандартной, т.е. мы используем hook recaptchav2 (не забывая его ставить до иных хуков, например email). Если капча не проходит — то у нас будет установлена ошибка recaptchav2_error, доступная в плейсхолдере

[[!+fi.error.recaptchav2_error]]

ReCaptchaV2 и несколько форм на одной странице

Теги

RSS