如何在表单提交上验证Google reCaptcha

Question

最近,谷歌彻底彻底检查了他们的reCaptcha API并将其简化为一个复选框.

问题是,我可以提交包含reCaptcha的表单而不检查它,表单将忽略reCaptcha.

在您必须使用私钥等将表单发送到PHP文件之前,我在他们的开发人员指南中没有看到任何提及.我不知道如何验证表单以确保用户填写新的reCaptcha.

我错过了什么吗？是否仍需要具有私钥的PHP文件？

到目前为止我所有的reCaptcha都是:

<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div>

Answer 1

如果要检查用户是否单击了I'm not a robot复选框,则可以使用.getResponse()reCaptcha API提供的功能.

如果用户没有验证自己,它将返回一个空字符串,如下所示:

if (grecaptcha.getResponse() == ""){
    alert("You can't proceed!");
} else {
    alert("Thank you");
}

如果用户已经验证了自己,则响应将是一个非常长的字符串.

有关API的更多信息,请参见此页面:reCaptcha Javascript API

Answer 2

var googleResponse = jQuery('#g-recaptcha-response').val();
if (!googleResponse) {
    $('<p style="color:red !important" class=error-captcha"><span class="glyphicon glyphicon-remove " ></span> Please fill up the captcha.</p>" ').insertAfter("#html_element");
    return false;
} else {            
    return true;
}

把它放在一个函数中.在提交时调用此函数... #html_element是我的空div.

Answer 3

您可以根据Google reCAPTCHA文档以3种方式验证响应:

1. g-recaptcha-response:一旦用户选中了复选框(我不是机器人),g-recaptcha-response就会在HTML中填充带有id的字段.
   您现在可以使用此字段的值来了解用户是否是机器人,使用下面的mentioed行: -

   var captchResponse = $('#g-recaptcha-response').val();
   if(captchResponse.length == 0 )
       //user has not yet checked the 'I am not a robot' checkbox
   else 
       //user is a verified human and you are good to submit your form now
   

2. 在您提交表单之前,您可以拨打以下电话: -

   var isCaptchaValidated = false;
   var response = grecaptcha.getResponse();
   if(response.length == 0) {
       isCaptchaValidated = false;
       toast('Please verify that you are a Human.');
   } else {
       isCaptchaValidated = true;
   }
   
   
   if (isCaptchaValidated ) {
       //you can now submit your form
   }
   

3. 您可以按如下方式显示您的reCAPTCHA: -

   <div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div>
   

   然后在JavaScript中定义该函数,该函数也可用于提交表单.

   function doSomething() { alert(1); }
   

   现在,一旦选中了复选框(我不是机器人),您将获得对定义的回调的回调,这是doSomething您的情况.

Answer 4

从用户体验的角度来看,它可以帮助用户明白何时可以继续提交表单 - 通过启用禁用按钮,或者只是使按钮可见.

这是一个简单的例子......

<form>
    <div class="g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback="recaptchaCallback"></div>
    <button type="submit" class="btn btn-default hidden" id="btnSubmit">Submit</button>
</form>

<script>
    function recaptchaCallback() {
        var btnSubmit = document.getElementById("btnSubmit");

        if ( btnSubmit.classList.contains("hidden") ) {
            btnSubmit.classList.remove("hidden");
            btnSubmitclassList.add("show");
        }
    }
</script>

Answer 5

您可以首先在前端验证该复选框是否已标记：

    var recaptchaRes = grecaptcha.getResponse();
    var message = "";

    if(recaptchaRes.length == 0) {
        // You can return the message to user
        message = "Please complete the reCAPTCHA challenge!";
        return false;
    } else {
       // Add reCAPTCHA response to the POST
       form.recaptchaRes = recaptchaRes;
    }

然后在服务器端使用 Google reCAPTCHA API 验证收到的响应：

    $receivedRecaptcha = $_POST['recaptchaRes'];
    $verifiedRecaptcha = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$google_secret.'&response='.$receivedRecaptcha);

    $verResponseData = json_decode($verifiedRecaptcha);

    if(!$verResponseData->success)
    {
        return "reCAPTCHA is not valid; Please try again!";
    }

欲了解更多信息，您可以访问Google 文档。

Answer 6

使用 JavaScript 时，它对我有用

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>