javascript - 实现来自 Google 的新 Invisible 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 小时才能收到确认)。内容如下:

Invisible reCAPTCHA Integration

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

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

3. 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.

4. 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>

使用独立方法时，必须将数据绑定(bind)设置为提交按钮的 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>

这里有一些新东西，data-badge。这是一个插入 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>

我希望这对您和 future 的编码员有所帮助。随着技术的发展，我会及时更新。