Реализовать новый невидимый reCaptcha от Google

Я создаю веб-сайт PHP, где я хотел бы поместить капчу в форму входа в систему. Я пошел с новым Google невидимый reCaptcha но у меня возникли проблемы с его реализацией (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. пожалуйста, убедитесь, что ваш ключ сайта, который был занесен в белый список для невидимого reCAPTCHA.

  3. включить невидимый reCAPTCHA, а не поставить параметры в div, вы можете добавить их непосредственно к кнопке html.

    3a. data-callback="". Это работает так же, как флажок captcha, но требуется для невидимого.

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

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

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

20
html php recaptcha

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>

здесь есть что-то новое, data-badge. Это div, который вставляется в DOM, который содержит входные данные, необходимые для функционирования reCAPTCHA. Он имеет три параметра: bottomleft, bottomright, inline. 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>

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

27

Если вы ищете полностью настраиваемое общее решение, которое будет работать даже с несколькими формами на одной странице, Я буду явно отображать виджет reCaptcha с помощью render=explicit и 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/

надеюсь, что это помогает!

18

вот как реализовать клиент + сервер (php) невидимая функциональность reCaptcha:

  • Стороне Клиента
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reCaptcha</title>

    <!--api link-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!--call back function-->
    <script>
        function onSubmit(token) {
            document.getElementById('reCaptchaForm').submit();
        }
    </script>
</head>
<body>
<div class="container">
    <form id="reCaptchaForm" action="signup.php" method="POST">
        <input type="text" placeholder="type anything">
        <!--Invisible reCaptcha configuration-->
        <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
        <br/>
    </form>
</div>
</body>
</html>
  • проверка на стороне сервера: создать Регистрация.в PHP 
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = '<your secret key>';
    $response = $_POST['g-recaptcha-response'];     
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
    $result = json_decode($reCaptchaValidationUrl, TRUE);

    //get response along side with all results
    print_r($result);

    if($result['success'] == 1) {
        //True - What happens when user is verified
        $userMessage = '<div>Success: you\'ve made it :)</div>';
    } else {
        //False - What happens when user is not verified
        $userMessage = '<div>Fail: please try again :(</div>';
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reCAPTCHA Response</title>
    </head>
    <body>
        <?php
            if(!empty($userMessage)) {
                echo $userMessage;
            }
        ?>
    </body>
</html>
14

  1. войдите в свой аккаунт google

  2. посетите ссылку Google recaptcha.

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

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

-3