如何使用Google ReCaptcha V2和多个表单执行HTML表单验证？

Question

我在一个页面上有两个表单，它们都需要Google ReCaptcha V2。我使用下面的代码使它能够完美地工作。

在标题中：

<script src='https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit' async defer></script>

这是表格。很简单。您可以看到ReCaptcha绑定到按钮，并且它具有唯一的回调和ID。

<form id="subForm" action="form-processing.php" method="POST">         
    <input placeholder="Name" id="name" name="fname" type="text" required/>
    <input placeholder="Email" id="email" name="email" type="text" required/>
    <textarea placeholder="Comments" id="comments" cols="30" name="comments" rows="6" required></textarea>

    <button class="g-recaptcha form-submit-button" data-sitekey="MySiteKey" data-callback="captchaSubmit2" id="recaptcha2">Submit</button>
</form>

当header中的ReCaptcha api加载并触发onload回调（myCallBack）时，将调用以下代码在表单的每个按钮上呈现ReCaptcha。

var recaptcha1;
var recaptcha2;
var myCallBack = function() {
    //Render recaptcha1 on element with ID "recaptcha1"
    recaptcha1 = grecaptcha.render('recaptcha1', {
      'sitekey' : 'MySiteKey',
      'theme' : 'light'
    });

    //Render recaptcha2 on element with ID "recaptcha2"
    recaptcha2 = grecaptcha.render('recaptcha2', {
      'sitekey' : 'MySiteKey',
      'theme' : 'light'
    });
};

最后，当单击提交按钮时，ReCaptcha处理，并使用按钮上指定的回调来触发实际的表单提交。

function captchaSubmit1(data) {
    document.getElementById("mainForm").submit();
}
function captchaSubmit2(data) {
    document.getElementById("subForm").submit();
}

在服务器端处理的后端，我使用以下代码来验证ReCaptcha。

<?php
    // reCaptcha info
    $secret = "MySecretKey";
    $remoteip = $_SERVER["REMOTE_ADDR"];
    $url = "https://www.google.com/recaptcha/api/siteverify";

    // Form info
    $first = $_POST["first"];
    $last = $_POST["last"];
    $response = $_POST["g-recaptcha-response"];

    // Curl Request
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, array(
        'secret' => $secret,
        'response' => $response,
        'remoteip' => $remoteip
        ));
    $curlData = curl_exec($curl);
    curl_close($curl);

    // Parse data
    $recaptcha = json_decode($curlData, true);
    if ($recaptcha["success"])
    { 
       /// MY DATA VALIDATION & EMAILING OF FORM DATA ///
    }else{
        header('Location: /thank-you-for-contacting-us/?gvx');
        exit;
    }
?>

如果表单验证由于Google ReCaptcha verify失败而失败，它只会用代码重定向到感谢页面，这样我就知道是ReCaptcha失败了。如果表单字段数据未通过验证，则会有一个单独的代码。这只是一个帮助我了解情况的方法。

OK！所以现在的问题是这些表单不执行超文本标记语言客户端字段验证。我试图合并这个解决方案没有运气：如何运行reCaptcha只有如果HTML5验证已经通过？

这些代码是那篇文章的主要内容。我替换了提交按钮：

之前：

<button class="g-recaptcha form-submit-button" data-sitekey="MySiteKey" data-callback="captchaSubmit2" id="recaptcha2">Submit</button>

之后：

<button class="form-submit-button" type="submit">Submit</button>

我在提交按钮上方的表单中添加了这个div：

<div id="recaptcha2" class="g-recaptcha" 
data-sitekey="MySiteKey"
data-size="invisible"
data-callback="captchaSubmit2">

以下是表单提交的新处理程序：

$('#mainForm').submit(function (event) {
    if (!grecaptcha.getResponse()) {
        event.preventDefault(); //prevent form submit
        grecaptcha.reset();
        grecaptcha.execute();
    } 
});
$('#subForm').submit(function (event) {
    if (!grecaptcha.getResponse()) {
        event.preventDefault(); //prevent form submit
        grecaptcha.reset();
        grecaptcha.execute();
    } 
});

因此，这里的最后一个流程是页面加载api，api调用在g-recaptcha div上呈现recaptcha的recaptcha呈现，表单被提交，默认行为被阻止，允许HTML验证运行（它确实如此），当表单实际提交时，它触发上面的函数调用grecaptcha。执行（）；哪个进程在完成时调用与之相关的回调函数（captchaSubmit2），该函数执行真正的最终提交。然后我的服务器端脚本无法通过google验证，悲伤接踵而至。。。

我已经花了两天的时间来研究这个问题，通常的回答是“完成了吗？”从上面回响。我离得很近，我能尝到，但我显然错过了什么。

我只需要谷歌ReCaptcha V2隐形工作在同一页上的HTML表单验证必填字段的2个表单。

任何帮助都将不胜感激。

Answer 1

经过大量的搜索，我终于找到了一个有效的解决方案，它在一个页面上支持多个表单，并且是动态的，这是一个相当优雅的解决方案。它搜索页面并将recaptcha附加到任何匹配的标记div。它应该在一个页面上支持任意多的表单。

这是它附加到的标签：

<div class="recaptcha-holder"></div>

我仍然不确定为什么我自己的实现不起作用。每次我将recaptcha连接到多个表单时，服务器端处理都会失败，调试表明它没有接收到recaptcha数据。

请注意，这是在WordPress网站上实现的，因此我将javascript添加到我现有的js包含中，我将自定义代码放入其中。

这段代码是Mch发布的关于这个问题的最后一个条目（从谷歌实现新的不可见的reCaptcha）(https://stackoverflow.com/users/7327512/mch).感谢他们提供前端解决方案。有趣的是，它是在2016年底发布的。

Mch的前端示例

<!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 src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
</body>
</html>

Mch的Javascript（添加到我现有的JS include中）

  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);
    }
  };

最后是我的后端（服务器端）处理：

<?php
    // reCaptcha info
    $secret = "MySecretKey";
    $remoteip = $_SERVER["REMOTE_ADDR"];
    $url = "https://www.google.com/recaptcha/api/siteverify";

    // Form info
    $first = $_POST["first"];
    $last = $_POST["last"];
    $response = $_POST["g-recaptcha-response"];

    // Curl Request
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, array(
        'secret' => $secret,
        'response' => $response,
        'remoteip' => $remoteip
        ));
    $curlData = curl_exec($curl);
    curl_close($curl);

    // Parse data
    $recaptcha = json_decode($curlData, true);
    if ($recaptcha["success"])
    { 
        // MY DATA VALIDATION & EMAILING OF FORM DATA
    }else{
        // Google ReCaptcha Failed to Verify - Send to False Positive
        header('Location: /thank-you-for-contacting-us/?gvx');
        exit;
    }
?>