从 Google 实施新的 Invisible reCaptcha

Question

我正在建立一个 PHP 网站，我想在登录表单上放置一个验证码。我选择了 Google 的新 Invisible reCaptcha，但我在实施它时遇到了问题（HTML 部分，PHP 正在工作）。

我现在为 "normal" 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 小时才能收到确认）。内容如下：

Invisible reCAPTCHA Integration

If you haven’t integrated your site with reCAPTCHA v2, please follow our developer guide for implementation details.

Please make sure that your site key that has been whitelisted for Invisible reCAPTCHA.

To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.

3a. data-callback=””. This works just like the checkbox captcha, but is required for invisible.

3b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and ‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default), ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you make the badge inline, you can control the CSS of the badge directly.

Verifying the user’s response has no changes.

我遇到的问题是 HTML 实施（因此我需要步骤 3 的帮助。1,2 和 4 对我有用）。其余的我使用正常的 reCaptcha 并根据说明，它应该是一样的。我不明白数据回调和数据徽章是什么以及它是如何工作的。如何使用我的表单设置实现不可见的 reCaptcha 的代码示例会很棒！

Answer 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>

使用独立方法时，必须将数据绑定设置为提交按钮的 ID。如果你没有这个设置，你的验证码将不会被隐藏。

还必须使用回调来提交表单。不可见的验证码会取消提交按钮的所有事件，因此您需要回调来实际传递提交。

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

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

隐形验证码按钮

很多这与上面的独立验证码相同，但不是有一个容器，所有东西都放在提交按钮上。

这将是您的目标。

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

这里有一些新东西，数据徽章。这是一个 div，它被插入到 DOM 中，其中包含 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[=34 显式呈现 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 保护哪些表单，我将向该元素添加一个 class 名称。在我们的示例中，我使用 'recaptcha-holder' class name.

回调函数遍历所有现有表单，如果它发现我们注入的元素具有 'recaptcha-holder' class 名称，它将呈现 reCaptcha 小部件。

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

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

希望对您有所帮助！

Answer 3

使用您的 google 帐户登录
访问 google 重新验证 link。
然后按照link进行代码集成，按照代码进行客户端和服务端验证。 https://developers.google.com/recaptcha/docs/invisible
创建recaptcha后提高或降低安全级别一次，进入高级设置这里，https://www.google.com/recaptcha/admin#list

Answer 4

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

这是一个有效的例子：

<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[=27= 标识].根据您的 CMS/Framework.

，有很多不同的方法可以完成
您可能已经注意到屏幕右下角的 reCaptcha 徽章。它的存在是为了让用户知道表单受 reCaptcha 保护，因为验证复选框已被删除。可以通过将其配置为内联来隐藏此徽章，然后使用 CSS.
对其进行修改
<style> .grecaptcha-badge {display: none;} </style>

请注意，由于 Google 收集用户信息以启用 reCaptcha 功能，他们的服务条款要求您提醒用户使用它。 如果您隐藏徽章您可以改为在页面的某处添加信息性段落。

从 Google 实施新的 Invisible reCaptcha

Implement the new Invisible reCaptcha from Google

html

javascript

recaptcha

隐形验证码

独立验证码容器

隐形验证码按钮

关于你的问题