0

Подключаю поле Recaptcha к странице регистрации пользователя - при нажатии на кнопку "Отправить" данные отправляются, и только после этого происходит проверка - страница перезагружена, и на экране ошибка: "Вы ввели неправильный код Recaptcha". Есть ли какая-нибудь функция для JavaScript, отсылающая запрос на сервер Google и возвращающая ответ, правильно ли был введен код или нет? Поле Recaptcha генерируется системой.

4
  • Вы зарегистрировались в Recaptcha и получили коды доступа к ней для приложения?
    – Visman
    24 сен 2015 в 12:21
  • Да. Отображается все нормально, проблема только в том, что проверка происходит не в реальном времени, а после перезагрузки страницы.
    – nup
    24 сен 2015 в 12:28
  • А вы думали рекапча работает в реальном времени? Она обрабатывается при самбите формы. Другого варианта не видел.
    – Visman
    24 сен 2015 в 12:30
  • Если на странице стоит 2 и более рекапч, то такая проверка не работает. Есть функция как проверить 2 и более капчи на странице без перезагрузки?
    – Павел
    8 фев 2018 в 7:17

2 ответа 2

1

На данный момент актуальная версия API для reCAPTCHA 2. Много чего реализовали и подправили.

Проверка на нажатие пользователем кнопки (JS, с подключенным https://www.google.com/recaptcha/api.js):

if (grecaptcha.getResponse() == ""){
    alert("Подтвердите, что Вы не являетесь роботом!");
    return false;
} else {
    alert("Спасибо что прошли проверку!");
    return true;
}

Саму валидацию нужно оставить на стороне сервера (вдруг у пользователя выключен JS).

1

Раз уж дух поднял вопрос, напишу я немного более более подробный ответ:

Есть ли какая-нибудь функция для JavaScript, отсылающая запрос на сервер Google и возвращающая ответ, правильно ли был введен код или нет

Нет, все не так просто. Каптча - это штука которая нужна для ограничения доступа к каким-то ресурсам. Если все проверки проводить только на клиенте, бот их с легкостью проигнорирует, это обычно гораздо проще чем научить бота проходить каптчу.

Другими словами представьте, что на главный вход в здание Вы поставили сканер сетчатки и автоматчиков, а черный вход - не закрыли. Злоумышленник через него зайти не постесняется, а честных людей будут обыскивать при каждом входе.

Теперь, если необходимость валидации каптчи на сервере понятна, посмотрим как это в общих чертах устроено со стороны клиента:

  1. Вы добавляете на страничку виджет рекаптчи. То есть в самом простом случае вставляете в html

  2. Добавляете элемент в котором отрисуется каптча.
    Он должен содержать класс "g-recaptcha", и ключ сайта. Ключ получается из админки рекаптчи после регистрации в системе.

  3. Recaptcha 2.0 (текущая актуальная) общается со своим бекендом асинхронно по умолчанию, никакой перезагрузки странички быть не должно. Но нам надо получить как-то ответ: для этого добавляем в наш элемент с капчой еще один параметр, "data-callback", содержащий имя функции-колбека которая выполнится когда юзер удачно пройдет капчу. Параметром функции будет ключ конкретной капчи, который вернет вам гугл.

    <div class="g-recaptcha" data-sitekey="your_site_key" data-callback="mySuperFunctionDontCopyPaste"></div>
    
    function mySuperFunctionDontCopyPaste(captchaKey){
        // отдаем бэкенду captchaKey
    }
    
  4. Итак, у нас есть некий ключ, сильно упрощая считаем что это имя конкретной каптчи. Мы этот ключ отдадим в запросе нашему бэкенду, и уже бэкенд спросит у гугла, "а все ли хорошо у каптчи с таким ключем?", а бекенд уже решает, что с этим знанием делать, можно куку какую-то нам дописать например, с которой нас будут пропускать к ресурсам защищенным каптчей.

  5. Там есть еще несколько нюансов, и они расписаны в документации: https://developers.google.com/recaptcha/intro. Документацию читать полезно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.