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

Question

最近，Google 彻底修改了他们的 reCaptcha API，并将其简化为单个复选框。

reCaptcha

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

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

我错过了什么吗？还需要带有私钥的 PHP 文件吗？

到目前为止，我所掌握的验证码是：

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

Answer 1

如果您想检查用户是否点击了

I'm not a robot

复选框，您可以使用 reCaptcha API 提供的

.getResponse()

函数。

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

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

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

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

Answer 2

您可以按照 Google reCAPTCHA 文档通过 3 种方式验证响应：

g-recaptcha-response

：一旦用户选中复选框（我不是机器人），带有 id

g-recaptcha-response

的字段就会填充到您的 HTML 中。
您现在可以使用此字段的值来了解用户是否是机器人，使用下面提到的行：-

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

在您准备提交表格之前，您可以拨打以下电话：-

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
}

您可以按如下方式显示您的 reCAPTCHA：-
```
<div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div>
```
然后在 JavaScript 中定义该函数，该函数也可用于提交表单。
```
function doSomething() { alert(1); }
```
现在，一旦选中复选框（我不是机器人），您将获得已定义回调的回调，在您的情况下是
```
doSomething
```
。

Answer 3

从用户体验的角度来看，它可以帮助让用户清楚地知道他们何时可以继续提交表单 - 通过启用禁用的按钮，或者简单地使按钮可见。

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

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

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 5

使用 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>

Answer 6

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

    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 7

试试这个链接： https://github.com/google/ReCAPTCHA/tree/master/php

该页面的链接发布在本页面的最底部： https://developers.google.com/recaptcha/intro

我遇到的一个导致这两个文件无法正常工作的问题是网站的 php.ini 文件。确保该属性设置正确，如下所示： allow_url_fopen = 开

Answer 8

提交表单后验证 Google reCapcha 是否有效

if ($post['g-recaptcha-response']) {
      $captcha = $post['g-recaptcha-response'];
      $secretKey = 'type here private key';
      $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secretKey . "&response=" . $captcha);
        $responseKeys = json_decode($response, true);
        if (intval($responseKeys["success"]) !== 1) {
            return "failed";
        } else {
            return "success";
        }
    }
    else {
        return "failed";
    }

Answer 9

var googleResponse = $('#g-recaptcha-response').val();

if(googleResponse=='')
{   
    $("#texterr").html("<span>Please check reCaptcha to continue.</span>");

    return false;
}

Answer 10

//validate
$receivedRecaptcha = $_POST['recaptchaRes'];
$google_secret =  "Yoursecretgooglepapikey";
$verifiedRecaptchaUrl = 'https://www.google.com/recaptcha/api/siteverify?secret='.$google_secret.'&response='.$receivedRecaptcha;
$handle = curl_init($verifiedRecaptchaUrl);
curl_setopt($handle,  CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false); // not safe but works
//curl_setopt($handle, CURLOPT_CAINFO, "./my_cert.pem"); // safe
$response = curl_exec($handle);
$httpCode = curl_getinfo($handle, CURLINFO_HTTP_CODE);
curl_close($handle);
if ($httpCode >= 200 && $httpCode < 300) {
  if (strlen($response) > 0) {
        $responseobj = json_decode($response);
        if(!$responseobj->success) {
            echo "reCAPTCHA is not valid. Please try again!";
            }
        else {
            echo "reCAPTCHA is valid.";
        }
    }
} else {
  echo "curl failed. http code is ".$httpCode;
}

Answer 11

我遇到的一个导致这两个文件无法正常工作的问题是我的网站的

php.ini

文件。确保该属性设置正确，如下所示：

allow_url_fopen =

Answer 12

在使用 Google reCaptcha 和 reCaptcha DLL 文件时，我们可以在 C# 中验证它，如下所示：

 RecaptchaControl1.Validate();
        bool _Varify = RecaptchaControl1.IsValid;
        if (_Varify)
        {
// Pice of code after validation.
}

它对我有用。

Answer 13

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

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

问题描述投票：0回答：13

13个回答

最新问题

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

问题描述 投票：0回答：13

13个回答

最新问题

问题描述投票：0回答：13