隐形reCAPTCHA

Question

我正在构建一个PHP网站，我想在登录表单上放置验证码。我使用Google的新Invisible 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集成



如果您尚未将网站与reCAPTCHA v2集成，请按照我们的开发者指南了解实施细节。



请确保您的网站密钥已被列入不可见的reCAPTCHA白名单。



要启用Invisible reCAPTCHA，而不是将参数放在div中，您可以将它们直接添加到html按钮。

3A。数据回调=””。这就像复选框验证码一样，但是对于隐形验证是必需的。

3B。 data-badge：这允许您重新定位reCAPTCHA徽章（即徽标和“受reCAPTCHA保护”文本）。有效选项为'bottomright'（默认值），'bottomleft'或'inline'，将徽章直接放在按钮上方。如果您将徽章设为内联，则可以直接控制徽章的CSS。



验证用户的回复没有变化。

我遇到的问题是HTML实现（因此我需要第3步的帮助.1,2和4对我有用）。其余的我使用正常的reCaptcha并根据说明，它应该是相同的事情。我不明白数据回调和数据徽章是什么以及它是如何工作的。如何使用我的表单设置实现隐形reCaptcha的代码示例将非常棒！

Answer 1

隐形reCAPTCHA

实施Google的新Invisible reCAPTCHA与我们将v2添加到我们网站的方式非常相似。您可以像平常一样将其添加为自己的容器，或者将其添加到表单提交按钮的新方法。我希望本指南能够帮助您走上正确的道路。

独立CAPTCHA容器

实现recaptcha需要一些东西：

- Sitekey
- Class
- Callback
- Bind

这将是你的最终目标。

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

使用独立方法时，必须将data-bind设置为提交按钮的ID。如果您没有此设置，则您的验证码将不会被隐藏。

还必须使用回调来提交表单。隐形验证码将取消提交按钮中的所有事件，因此您需要回调才能实际传递提交。

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

请注意，示例回调中还有自定义表单验证。验证失败时重置reCAPTCHA非常重要，否则在CAPTCHA到期之前您将无法重新提交表单。

隐形CAPTCHA按钮

其中很多与上面的独立验证码相同，但不是有容器，所有内容都放在提交按钮上。

这将是您的目标。

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

这里有一些新东西，数据徽章。这是一个插入DOM的div，其中包含reCAPTCHA运行所需的输入。它有三个可能的值：bottomleft，bottomright，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>

我希望这可以帮助你和未来的程序员。随着技术的发展，我将保持最新状态。

Answer 2

如果您正在寻找一个完全可自定义的通用解决方案，它甚至可以在同一页面上使用多个表单，我将使用 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小部件。

我一直在我的Invisible reCaptcha for WordPress插件上使用这个解决方案。如果有人想看看它是如何工作的，可以在WordPress目录下载该插件：

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

希望这有帮助！

Answer 3

以下是如何实现客户端+服务器端（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>

服务器端验证：创建 signup.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>

Answer 4

这是一个有效示例：

<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网站密钥。

下一步是实际验证数据。通过向端点https://www.google.com/recaptcha/api/siteverify发出POST请求来完成此请求，该请求包含您的密钥和reCAPTCHA中的数据，该数据由 g-recaptcha-response 标识。根据您的CMS /框架，有很多不同的方法可以完成。

您可能已经注意到屏幕右下角的reCaptcha徽章。存在此信息是为了让用户知道，由于删除了验证复选框，因此表单受reCaptcha保护。不过，可以将其配置为内联，然后使用CSS对其进行修改，从而隐藏该徽标。

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

请注意，由于Google会收集用户信息以启用reCaptcha功能，因此其服务条款要求您提醒用户其使用。如果您隐藏了徽章，则可以在页面。

Answer 5

使用您的Google帐户登录
访问google recaptcha链接。
然后按照代码集成的链接，按照客户端和服务器端验证的代码进行操作。 https://developers.google.com/recaptcha/docs/invisible
创建recaptcha后，提高或降低安全级别一次，转到此处的高级设置，https://www.google.com/recaptcha/admin#list

从Google

5 个答案:

隐形reCAPTCHA

独立CAPTCHA容器

隐形CAPTCHA按钮

关于你的问题