php 如何在表单提交时验证 Google reCaptcha
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27450562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Validate Google reCaptcha on Form Submit
提问by Drew Kennedy
Recently, Google completely overhauled their reCaptcha API and simplified it to a single checkbox.
最近,谷歌彻底改革了他们的 reCaptcha API,并将其简化为一个复选框。
The problem is, I can submit a form with the reCaptcha included without checking it and the form will ignore the reCaptcha.
问题是,我可以提交包含 reCaptcha 的表单而无需检查它,并且该表单将忽略 reCaptcha。
Before you had to send the form to a PHP file with the private key et al, but I'm not seeing any mention of that in their Developer's Guide. I have no idea how to validate the form to be sure the new reCaptcha was filled by the user.
在您必须使用私钥等将表单发送到 PHP 文件之前,但我在他们的开发人员指南中没有看到任何提及。我不知道如何验证表单以确保用户填写了新的 reCaptcha。
Am I missing something? Is that PHP file with the private key still required?
我错过了什么吗?那个带有私钥的 PHP 文件还需要吗?
All I have for the reCaptcha so far is:
到目前为止,我所拥有的 reCaptcha 是:
<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div>
回答by Ali Bassam
If you want to check if the User clicked on the I'm not a robot
checkbox, you can use the .getResponse()
function provided by the reCaptcha API.
如果要检查用户是否单击了I'm not a robot
复选框,可以使用.getResponse()
reCaptcha API 提供的功能。
It will return an empty string in case the User did not validate himself, something like this:
如果用户没有验证自己,它将返回一个空字符串,如下所示:
if (grecaptcha.getResponse() == ""){
alert("You can't proceed!");
} else {
alert("Thank you");
}
In case the User has validated himself, the response will be a very long string.
如果用户已验证自己,则响应将是一个很长的字符串。
More about the API can be found on this page: reCaptcha Javascript API
可以在此页面上找到有关 API 的更多信息:reCaptcha Javascript API
回答by Hello Universe
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;
}
Put this in a function. Call this function on submit... #html_element
is my empty div.
把它放在一个函数中。在提交时调用此函数...#html_element
是我的空 div。
回答by the_D
You can verify the response in 3 ways as per the Google reCAPTCHA documentation:
根据Google reCAPTCHA 文档,您可以通过 3 种方式验证响应:
g-recaptcha-response
: Once user checks the checkbox (I am not a robot), a field with idg-recaptcha-response
gets populated in your HTML.
You can now use the value of this field to know if the user is a bot or not, using the below mentioed lines:-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
Before you are about to submit your form, you can make a call as follows:-
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 }
You can display your reCAPTCHA as follows:-
<div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div>
And then define the function in your JavaScript, which can also be used to submit your form.
function doSomething() { alert(1); }
Now, once the checkbox (I am not a robot) is checked, you will get a callback to the defined callback, which is
doSomething
in your case.
g-recaptcha-response
:一旦用户选中复选框(我不是机器人),g-recaptcha-response
就会在您的 HTML 中填充一个带有 id 的字段。
您现在可以使用此字段的值来了解用户是否是机器人,使用以下提及的行:-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
您的情况。
回答by Richard Nalezynski
From a UX perspective, it can help to visibly let the user know when they can proceed to submit the form - either by enabling a disabled button, or simply making the button visible.
从用户体验的角度来看,它可以帮助明显地让用户知道他们何时可以继续提交表单 - 通过启用禁用按钮或简单地使按钮可见。
Here's a simple example...
这是一个简单的例子......
<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>
回答by Tharindu Malshan
when using JavaScript it will work for me
使用 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>
回答by Hatef
You can first verify in the frontend side that the checkbox is marked:
您可以先在前端验证复选框是否被标记:
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;
}
And then in the server side verify the received response using Google reCAPTCHA API:
然后在服务器端使用 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!";
}
For more info you can visit Google docs.
有关更多信息,您可以访问Google 文档。
回答by Matt Zachary
Try this link: https://github.com/google/ReCAPTCHA/tree/master/php
试试这个链接:https: //github.com/google/ReCAPTCHA/tree/master/php
A link to that page is posted at the very bottom of this page: https://developers.google.com/recaptcha/intro
该页面的链接张贴在此页面的最底部:https: //developers.google.com/recaptcha/intro
One issue I came up with that prevented these two files from working correctly was with my php.ini file for the website. Make sure this property is setup properly, as follows: allow_url_fopen = On
我提出的一个阻止这两个文件正常工作的问题是我的网站 php.ini 文件。确保正确设置此属性,如下所示:allow_url_fopen = On
回答by Gorakh Nath Mehta
var googleResponse = $('#g-recaptcha-response').val();
if(googleResponse=='')
{
$("#texterr").html("<span>Please check reCaptcha to continue.</span>");
return false;
}
回答by Shorabh
Verify Google reCapcha is valid or not after form submit
表单提交后验证 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";
}
回答by Robot70
//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;
}