【问题标题】：Implement the new Invisible reCaptcha from Google实施来自 Google 的新 Invisible reCaptcha
【发布时间】：2016-12-10 19:20:20
【问题描述】：

我正在构建一个 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 集成，请按照我们的开发人员指南了解实施详情。

请确保您的站点密钥已被列入 Invisible reCAPTCHA 的白名单。

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

3a。数据回调=””。这就像复选框验证码一样工作，但对于不可见是必需的。

3b。数据徽章：这允许您重新定位 reCAPTCHA 徽章（即徽标和“受 reCAPTCHA 保护”文本）。有效选项为“bottomright”（默认）、“bottomleft”或“inline”，它们会将徽章直接放在按钮上方。如果将徽章内嵌，则可以直接控制徽章的 CSS。

验证用户的响应没有变化。

我遇到的问题是 HTML 实现（因此我需要步骤 3 的帮助。1,2 和 4 对我有用）。其余的我使用普通的 reCaptcha，根据说明，它应该是同一件事。我不明白 data-callback 和 data-badge 是什么以及它是如何工作的。如何通过我的表单设置来实现不可见的 reCaptcha 的代码示例会很棒！

【问题讨论】：

你需要'PHP'标签吗？接受的答案是 JavaScript 通用的，而不是 PHP 特定的。
@MichaelFreidgeim 你是对的。我已将 php 标记更改为 javascript 标记。

标签： javascript html recaptcha

【解决方案1】：

不可见的验证码

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

独立的验证码容器

实施 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>

我希望这对您和未来的程序员有所帮助。随着技术的发展，我会保持最新状态。

【讨论】：

这对我来说并不完全有效（我尝试了第一个示例）。它似乎正在加载但是当我按下提交按钮时，我必须完成一个验证码（不确定这是否是一个错误或者如果谷歌怀疑我是一个机器人会发生什么 - 因为它应该是不可见的，对?) 当我完成它时，recaptcha 对话框（用于按下与问题相对应的图片）消失，如果我再次尝试点击提交按钮，则没有任何反应。我已经在全新安装的 Firefox 和 Chrome 上进行了尝试。仅供参考，test.php 文件与运行此代码的文件相同。它会调用自己。
另外，如果我可以问的话。 data-callback="onSubmit" 是应该做的同一个 div 的一部分吗？ onSubmit 实际上是什么意思？谢谢
第二个选项确实有效，但我不喜欢它的实现方式。它现在可以工作，但我想得到第一个代码之类的东西。它看起来更干净，更容易定制。不过还是谢谢！如果您知道为什么第一个对我不起作用。请告诉我！
效果很好！谢谢

【解决方案2】：

如果您正在寻找一个完全可定制的通用解决方案，甚至可以在同一页面上处理多个表单，我将使用 render=explicit 和 显式呈现 reCaptcha 小部件>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/

希望这会有所帮助！

【讨论】：

谢谢，我会尽快调查。实际上，我的注册页面确实存在问题，该页面包含登录表单（在菜单中）和注册表单。希望这可以解决这个问题！
谢谢，它按我的意愿工作，我可以在一个页面上有两个验证码。
与 Google 的文档不同，这是一个很有帮助的起点。但是，我建议任何将来发现此问题的人进行一项更改：使用 frm.addEventListener('submit', function(evt) { ... });而不是 frm.onsubmit。我在我的 FlexForms reCAPTCHA 模块 (github.com/cubiclesoft/php-flexforms-modules) 中使用了类似但更灵活的方法。
等一下。服务器端部分在哪里？
谢谢你的例子。我已经在我的测试站点上实现了它，它可以工作，但是每次我点击提交时都会要求挑战。您的 WordPress 插件不会发生这种情况。 html示例有什么问题？

【解决方案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>

【讨论】：

Google documentation on verifying 表示调用应该是 POST。在我看来，您的代码执行了 GET。像this example这样从PHP实现POST会更好吗？

【解决方案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 功能，因此他们的服务条款要求您提醒用户注意其使用情况。如果您隐藏了徽章，您可以在页面。

【讨论】：

【解决方案5】：

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

【讨论】：