Новая Google reCAPTCHA(v2) для FormIt


Наткнулся на дополнение ReCaptchaV2, позволяющее добавить новую капчу в FormIt.

Подробнее о новой reCAPTCHA здесь.

Для начала нужно сгенерировать API ключ для домена https://www.google.com/recaptcha/admin и добавить его в System Settings.

Пример использования


[[!FormIt?
   &hooks=`recaptchav2,email`
   ...
]]

<div class="form-item">
    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]
</div>

Проект на GitHub: https://github.com/sepiariver/recaptchav2
Пакет: http://modx.com/extras/package/recaptchav2
Игорь Терентьев
25 февраля 2015, 05:13
modx.pro
37
21 488
+11

Комментарии: 66

Андрей Сухомозгий
25 февраля 2015, 10:49
0
А если через AjaxForm делать? Все то же самое? Просто чет не заводится она. Будто игнорирует капчу и письма не отправляет…
Андрей Сухомозгий
25 февраля 2015, 11:18
2
+3
UPD:
Что бы работало с AjaxForm сделал так: в &validate добавил g-recaptcha-response:required.
А в чанк с формой добавил
<span class="error_g-recaptcha-response error"></span>
Все завелось и работает)
Иван Брежнев
25 февраля 2015, 13:53
+1
Классная капча, давно её использую, отлично что под MODX появилась)
Игорь Терентьев
26 февраля 2015, 09:55
0
На GitHub подсказали еще хук noCaptcha
https://github.com/bvandorp/noCaptcha
Ilya Z.
24 марта 2015, 12:54
+2
Отличное дополнение)

Была проблема с ее использованием в AjaxForm. После того, как снова вызывалась форма отправки, капча была валидна, но письмо не отправлялось, т.к.
response.data
содержала ошибку капчи. Решил добавлением:

if (typeof $('#recaptcha') != "undefined") 
    grecaptcha.reset();
если
response.success = true
    Купчинский Михаил
    24 марта 2015, 18:35
    0
    Та же проблема, но не могу понять куда этот код добавить)
      Ilya Z.
      25 марта 2015, 09:26
      0
      Для сниппета AjaxForm нужно указать параметр:

      &frontend_js=`assets/template/js/default.js`

      Далее копируем дефолтный скрипт assets/components/ajaxform/js/default.js и добавляем свой код:

      else {
          AjaxForm.Message.success(response.message);
          form.find('.error').removeClass('error');
          form[0].reset();
          
          if (typeof $('#recaptcha') != "undefined") 
              grecaptcha.reset(); //добавляем сброс сессии для капчи
      }

      Либо дописываем прямо в дефолтном скрипте, тогда и &frontend_js не нужно писать.
        Купчинский Михаил
        25 марта 2015, 12:09
        0
        Спасибо. Примерно так и делал раньше) Только немного в другое место подставлял.
        Сейчас подставил в правильное место (пока прямо в изначальный скрипт) — но эффект тот же.
        Но как оказалось не везде — а только на главной странице сайта.
        На внутренних страницах все отлично работает.
        На главной же После первой отправки формы и обновлении страницы перестает подгружаться default.js joxi.ru/12MQYYeTGl8y2J
          Ilya Z.
          25 марта 2015, 12:14
          0
          «обновлении страницы перестает подгружаться default.js» довольно странно…

          ну попробуйте задать кастомный скрипт (&frontend_js).
          если не поможет, то скиньте ссылку на главную страницу сайта.
            Купчинский Михаил
            25 марта 2015, 12:17
            0
            На внутренних страницах все грузится joxi.ru/nAyXxxYFNgGP2Z
            На главной даже после закрытия браузера и открытия снова скрип не подгрузился.
            Вот ссылка www.pit-sport.ru/
              Купчинский Михаил
              25 марта 2015, 12:23
              0
              После очистки кеша на главной скрипт грузится joxi.ru/J2b5VV4hE05Xm6
              А после отправки сообщения и перезагрузки страницы опять не грузится скрипт joxi.ru/82Q7QQeTbwpkrd
                Ilya Z.
                25 марта 2015, 12:32
                0
                вы вообще ajaxform используете? потому что после каждой отправки формы («ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК») происходит перезагрузка страницы, чего не должно быть, если вы правильно ajaxform настроили…

                тем не менее, у меня даже после первой загрузки главной ajaxform не подключился. скорее всего вы formit используете на главной.
                  Купчинский Михаил
                  25 марта 2015, 12:36
                  0
                  Да formit используется на главной. Вроде всегда так делал)
                  Сейчас покопаюсь — может я что-то упустил
                    Ilya Z.
                    25 марта 2015, 12:39
                    0
                    вы сделайте ajaxform, как на внутренних, а то решение пишется для ajaxform, а используется в итоге formit :)
                      Купчинский Михаил
                      25 марта 2015, 12:45
                      0
                      Так на всех страницах одно и тоже решение.
                      На каждой странице грузится модальное окно с вызовом AjaxForm
                      В AjaxForm по умолчанию отправка происходит через Formit.
                      Купчинский Михаил
                      25 марта 2015, 13:01
                      0
                      Судя по всему капча тут не причем. Отключил ее. Проблема не исчезла.
                      Проверил на другом сайте, где все настроено подобным образом — там все ОК с отправкой с главной страницы.
                      Буду разбираться
                    yani
                    20 мая 2015, 08:43
                    0
                    А в чем проблема использовани FormIt на главной странице?
    Klike
    03 апреля 2015, 11:33
    0
    Как можно использовать Google reCAPTCHA(v2) несколько раз на странице?
    Кто-нибудь может сталкивался?
      Илья
      03 апреля 2015, 11:49
      0
      Столкнулся и отказался от его использования, добавил еще один скрытый инпут с проверкой на пустоту
        Klike
        03 апреля 2015, 11:51
        0
        спасибо :)
      Андрей
      07 февраля 2016, 18:11
      0
      На самом деле можно использовать Google reCAPTCHA(v2) несколько раз на одной странице. Подробности здесь: Multiple reCAPTCHA Implementation on Same Page
      В двух словах: капчу в форме нужно будет рендерить не с помощью сниппета [[recaptchav2_render]], а вставляя в каждую форму div (или другой элемент) с определенным ID, после чего самому прописать строчку загрузки API капчи, и рендерить капчу для каждого div'а из скрипта, повешенного на onload. Все это расписано в статье по ссылке выше, плюс есть пример. В случае с MODX пришлось написать однострочный сниппет, который вытаскивает из системных настроек значение recaptchav2.site_key Правда ничто не мешает прописать этот ключ напрямую в JS-скрипте.
      У меня все заработало.
        Сергей Шлоков
        01 марта 2016, 08:34
        0
        Системные настройки доступны в плейсхолдерах [[++system_setting]].
          Андрей
          01 марта 2016, 13:22
          0
          Вы абсолютно правы. Я часто использую и системные настройки, и настройки контекстов в чанках и снипетах, но тут почему-то сглупил :( [[++recaptchav2.site_key]] решает проблему без всякого сниппета.
          Кстати, капча работает замечательно, спам прекратился.
            timur
            23 марта 2016, 07:46
            0
            Здравствуйте, вы не могли бы поподробнее описать, как решить эту проблему с помощью [[++recaptchav2.site_key]]. Заранее благодарен!
              Андрей
              23 марта 2016, 15:09
              0
              Прописываете ключ прописываете в системных настройках, а потом вставляете в JavaScript'е вызова капчи [[++recaptchav2.site_key]].
                Jury
                28 июля 2016, 06:25
                0
                А как хук добавить?, форма отправляется без капчи, разместил её в
                <form>
                  Андрей
                  28 июля 2016, 17:02
                  0
                  Хук для рекапчи у меня добавлен так: &hooks=`recaptchav2, email` (AjaxForm)
                    Jury
                    30 июля 2016, 19:50
                    0
                    Спс, сработало у меня по id из скрипта recaptcha2, а не работало по причине вызова 3 капч )
    RSS
    RSS
    20 августа 2015, 00:19
    0
    Все работает, но как сделать так, чтобы в письме в поле «От» подставлялся емаил отправителя сообщения? &emailFrom=

    отчего в письме в конце это?:
    g-recaptcha-response: 03AHJ_VusMeoUk5UNuhhvDVwGROt8lTtD8V11R7u3y6ufTairGV4u8Do_3lKSbZGIlMF9kgF0H8yzrTmQjHmAj_HD1jSagBKMya8ipeK3lLkjv9hwqMlOM… вырезан длинный код
    Vladimir Glukhov
    04 сентября 2015, 10:37
    0
    А как в ней настроить вывод сообщения об ошибке на русском?
    Katya Larionova
    28 сентября 2015, 18:41
    0
    Не могу разобраться, как настроить reCAPTCHA
    Какой ключ куда вставлять? http://prntscr.com/8lg8k2
      timur
      23 марта 2016, 05:45
      1
      0
      Разобрался?? У тебя вон вверху на скрине спойлер «Ключи». Раскрой его и там ключики, затем зайди в системные настройки, там выбери RecaptchaV2 и там вставляй в поля private.key — секретный ключ, а в поле public.key — общий ключ.
    Сергей Лим
    01 марта 2016, 08:08
    0
    Не люблю эту каптчу с того времени, как не смог ее пройти на одном из сайтов, даже обновлял картинки, один хрен иногда непонятно
    Sergey Leleko
    15 мая 2017, 22:30
    0
    что делать если «ReCAPTCHA placeholder element must be empty»?
    В шапке я посмотрел апи гугла вызывается упорно дважды. Но нету ни где второго вызова.
    По итогу с последним FormIt и Ajaxform не работает
      Дмитрий
      15 мая 2017, 22:33
      +1
      буквально дня четыре назад поставил и спокойно все работает.
        Sergey Leleko
        15 мая 2017, 22:35
        0
        Поправлюсь… не работает почему то только в формах которые выводятся в модальное окно. В простые формы выводится.
    Sergey Leleko
    16 мая 2017, 07:23
    0
    Спасибо большое Андрею, жаль плюсануть не получается, за статью по мультикаптчам. ОЧень помогло и легко применяется. А главное заодно закрывает вопрос с глюком работы хука как в моем случае, когда апи гугла зачем-то 2 раза подключался. Наверное, чтобы не потерялось попозже все это оформлю статьей в пошаговое руководство, чтобы не потерялось.
      Алексей
      17 мая 2017, 11:29
      0
      Сергей, добрый день!
      Вы бы не могли описать как настроить мультикаптчу? У меня на странице их 3 штуки. Вроде прописал через id и скрипт прикрепил, но что-то они совсем не появляются. Спасибо!
    Эрадж Шамс
    11 ноября 2017, 11:22
    0
    Здравствуйте, а никто не сталкивался с прикруткой reCAPTCHA(v2) на Office?
    Владимир
    21 января 2018, 01:04
    0
    Кто случайно пропустил, настройка параметров g-recaptcha tag attributes and grecaptcha.render parameters которые можно указать в чанке recaptchav2_html
    developers.google.com/recaptcha/docs/display#config
    Как минимум, будут полезны темная тема data-theme или компактный вид data-size.
    Андрей
    11 марта 2018, 15:18
    0
    Скачал дополнение, внес туда публичный и приватный ключ, все делаю как в примере, появляется recaptcha, ставлю галку, но при попытке отправить форму выдает ошибку
    Please select the checkbox in the ReCaptcha image.
    если убрать recaptcha то форма работает корректно.
    Pavel
    08 мая 2018, 14:13
    0
    Добрый день. Подскажите пожалуйста как убрать такую ошибку уж очень их много…
    [2018-05-08 14:05:54] (ERROR @/public_html/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.
      tvset
      11 мая 2018, 15:45
      0
      таже самая проблема, Вам удалось решить?
        Pavel
        11 мая 2018, 15:51
        0
        К сожалению пока не удалось… на трех форумах молчат, сам решить не смог…
          tvset
          14 мая 2018, 20:22
          0
          В баг репор разработчикам написали: github.com/Sterc/FormIt/issues/170
          ждем апгрейда, а пока там есть костыль
            Pavel
            15 мая 2018, 10:56
            0
            Спасибо )))
      Андрей Коробков
      31 мая 2018, 13:20
      1
      0
      Как временное решение — сделайте копию сниппета recaptchav2, назовите его по-другому, например re_captchav2, соответственно в вызове &hooks=`re_captchav2,...`.
      Там дело в чем — formIt проверяет функцией strpos (вроде ей или типа нее, недели две назад как раз тоже самое было — разбирался, как раз в обновленном formIt), присутствует ли в hooks слово recaptcha, если присутствует — пытается загрузить свои классы для рекапчи — а там ошибка возникает, не вдавался уже в детали, некогда было.
        Андрей Коробков
        31 мая 2018, 16:42
        0
        Редактировать уже не могу — выше написан баг репот github.com/Sterc/FormIt/issues/170 — там как раз предлагают добавить в if условие вместе с $this->formit->hasHook('recaptcha')
        а там в самом hasHook — return strpos($this->config['hooks'], $hook) !== false;
        а сам вызов if ($this->formit->hasHook('recaptcha')) {… — тут подключаются классы рекапчи от formIt
    алексей
    25 мая 2018, 14:53
    0
    присоединяюсь, та же проблема
    Vladimir Glukhov
    13 июня 2018, 11:05
    0
    та же проблема
    [2018-06-13 10:59:43] (ERROR @ /home/vgl/antalyaelitestroy.com/www/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Невозможно загрузить класс reCaptcha.
    [2018-06-13 11:02:26] (ERROR @ /home/vgl/antalyaelitestroy.com/www/core/components/formit/src/FormIt/Request.php: 87) [FormIt] Could not load FormItReCaptcha service class.
    Никита
    19 июля 2018, 13:16
    0
    Добрый день. При выводе рекапчи не передается sitekey. Т.е. атрибут data-sitekey пустой. Ключи в настройках добавил.
    Код вывода формы:
    [[!FormIt?
                        &hooks=`recaptchav2,email`
                        &emailTpl=`emailTpl`
                        &emailSubject=`Заявка-анкета`
                        &emailTo=``
                        &emailFrom=``
                        &successMessage=`Сообщение отправлено!`
                    ]]
                    
                    <div class="success-send">[[!+fi.successMessage]]</div>
                    
                    [[!+fi.successMessage:isempty=`[[$partners-form]]`]]
    В чанке partners-form добавлены эти строки:
    [[!recaptchav2_render]]
                    [[!+fi.error.recaptchav2_error]]
    Подскажите пожалуйста, в чем может быть проблема?
      Антон Тарасов
      13 августа 2018, 10:48
      0
      Люббопытно. Как вариант, можно попробовать вызвать явно:
      <div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
      [[!+fi.error.recaptchav2_error]]
    Ника
    13 августа 2018, 09:39
    0
    Здравствуйте!

    Подскажите, пожалуйста, как сделать поле капчи обязательным?
    Если отправить заявку без отметки капчи, то форма не отправляется и редиректится на ошибочную страницу.

    Код:
    [[!FormIt? 
    &hooks=`email,recaptchav2,FormItSaveForm,redirect` 
    &emailTpl=`form-tour-tpl` 
    &emailSubject=`Заказ тура` 
    &emailTo=`rostov@lptravel.ru` 
    &redirectTo=`30` 
    &formName=`Заказаз тура` 
    &formFields=`name,tel,massage`
    &fieldNames=`name==Имя отправителя,tel==Телефон,massage==Комментарий`
    &validate=`name:minLength=^2^,
                 tel:required,
                 g-recaptcha-response:required`
    &validationErrorMessage=`В форме содержатся ошибки!`]]
      Антон Тарасов
      13 августа 2018, 10:54
      0
      А содержимое form-tour-tpl покажете? Никаких js скриптов для обработки сабмита формы не имеете?
      По идее в цепочке хуков email,recaptchav2,FormItSaveForm,redirect, если капча не проходит, до редиректа дойти не должно… поэтому редирект на ошиб. страницу кажется странным. Само использование капчи делает ее обязательной, без нее вы ничего не должны отправить, если конечно все настроено верно. Да,email хук у вас идет первым, поэтому письмо таки улетит до остальных проверок.
        Ника
        13 августа 2018, 13:29
        0
        form-tour-tpl
        Пользователь сайта оставил заявку на заказ тура:<br />
        
        <p><b>Контактная информация:</b></p>
        <p><b>Имя:</b> [[+name]]</p>
        <p><b>Телефон:</b> [[+tel]]</p>
        <p><b>Комментарий:</b> [[+message]]</p>
        Скриптов для обработки сабмита нет…

        Сама форма:
        <form id="modal" method="post" action="[[~29]]">
        		<div id="modal-close"></div>
        		<div id="modal-head">Заказать тур</div>
        		<label for="name">Имя</label>
        		<input type="text" required placeholder="Ваше имя" name="name"/>
        		<label for="tel">Телефон</label>
        		<input type="tel" required name="tel" placeholder="Телефон"/>
        		<label for="message">Комментарии</label>
        		<textarea type="message" name="message" placeholder="Хочу в Таиланд на 10 дней, 2 взрослых..."></textarea>
        	    <div class="form-item">
            		[[!recaptchav2_render]]
                    [[!+fi.error.recaptchav2_error]]
                    <span class="error_g-recaptcha-response error"></span>
                </div>
        		<input type="submit" value="Отправить" onclick="yaCounter36509375.reachGoal('send'); return true;">
        		<p><small>Нажимая на кнопку "Отправить", вы даете согласие <a href="/PDF/obrabotka-personalnih-danix-lptravel.pdf" title="Обработка персональных данных" target="_blank">на обработку персональных данных</a> и соглашаетесь с <a href="polozhenie-o-konfidenczialnosti.html" title="Обработка персональных данных" target="_blank">политикой конфиденциальности</a></small></p>
        	</form>
    Артем
    31 августа 2018, 20:20
    0
    Здравствуйте! Не подскажете, почему может не отображаться [[!++recaptchav2.secret_key]] к примеру на сайте? Все остальные системные параметры отображаются, но вот с последней версией капчи, они не хотят. Ошибок в логах нет. Проверял на другом сайте старую версию капчи, там все отображается. Конечно у сайтов разные хостинги, версии пхп и модкс и тд. Не подскажете, в какую сторону копать?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
66