如何在表单提交时验证Google重新验证码

2022-08-30 09:23:32

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

reCaptcha

问题是,我可以提交一个包含reCaptcha的表单而不检查它,并且表单将忽略reCaptcha。

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

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

到目前为止,我对reCaptcha所拥有的只是:

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

答案 1

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

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

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

如果用户已验证自己,则响应将是一个很长的字符串。

有关API的更多信息可以在此页面上找到:reCaptcha Javascript API


答案 2

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

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

    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


推荐