Recaptcha ошибка неверный ключ. Добавление invisible reCAPTCHA в форму обратной связи работающей через AJAX. Что собой представляет invisible reCAPTCHA от Google

Здравствуйте, уважаемые коллеги! Вы, наверное, уже заметили новую "антикапчу" под названием "reCAPTCHA" у Google, на странице ее "адурилки" к примеру.

Согласитесь, очень удобно, не надо разгадывать набор коряво написанных символов, вызывающих только раздражение, достаточно только кликнуть мышкой в поле «Я не робот » и все.

Эту же reCAPTCHA можно установить и на свой собственный сайт. Кроме удобства для посетителей, это еще и более надежная защита от разного рода спама . Сервисы по разгадыванию капч защиту reCAPTCHA просто физически обойти не сумеют ни разу.

Это упрощает использование для человека до щелчка на простой флажок. Но проект будет открываться другими языками с открытым исходным кодом. Эта пара ключей действительна для вашего домена и поддоменов. В верхней части страницы добавьте ключи. Теперь мы можем проверить после проверки формы, имеем ли мы дело с роботом или человеком.

Все труднее читать

Цель состоит в том, чтобы доказать, что пользователь - это то, что он утверждает, а именно человек, чтобы оставить все автоматизированные системы у двери. У некоторых ботов действительно есть раздражающая привычка создавать учетные записи для создания спама, например.

После установки этой фишки на сайт, я просто забыл про спам в комментариях и автоматические спам регистрации на блоге мне больше не снятся в кошмарных снах.

Можете посмотреть, как это выглядит и работает, просто оставьте комментарий к любой статье.

Добавление reCAPTCHA на сайт

1. Перейдите по адресу https://www.google.com/recaptcha/admin#list на страницу Гугла с инструкцией по установке reCAPTCHA на сайт.



2. Тут, в первой части инструкции, вы получите два ключа – простой и непростой (секретный), они вам скоро понадобятся.

Во многих случаях их трудно читать, что является весьма ограниченным: иногда человеку трудно доказать, что он действительно настолько, что текст неразборчив. И ситуация ухудшалась, поскольку боты были все более изощренными, заставляя решения адаптироваться соответственно, причем текст всегда был труднее читать.

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

Идем дальше. Если с первой частью по интеграции на стороне клиента все понятно, то интеграция на стороне сервера поставила меня в тупик и заставила остановиться. Спасибо Диме ktonanovenkogo.ru за предложенный выход из ситуации. Для установки reCAPTCHA на сайт предлагается использовать плагин «», специально для этого написанный, и кстати не единственный, но наиболее для нас подходящий.

Двигатель анализирует риски и отделяет пшеницу от мякины

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

Он также постоянно обогащается: все действия, выполняемые пользователями, служат тому, чтобы научить его совершенствовать свое обнаружение того, что кажется реальным или, наоборот, то, что имитируется. Мы можем представить, что движения мыши особенно ценны.

3. Скачать no captcha recaptcha можно со страницы https://wordpress.org/plugins/no-captcha-recaptcha/.

После установки и активации плагина, в вашей админке появится новая ссылка «». Перейдите по ней в настройки плагина.
4. Вставьте простой и секретный ключи в соответствующие поля.

Решение, уже используемое другими

Винай Шет уточнил, что «фракция» пользователей только выиграет от новой защиты, в то время как двигатель анализа рисков постепенно адаптируется. Опять же, механизм анализа вступает в действие, чтобы определить, является ли пользователь человеком или компьютером.

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

5. В этом блоке настроек активацией соответствующих опций можно встроить капчу в форму входа в админ-панель сайта, в форму регистрации и в форму комментирования соответственно.

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

Стоит отметить то, что теперь все спам-комментарии, отсеянные reCAPTCHA, будут автоматически попадать в корзину.

И еще, reCAPTCHA не убережет от ручного спама. Для борьбы с этой напастью рекомендую использовать . Обе эти защиты прекрасно дополняют друг друга.

Я вас поздравляю с окончательной победой над спамом на своем сайте!

Дорогой коллега, если статья для тебя была полезна, на обновления блога.

С уважением, Роман Ваховский.

Статья, в которой рассмотрим, как защитить форму обратной связи от спама с помощью invisible reCaptcha от Google.

Что собой представляет invisible reCAPTCHA от Google

invisible reCAPTCHA - это капча, которая позволяет осуществлять фоновую валидацию действий пользователей на сайте. В отличие от reCAPTCHA v2 (пример формы с reCAPTCHA 2) она не требует от пользователей того, чтобы они нажимали на флажок (checkbox) "Я не робот". Она вызывается напрямую, т.е. тогда когда пользователь нажимает на существующую кнопку на сайте или программно через вызов JavaScript API.

invisible reCAPTCHA позволяет совершать пользователям на сайте какие-либо действия сразу (без ввода капчи). По умолчанию только самые подозрительные действия пользователей не позволят им пройти дальше. В этом случае invisible reCAPTCHA предложит им решить капчу (т.е. определить действительно ли данную операцию совершает человек, а не робот).

Регистрация домена и получение ключей Примеры форм обратной связи с invisible reCAPTCHA

Рассмотрим различные варианты установки капчи invisible reCAPTCHA на сайт (в формы обратной связи). Ознакомиться с примерами можно на GitHub.

Форму по умолчанию необходимо помещать в корневую директорию сайта (т.е. /feedback/файлы_формы...). Настройка форм осуществляется посредством ввода публичного и секретного ключа, в также настройки почты (phpMailer).

Приведём основные шаги по внедрению невидимой капчи reCAPTCHA от Google в формы обратной связи.

Интеграция invisible reCAPTCHA в форму обратной связи (без AJAX)

Самый простой способ использования виджета невидимой reCAPTCHA на странице - это подключить необходимый JavaScript ресурс и добавить несколько атрибутов к вашей html кнопке.

Рассмотрим этот процесс пошагово:

Добавить на страницу скрипт reCAPTCHA:

Добавить к кнопке, которая будет использоваться для отправки формы или выполнения другого действия на сайте атрибуты (класс "g-recaptcha", в data-sitekey - публичный ключ сайта, в data-callback - имя JavaScript функции обратного вызова для выполнения действий после завершения проверки капчи): Отправить

Добавить на страницу сценарий JavaScript функцию onSubmit: function onSubmit(token) { // отправить форму на сервер document.getElementById("messageForm").submit(); }

Посмотреть полный код формы с invisible reCAPTCHA от Google можно на GitHub или по ниже приведённой ссылке:

Добавление invisible reCAPTCHA в форму обратной связи работающей через AJAX

Процесс встраивания invisible reCAPTCHA в AJAX форму обратной связи:

Добавить в HTML форму элемент div с атрибутами class="g-recaptcha" , data-sitekey="значение публичного ключа" , data-callback="onSubmitReCaptcha" и data-size="invisible" . onSubmitReCaptcha - это имя функции, которая будет вызвана после окончания успешной проверки пользователя. В данный элемент будет осуществляться рендеринг капчи invisible reCAPTCHA . Отправить сообщение

Подключить скрипт reCaptcha.

Вызвать проверку reCaptcha (grecaptcha.execute()) после успешной валидации HTML формы. // при отправке формы messageForm на сервер (id="messageForm") $("#messageForm").submit(function (event) { // отменим стандартную отправку формы на сервер event.preventDefault(); // если форма прошла валидацию, то вызовем invisible reCaptcha if (validateForm(this)) { grecaptcha.execute(); } });

Добавить функцию обратного вызова onSubmitReCaptcha , которая будет запущена, если пользователь успешно прошёл капча тест. Код данной функции, содержит вызов другой функции, которая отправляет форму обратной связи на AJAX. function onSubmitReCaptcha(token) { var idForm="messageForm"; sendForm(document.getElementById(idForm),"/feedback/process.php"); }

Посмотреть пример полного кода контактной формы можно на GitHub или посредством следующей ссылки (архив):

Пример HTML-формы с invisible reCAPTCHA, отображаемой во всплывающем окне:

Несколько invisible reCAPTCHA на одной странице

Для того чтобы разместить несколько invisible reCAPTCHA на странице, их необходимо генерировать вручную.

Инструкция по размещению 2 invisible reCAPTCHA на одной странице:

Подключить скрипт reCAPTCHA с указанием функции (в данном случае onloadReCaptchaInvisible), которая будет вызвана после завершения загрузки api.js . Функцию onloadReCaptchaInvisible будем использовать для программной генерации виджетов и получения их id .

Добавим в каждую из форм обратной связи контейнер, который будет представлять собой виджет reCaptcha.

Представим каждый контейнер как виджет reCAPTCHA. Получим id созданных виджетов. var idCaptcha1, idCaptcha2; var onloadReCaptchaInvisible = function() { idCaptcha1 = grecaptcha.render("recaptcha1", { "sitekey":"значение публичного ключа", "callback": "onSubmitReCaptcha", "size":"invisible" }); idCaptcha2 = grecaptcha.render("recaptcha2", { "sitekey":"значение публичного ключа", "callback": "onSubmitReCaptcha", "size":"invisible" }); };

Использовать ID виджета при проверке reCAPTCHA: // выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha1 grecaptcha.execute(idCaptcha1); // выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha2 grecaptcha.execute(idCaptcha2);

Применять ID виджета invisible reCAPTCHA при получении ответа: // передать в FormData ответ виджета invisible reCAPTCHA, у которого ID равно значению переменной idCaptcha1 (для первой формы) formData.append("g-recaptcha-response", grecaptcha.getResponse(idCaptcha1)); // передать в FormData ответ виджета invisible reCAPTCHA, у которого ID равно значению переменной idCaptcha2 (для второй формы) formData.append("g-recaptcha-response", grecaptcha.getResponse(idCaptcha2));

Полный код примера, в котором invisible reCAPCTHA используется для защиты нескольких форм:

Настройка виджета invisible reCAPTCHA

Дополнительные (необязательные) параметры капчи invisible reCAPTCHA:

• data-badge (badge) - местоположение значка reCAPTCHA (по умолчанию: bottomright). В качестве значения можно указывать ещё: bottomleft (внизу слева) и inline (позволяет управлять положением с помощью CSS).
• data-type (type) - тип капчи (по умолчанию: image). Изменить тип капчи при необходимости можно на audio .
• data-tabindex (tabindex) - для страниц, в которых для навигации по элементам дополнительно используется клавиша tab . Данный параметр позволяет установить порядок элемента, его tabindex (по умолчанию: 0).

Внимание: Использовать атрибуты с префиксом data- необходимо только в HTML-коде. В скриптах задавать параметры необходимо без префикса, т.е. вместо data-badge указывать badge и т.д.