Я создаю сайт PHP, где я хотел бы поставить капчу в форму входа. Я пошел с новым Invisible reCaptcha Google, но у меня возникли проблемы с реализацией это (HTML часть, PHP работает).

Код, который я получил сейчас для «обычной» reCaptcha, следующий (согласно инструкциям Google reCaptcha, и это работает):

<form action=test.php method="POST">
   <input type="text" name="email" placeholder="Email">
   <input type="password" name="password" placeholder="Password">

   <!-- <Google reCaptcha> -->
   <div class="g-recaptcha" data-sitekey="<sitekey>"></div>
   <!-- </Google reCaptcha> -->

   <input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>

Когда я зарегистрировался, в электронном письме с подтверждением были отправлены некоторые инструкции (получение подтверждения заняло около 24 часов). Это говорит следующее:

Невидимая интеграция reCAPTCHA

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

  2. Убедитесь, что ключ вашего сайта внесен в белый список для Invisible reCAPTCHA.

  3. Чтобы включить невидимую reCAPTCHA, а не помещать параметры в элемент div, вы можете добавить их непосредственно в кнопку HTML.

    3a . данные обратного вызова = « » . Это работает так же, как флажок капчи, но требуется для невидимого.

    3b . значок данных: это позволяет вам переместить значок reCAPTCHA (то есть логотип и ‘защищен текстом reCAPTCHA '). Допустимые значения: «bottomright» (по умолчанию), «bottomleft» или «inline», которые будут размещать значок непосредственно над кнопкой. Если вы сделаете значок встроенным, вы сможете напрямую контролировать CSS значка.

  4. Проверка ответа пользователя не изменилась.

У меня проблема с реализацией HTML (поэтому мне нужна помощь с шагами 3. 1,2 и 4 работает для меня). Остальное у меня работает с обычным reCaptcha и по инструкции должно быть тоже самое. Я не понимаю, что такое обратный вызов данных и значок данных и как он работает. Пример кода, как реализовать невидимую reCaptcha с настройкой моей формы, был бы великолепен!

31
L.Johnson 10 Дек 2016 в 22:20

4 ответа

Лучший ответ

Невидимый reCAPTCHA

Реализация новой невидимой reCAPTCHA от Google очень похожа на то, как мы добавляем v2 на наш сайт. Вы можете добавить его как собственный контейнер, как обычно, или новый метод добавления его в кнопку отправки формы. Я надеюсь, что это руководство поможет вам на правильном пути.

Автономный контейнер CAPTCHA

Реализация recaptcha требует нескольких вещей:

- Sitekey
- Class
- Callback
- Bind

Это будет вашей конечной целью.

<div class="g-recaptcha" data-sitekey="<sitekey>" 
   data-bind="recaptcha-submit" data-callback="submitForm"> 
</div>

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

Обратный вызов также должен быть использован для отправки формы. Невидимая капча отменит все события с помощью кнопки отправки, поэтому вам необходим обратный вызов, чтобы фактически передать отправку.

<script>
function submitForm() {
    var form = document.getElementById("ContactForm");
    if (validate_form(form)) {
        form.submit();
    } else {
        grecaptcha.reset();
    }
}
</script>

Обратите внимание, что в примере обратного вызова также есть проверка пользовательских форм. Очень важно, чтобы вы сбрасывали reCAPTCHA в случае сбоя проверки, иначе вы не сможете повторно отправить форму, пока не истечет срок действия CAPTCHA.

Невидимая кнопка CAPTCHA

Во многом это то же самое, что и с автономной CAPTCHA выше, но вместо контейнера все помещается на кнопку отправки.

Это будет вашей целью.

<button class="g-recaptcha" data-sitekey="<sitekey>" 
   data-callback="submitForm" data-badge="inline" type="submit">
  Submit</button>

Здесь есть что-то новое, значок данных. Это div, который вставляется в DOM и содержит входы, необходимые для работы reCAPTCHA. У него есть три возможных значения: нижний левый, нижний правый, встроенный. Inline заставит его отображаться прямо над кнопкой отправки и позволит вам управлять тем, как вы хотите, чтобы он был стилизован.

На ваш вопрос

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>

    <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>

Или же

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>

Надеюсь, это поможет вам и будущим программистам. Я буду держать это в курсе, как технология развивается.

34
MiFreidgeim SO-stop being evil 12 Дек 2018 в 09:56

Вот рабочий пример:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReCAPTCHA Example</title>
</head>
<body>
<div class="container">

  <form method="post" action="/contact/" id="contact-form">
    <h3 class="title-divider">
      <span>Contact Us</span>
    </h3>
    <input type="text" name="name">
    <div class="captcha"><!-- BEGIN: ReCAPTCHA implementation example. -->
      <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY" data-callback="onSuccess" data-bind="form-submit"></div>
      <script>
          var onSuccess = function (response) {
              var errorDivs = document.getElementsByClassName("recaptcha-error");
              if (errorDivs.length) {
                  errorDivs[0].className = "";
              }
              var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
              if (errorMsgs.length) {
                  errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
              }
              document.getElementById("contact-form").submit();
          };</script><!-- END: ReCAPTCHA implementation example. -->
    </div>
    <button id="form-submit" type="submit">Submit</button>
  </form>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
</body>
</html>

Не забудьте изменить YOUR_RECAPTCHA_SITE_KEY на ключ своего сайта Google ReCAPTCHA.

Следующим шагом является проверка данных. Это делается с помощью запроса POST к конечной точке https://www.google.com/recaptcha / api / siteverify, содержащий ваш секретный ключ и данные из reCAPTCHA, идентифицируемые g-recaptcha-response . Есть много разных способов сделать это в зависимости от вашей CMS / Framework.

Возможно, вы заметили значок reCaptcha в правом нижнем углу экрана. Это существует для того, чтобы пользователи знали, что форма защищена reCaptcha теперь, когда флажок проверки снят. Однако этот значок можно скрыть, настроив его как встроенный, а затем изменив его с помощью CSS.

<style>
    .grecaptcha-badge {display: none;}
</style>

Обратите внимание, что, поскольку Google собирает информацию о пользователях, чтобы включить функцию reCaptcha, их условия обслуживания требуют, чтобы вы предупреждали пользователей о ее использовании. Если вы скрываете значок, вы можете вместо этого добавить информационный абзац где-нибудь на странице.

0
dtar 17 Май 2019 в 08:40
  1. Войдите в свой аккаунт Google

  2. Посетите ссылку Google Recaptcha.

  3. Затем перейдите по ссылке на интеграцию кода, следуйте коду для проверки клиента и сервера. https://developers.google.com/recaptcha/docs/invisible

  4. Увеличьте или уменьшите уровень безопасности один раз после создания рекапчи, перейдите к дополнительным настройкам здесь, https: / /www.google.com/recaptcha/admin#list

-5
LQPQueue 5 Май 2017 в 02:13

Если вы ищете полностью настраиваемое общее решение, которое будет работать даже с несколькими формами на одной странице, я буду явно отображать виджет reCaptcha, используя render = явный и onload = Параметры aFunctionCallback .

Вот простой пример:

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
    <input type="text" name="first-name-1"> <br />
    <input type="text" name="last-name-1"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<br /><br />

<form action="" method="post">
    <input type="text" name="first-name-2"> <br />
    <input type="text" name="last-name-2"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<script type="text/javascript">

  var renderGoogleInvisibleRecaptcha = function() {
    for (var i = 0; i < document.forms.length; ++i) {
      var form = document.forms[i];
      var holder = form.querySelector('.recaptcha-holder');
      if (null === holder){
        continue;
      }

      (function(frm){

        var holderId = grecaptcha.render(holder,{
          'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
          'size': 'invisible',
          'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
          'callback' : function (recaptchaToken) {
            HTMLFormElement.prototype.submit.call(frm);
          }
        });

        frm.onsubmit = function (evt){
          evt.preventDefault();
          grecaptcha.execute(holderId);
        };

      })(form);
    }
  };


</script>

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

</body>
</html>

Как видите, я добавляю пустой элемент div в форму. Чтобы определить, какие формы должны быть защищены с помощью reCaptcha, я добавлю имя класса к этому элементу. В нашем примере я использую имя класса 'recaptcha-holder'.

Функция обратного вызова перебирает все существующие формы и, если она находит наш внедренный элемент с именем класса 'recaptcha-holder', она отображает виджет reCaptcha.

Я использую это решение на моем невидимом reCaptcha для плагина WordPress. Если кто-то хочет посмотреть, как это работает, плагин доступен для скачивания в каталоге WordPress:

https://wordpress.org/plugins/invisible-recaptcha/

Надеюсь это поможет!

22
Mch 24 Дек 2016 в 06:37