0

ReCaptcha 2.0 с использованием AJAX

23

Проблема с 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('кнопка отправки нажата'); // --&gt; работает

    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()); // --&gt; ответ капчи: 

    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 ответ(ов)

0

Похоже, вы столкнулись с несколькими распространёнными проблемами в вашем коде на PHP. Давайте разберём их подробнее.

  1. Кавычки: Использование одинарных кавычек для строк в PHP может привести к неожиданным последствиям, особенно если вы ожидаете обработку переменных внутри строки. Убедитесь, что вы правильно используете двойные кавычки, если необходимо подставить значения переменных.

  2. Отладочные сообщения: Добавление множества print или echo заявлений в код может затруднить определение, где происходит сбой. В вашем случае это привело к тому, что условие if ($status == "ok") не срабатывало, и вы не получали нужной информации о подтверждении. Возможно, вам стоит использовать отладочные инструменты или логирование вместо echo для более точной диагностики.

  3. Проверка ошибки на 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";
    }
?>

Если вам нужно больше помощи или пояснений, не стесняйтесь спрашивать!

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь