ReCaptcha 2.0 с использованием AJAX
Проблема с ReCaptcha 2.0 и AJAX
Я настроил работу ReCaptcha 2.0 на своем сайте, но она функционирует только тогда, когда форма отправляется "естественным" образом без использования AJAX. Я хочу отправить форму вместе с капчей и уведомить пользователя об успешной отправке без обновления страницы.
Попробовал следующий код, но, похоже, сервер не получает ответ от пользователя:
HTML:
<form class="form" action="javascript:void(0)" novalidate>
<!-- все поля ввода... -->
<!-- капча -->
<div class="input-group">
<div class="g-recaptcha" data-sitekey="6LdOPgYTAAAAAE3ltWQGar80KUavaR-JblgPZjDI"></div>
</div>
<div class="errors" id="errors" style="display: none"></div>
<div class="input-group">
<input type="button" value="Отправить" class="btn-default right" id="submit">
<div class="clear"></div>
</div>
</form>
JS:
$('#submit').click(function(e) {
console.log('кнопка отправки нажата'); // --> работает
var $errors = $('#errors'),
$status = $('#status'),
name = $('#name').val().replace(/<|>/g, ""), // предотвращение XSS
email = $('#email').val().replace(/<|>/g, ""),
msg = $('#message').val().replace(/<|>/g, "");
if (name == '' || email == '' || msg == '') {
valid = false;
errors = "Все поля обязательны для заполнения.";
}
// проблема, похоже, здесь
console.log('ответ капчи: ' + grecaptcha.getResponse()); // --> ответ капчи:
if (!errors) {
// скрыть ошибки
$errors.slideUp();
// AJAX запрос к PHP файлу для отправки письма
$.ajax({
type: "POST",
url: "http://orenurbach.com/assets/sendmail.php",
data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse()
}).done(function(status) {
if (status == "ok") {
// показать пользователю сообщение об успехе
$status.text('Спасибо! Ваше сообщение отправлено, и я свяжусь с вами скоро.');
$status.slideDown();
// очистить поля формы
$('#name').val('');
$('#email').val('');
$('#message').val('');
}
});
} else {
$errors.text(errors);
$errors.slideDown();
}
});
PHP:
<?php
// собираем сообщение из POST полей
// получение капчи
$captcha = '';
if (isset($_POST['g-recaptcha-response']))
$captcha = $_POST['g-recaptcha-response'];
echo 'капча: '.$captcha;
if (!$captcha)
echo 'Капча не была проверена.';
// обработка капчи и проверка
$secret = 'MY_SECRET';
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
var_dump($response);
// если капча пройдена, отправить письмо и вернуть ok.
if ($response['success'] != false) {
// отправка почты
@mail($email_to, $subject, $finalMsg);
// ответ обратно в AJAX, чтобы пользователь знал, что все в порядке
echo 'ok';
} else {
echo 'не ок';
}
?>
Результат на PHP странице:
капча: Капча не была проверена. array(2) { ["success"]=> bool(false) ["error-codes"]=> array(1) { [0]=> string(22) "missing-input-response" } } не ок
Вопрос: Как я могу вручную получить ответ от капчи, чтобы он не отправлялся вместе с остальными данными POST?
1 ответ(ов)
Похоже, вы столкнулись с несколькими распространёнными проблемами в вашем коде на PHP. Давайте разберём их подробнее.
Кавычки: Использование одинарных кавычек для строк в PHP может привести к неожиданным последствиям, особенно если вы ожидаете обработку переменных внутри строки. Убедитесь, что вы правильно используете двойные кавычки, если необходимо подставить значения переменных.
Отладочные сообщения: Добавление множества
print
илиecho
заявлений в код может затруднить определение, где происходит сбой. В вашем случае это привело к тому, что условиеif ($status == "ok")
не срабатывало, и вы не получали нужной информации о подтверждении. Возможно, вам стоит использовать отладочные инструменты или логирование вместоecho
для более точной диагностики.Проверка ошибки на URL: Для проверки того, что происходит с вашим скриптом PHP, не стоит просто открывать его в браузере. Вместо этого используйте инструменты отладки или просматривайте логи сервера для получения детальной информации о возникающих ошибках. Прямое обращение по URL может не давать всей картины, особенно если скрипт ожидает определённых HTTP-заголовков или POST-запросов.
К счастью, вы уже на правильном пути к исправлению ошибок! Спасибо @Samurai за его помощь.
Вот финальный код PHP, который, похоже, теперь работает:
<?php
// сбор сообщения из полей POST
// получение капчи
$captcha = "";
if (isset($_POST["g-recaptcha-response"]))
$captcha = $_POST["g-recaptcha-response"];
if (!$captcha)
echo "not ok";
// обработка капчи и проверка её корректности
$secret = "MY_SECRET";
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER["REMOTE_ADDR"]), true);
// если капча прошла проверку у Google, отправляем письмо и эхо "ok".
if ($response["success"] != false) {
// отправка фактического письма
@mail($email_to, $subject, $finalMsg);
// echo обратно в ajax, чтобы пользователь знал, что всё в порядке
echo "ok";
} else {
echo "not ok";
}
?>
Если вам нужно больше помощи или пояснений, не стесняйтесь спрашивать!
Отправка массива с помощью Ajax в PHP-скрипт
Как загружать файлы асинхронно с помощью jQuery?
Как заставить jQuery выполнять синхронный запрос Ajax вместо асинхронного?
Несколько файлов JavaScript/CSS: лучшие практики?
Отправка нескольких параметров данных с помощью jQuery AJAX