Две или более reCaptcha на одной странице.

Опубликовано: 08 Мая 2017

Полностью скопировано (без редактирования) отсюда. Проверено, пример рабочий.

Столкнулся недавно с необходимость прикрутить проверку reCaptcha 2.x на все формы сайта на Joomla. Каких то вменяемых решений в интернете не нашлось, поэтому пришлось искать корень проблемы самому и, в глубинах буржуйской документации, решение таки нашлось.
Серверная сторона нас в этой ситуации не интересует, с ней проблем нет, так что сразу переходим к клиентской стороне. Для начала добавим на страницу api самого  reCaptcha (можно HEAD, можно в BODY, на ваше усмотрение):

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Если делаете для Joomla, то код выше лучше добавить в основной шаблон и если у вас уже установлен плагин типа "NO CAPTCHA reCAPTCHA!" (recaptchanew), то в плагине надо найти и закомментировать строчку:

 JHtml::_('script', 'https://www.google.com/recaptcha/api.js');

Теперь добавим в наши формы блоки div для captcha (не забываем обязательно указывать у блоков уникальный id):

    <form action="?" method="POST">
      ...
      <div id="recaptcha1"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    ...
    <form action="?" method="POST">
      ...
      <div id="recaptcha2"></div>
      <br>
      <input type="submit" value="Submit">
    </form>

Ну а теперь сам javascript для создания форм:

<script type="text/javascript">
      var onloadCallback = function() {
        mysitekey = 'your_site_key';
        grecaptcha.render('recaptcha1', {
          'sitekey' : mysitekey
        });
        grecaptcha.render('recaptcha2', {
          'sitekey' : mysitekey,
          'theme' : 'dark', //default - light
          'type' : 'audio', //default - image
          'size' : 'compact', //default - normal
          'tabindex' : 1, //default - 0
          'callback' : , //function on success
          'expired-callback' : //function when response expires
        });
      };
</script>

Не забываем заменить  your_site_key на ваш секретный ключ выданный Google !
Для второй формы описаны все настраиваемые параметры
Вот собственно и всё. По аналогии можно сделать и на большее количество форм.

 

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: