Как проверить Google reCaptcha в форме отправки
Недавно Google полностью пересмотрел свой API reCaptcha и упростил его до одного флажка.
Проблема в том, что я могу отправить форму с включенной reCaptcha без проверки, и форма будет игнорировать reCaptcha.
Раньше вам приходилось отправлять форму в файл PHP с закрытым ключом и др., Но я не вижу упоминаний об этом в их Руководстве для разработчиков. Я понятия не имею, как проверить форму, чтобы убедиться, что новый reCaptcha был заполнен пользователем.
Я что-то пропустил? Этот файл PHP с закрытым ключом все еще требуется?
Все, что у меня есть для reCaptcha до сих пор:
<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div>
10 ответов
Если вы хотите проверить, нажал ли Пользователь на I'm not a robot
флажок, вы можете использовать .getResponse()
функция, предоставляемая API reCaptcha.
Он вернет пустую строку в случае, если пользователь не проверил себя, что-то вроде этого:
if (grecaptcha.getResponse() == ""){
alert("You can't proceed!");
} else {
alert("Thank you");
}
Если пользователь подтвердил свою личность, ответом будет очень длинная строка.
Подробнее об API можно узнать на этой странице: reCaptcha Javascript API
Вы можете проверить ответ тремя способами в соответствии с документацией Google reCAPTCHA:
g-recaptcha-response
: После того, как пользователь установит флажок (я не робот), поле с идентификатором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
в твоем случае.
С точки зрения UX, это может помочь визуально сообщить пользователю, когда он может приступить к отправке формы - либо включив отключенную кнопку, либо просто сделав ее видимой.
Вот простой пример...
<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>
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
При использовании 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>
Сначала вы можете проверить в интерфейсе, что флажок помечен:
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 Docs.
Убедитесь, что 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";
}
Попробуйте эту ссылку: https://github.com/google/ReCAPTCHA/tree/master/php
Ссылка на эту страницу размещена в самом низу этой страницы: https://de velopers.google.com/recaptcha/intro
Одна проблема, которая помешала правильной работе этих двух файлов, была связана с моим файлом php.ini для веб-сайта. Убедитесь, что это свойство настроено правильно, как показано ниже: allow_url_fopen = On
var googleResponse = $('#g-recaptcha-response').val();
if(googleResponse=='')
{
$("#texterr").html("<span>Please check reCaptcha to continue.</span>");
return false;
}
Одна проблема, с которой я столкнулся, помешала правильной работе этих двух файлов, была связана с моим
php.ini
файл для сайта. Убедитесь, что это свойство правильно установлено, как показано ниже:
allow_url_fopen =
При использовании Google reCaptcha
с reCaptcha
DLL
файл, то мы можем проверить в C#
,
RecaptchaControl1.Validate();
bool Varify = RecaptchaControl1.IsValid;
if (Varify)
{
// Pice of code after validation.
}
Это работа для меня.
//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;
}