Подключаю поле Recaptcha к странице регистрации пользователя - при нажатии на кнопку "Отправить" данные отправляются, и только после этого происходит проверка - страница перезагружена, и на экране ошибка: "Вы ввели неправильный код Recaptcha". Есть ли какая-нибудь функция для JavaScript, отсылающая запрос на сервер Google и возвращающая ответ, правильно ли был введен код или нет? Поле Recaptcha генерируется системой.
-
Вы зарегистрировались в Recaptcha и получили коды доступа к ней для приложения?– Visman24 сен 2015 в 12:21
-
Да. Отображается все нормально, проблема только в том, что проверка происходит не в реальном времени, а после перезагрузки страницы.– nup24 сен 2015 в 12:28
-
А вы думали рекапча работает в реальном времени? Она обрабатывается при самбите формы. Другого варианта не видел.– Visman24 сен 2015 в 12:30
-
Если на странице стоит 2 и более рекапч, то такая проверка не работает. Есть функция как проверить 2 и более капчи на странице без перезагрузки?– Павел8 фев 2018 в 7:17
2 ответа
На данный момент актуальная версия API для reCAPTCHA 2. Много чего реализовали и подправили.
Проверка на нажатие пользователем кнопки (JS, с подключенным https://www.google.com/recaptcha/api.js):
if (grecaptcha.getResponse() == ""){
alert("Подтвердите, что Вы не являетесь роботом!");
return false;
} else {
alert("Спасибо что прошли проверку!");
return true;
}
Саму валидацию нужно оставить на стороне сервера (вдруг у пользователя выключен JS).
Раз уж дух поднял вопрос, напишу я немного более более подробный ответ:
Есть ли какая-нибудь функция для JavaScript, отсылающая запрос на сервер Google и возвращающая ответ, правильно ли был введен код или нет
Нет, все не так просто. Каптча - это штука которая нужна для ограничения доступа к каким-то ресурсам. Если все проверки проводить только на клиенте, бот их с легкостью проигнорирует, это обычно гораздо проще чем научить бота проходить каптчу.
Другими словами представьте, что на главный вход в здание Вы поставили сканер сетчатки и автоматчиков, а черный вход - не закрыли. Злоумышленник через него зайти не постесняется, а честных людей будут обыскивать при каждом входе.
Теперь, если необходимость валидации каптчи на сервере понятна, посмотрим как это в общих чертах устроено со стороны клиента:
Вы добавляете на страничку виджет рекаптчи. То есть в самом простом случае вставляете в html
Добавляете элемент в котором отрисуется каптча.
Он должен содержать класс "g-recaptcha", и ключ сайта. Ключ получается из админки рекаптчи после регистрации в системе.Recaptcha 2.0 (текущая актуальная) общается со своим бекендом асинхронно по умолчанию, никакой перезагрузки странички быть не должно. Но нам надо получить как-то ответ: для этого добавляем в наш элемент с капчой еще один параметр, "data-callback", содержащий имя функции-колбека которая выполнится когда юзер удачно пройдет капчу. Параметром функции будет ключ конкретной капчи, который вернет вам гугл.
<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="mySuperFunctionDontCopyPaste"></div> function mySuperFunctionDontCopyPaste(captchaKey){ // отдаем бэкенду captchaKey }
Итак, у нас есть некий ключ, сильно упрощая считаем что это имя конкретной каптчи. Мы этот ключ отдадим в запросе нашему бэкенду, и уже бэкенд спросит у гугла, "а все ли хорошо у каптчи с таким ключем?", а бекенд уже решает, что с этим знанием делать, можно куку какую-то нам дописать например, с которой нас будут пропускать к ресурсам защищенным каптчей.
Там есть еще несколько нюансов, и они расписаны в документации: https://developers.google.com/recaptcha/intro. Документацию читать полезно.