Добавить капчу перед отправкой формы что это

Как добавить в PHP-форму reCAPTCHA v3 и отправлять данные с помощью Ajax

В этом руководстве мы добавим в PHP-форму Google reCAPTCHA v3 и отправим ее данные без перезагрузки веб-страницы, используя Ajax.

Почему Google reCAPTCHA v3?

У многих пользователей раньше возникали проблемы при прохождении капчи.

К счастью, сейчас многие сайты используют Google reCAPTCHA v2, которая просто отображает флажок «Я не робот».

В 2018 году Google выпустила reCAPTCHA v3, которая вообще не требует взаимодействия с пользователем. Ее можно использовать в формах, чтобы предотвратить отправку спама.

Теперь узнаем, как добавить Google reCAPTCHA v3 в простую форму.

Регистрация ключей reCAPTCHA v3

После этого будет сгенерирован site key и secret key. Скопируйте и сохраните их.

HTML-форма

В качестве примера используем простую форму с полями «Полное имя», «Электронная почта» и «Сообщение».

Отправка данных формы с помощью Ajax

Доработаем процесс отправки формы с помощью Ajax, Для этого потребуется библиотека jQuery. Загрузите ее, используя CDN. Вставьте приведенную ниже строку кода перед закрывающимся тегом body.

Теперь выполнить Ajax-запрос на отправку данных формы.

Сейчас если вы нажмете кнопку отправки формы, то получите сообщение об ошибке 404. Так как файл contact.php еще не существует.

Создайте файл contact.php. На стороне сервера необходимо проверить полученные данные и отправить ответ JSON.

Теперь пришло время интегрировать reCAPTCHA v3.

Интеграция на стороне клиента

Загрузите API JavaScript с site key. Вставьте приведенный ниже код под ссылкой на CDN JQuery.

Важно : замените YOUR_SITE_KEY_HERE значением, которое вы сохранили ранее.

В документации к reCAPTCHA v3 сказано, что необходимо вызывать grecaptcha.execute для каждого пользовательского действия, которое нужно защитить (отправка данных формы). Этот вызов генерирует токен, который необходимо отправить вместе с данными формы для проверки на стороне сервера. Для этого нужно добавить в форму скрытое поле ввода и динамически присвоить ему значение токена:

Вызовите эту функцию ниже Ajax-запроса и присвойте скрытому полю ввода значение токена.

Значение ‘action’ является специфичным для действия отправки данных формы. Различные действия помогут анализировать данные по всему сайту, если добавить reCAPTCHA сразу в нескольких местах.

Примечание: срок действия токенов reCAPTCHA истекает через две минуты. Поэтому необходимо сгенерировать этот токен только после того, как пользователь нажмет кнопку отправки и перед выполнением Ajax- запрос.

Интеграция на стороне сервера

После проверки введенных пользователем данных на стороне сервера, нужно получить оценку от Google, чтобы убедиться в том, что имеем дело с реальным человеком. Внутри блока if(isvalid()) < >добавьте приведенный ниже код, чтобы выполнить API-запрос для получения оценки.

Важно : замените YOUR_SECRET_KEY_HERE значением, которое вы скопировали ранее. Secret key предназначен только для серверной части.

Полученный ответ является объектом JSON.

Бонусный совет:

Добавив JavaScript API, мы получили раздражающий значок reCAPTCHA в правом нижнем углу веб-страницы.

Но этот значок можно скрыть, если добавить следующий текст в поток пользователя:

Поэтому добавьте это в элемент p > под кнопкой отправки.

Теперь, чтобы скрыть значок, просто добавьте приведенный ниже код в CSS.

Мы успешно настроили Google reCAPTCHA v3 для формы. Теперь вы будете получать сообщения только от реальных людей.

СКАЧАТЬ ИСХОДНЫЙ КОД

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

Источник

Капча — что это такое, какая она бывает и как правильно её выбирать

Что такое капча

Капча (англ. captcha) — аббревиатура от «Completely Automatic Public Turing Test to Tell Computers and Humans Apart» (полностью автоматический тест Тьюринга для отличния компьютеров от людей). По сути, это защита от заполнения и отправки любых форм ботами и спамерами в автоматическом режиме, будь то запрос в поисковой системе или регистрация в каком-либо сервисе, отправка комментария под статьёй или заполнение анкеты на сайте. Как правило, представляет собой картинку с со случайным текстом, цифрами, буквами, значение которой нужно записать в специальную форму.

Пример капчи во Вконтакте

Эффект рассчитан на то, что боты картинку не распознают, а человек — сможет. Соответственно, спамеры в автоматическом режиме и боты проверку не пройдут, и спам тоже.

Виды капчи, какая она бывает

Как было сказано выше, как правило, капча — это картинка с цифрами и буквами. Однако, это не единственная её форма, ведь всё зависит от вашей фантазии.
Самая простая капча представляет собой чекбокс, куда надо поставить галочку в подтверждение о том, что вы — не робот.

Капча на сайте МТС при отправке бесплатных sms

Бывают такие, что приходится выбирать картинки по какому-то признаку. Например, подобная схема реализована на сайте МТС в разделе отправки бесплатных сообщений SMS.
Собственно, видов превеликое множество. Как же выбрать то, что нужно? Лично я рекомендую пользоваться самописными вариантами, ибо тут всё будет зависеть от фантазии вашей или ваших программистов. Если капча получится оригинальной, то такую вещь обойти спамерам будет намного сложнее. Но, так как это довольно накладно либо по времени, либо по деньгам, советую воспользоваться сервисом Google reCAPTCHA

Google ReCaptcha — как установить и настроить

Google reCAPTCHA — это сервис, который предоставляет бесплатную капчу для защиты различных форм ввода данных на сайте от спамеров и ботов.

На изображении вы видите промо Google reCAPTCHA Invisible — нового вида рекапчи (невидимая), который только проходит бета-тестирование. Соответственно, пока что пользоваться им я не рекомендую, лучше отдать предпочтение классической проверенной рекапче.

Нужно авторизоваться или завести новый аккаунт. Если у Вас уже есть аккаунт от почты Gmail, можно авторизоваться с его помощью.

После авторизации регистрируем сайт, получаем ключи доступа.

Регистрируем сайт для Google Recaptcha

Если их прописать неверно, увидите ошибку Error: Invalid domain key или Ошибка: неверный домен ключа

Публичный и секретный ключи Google Recaptcha

Они понадобятся в дальнейшем:

Я приведу пример с последним вариантом.

В ней мы разместили нашу рекапчу над кнопкой отправки формы. Теперь нужно подключить обработчик. Над этой формой разместим следующий код:

Здесь мы подключили PHP библиотеку для обработки рекапчи, а также верифицировали капчу на сервере Google.

Я подготовил специальную страницу для проверки рекапчи: http://recaptcha.sheensay.ru — код полностью копирует источник выше.
В случае, если форма будет успешно отправлена, вы увидите соответствующее сообщение:

Форма успешно отправлена

Если же, капча не пройдёт проверку, вы увидите сообщение об ошибке:

Проверка капчи не пройдена

Всё, теперь каждая форма комментариев защищена капчей.

Иерархия файлов в подобном проекте:

index.php в корне — тут располагается основной код, рядом располагается каталог recaptcha — в нём все файлы из PHP-библиотеки

Приведу полный код страницы http://recaptcha.sheensay.ru. Вы можете поменять логику вывода ошибок на свою:

Как установить Google Recaptcha в WordPress

Чтобы установить Google Recaptcha в WordPress, самым удобным будет сделать это через плагин Google Captcha (reCAPTCHA) by BestWebSoft

Устанавливаете плагин, в поля вводите ключи для домена, которые мы приготовили по инструкции выше — и готово.

Далее, переходите к настройкам плагина, вводите публичный и секретный ключи в соответствующие поля:

Страница настроек плагина Google Captcha (reCAPTCHA) by BestWebSoft

Как защитить комментарии от спама без капчи

Если морока с собственными комментариями ни к чему, трудно установить капчу, она Вам почему-то не нравится или просто нет такой возможности, то можно воспользоваться готовой системой комментирования Disqus. Как выглядит Disqus, можно увидеть под этой статьёй, на этом сайте интегрирована и используется эта система комментирования. Из плюсов — очень удобная система модерирования, отсутствие спама как такового, приятный внешний вид.

Как обойти капчу

Как говорилось выше, боты картинку капчи не распознают, а человек — сможет. Однако, и на старуху найдётся проруха, потому появились сервисы автоматического распознавания капчи. Одним из них является anti-captcha.com (бывший Antigate).

Суть сервиса заключается в том, что он за небольшую плату предоставляет сервис распознавания капчи. Капчу распознают люди, готовые это делать за копейки.
Такой сервис может пригодиться, скажем, для парсера поисковой выдачи (например, KeyCollector). Поисковые системы Google или Yandex при слишком частых запросах к ним начнут подозревать автоматические запросы и будут просить вводить капчу. Тут и пригодится сервис автоматического распознавания капчи. Сам сервис предоставляет API для взаимодействия с ним. Многие программы — парсеры, имеют встроенный функционал для взаимодействия с антикапчей (тот же KeyCollector имеет его), вам будет достаточно только пополнить баланс и прописать ключи API сервиса в программе, остальное — дело техники.

Источник

Как добавить капчу для Сontact Form 7

Если вы в поисках оптимального плагина капчи для Contact Form 7, эта статья вам поможет. Мы рассмотрим самые популярные плагины капчи и расскажем, как добавить их на сайт WordPress. Подробнее о том, что такое капча и какие виды капчи бывают, читайте в статье Капча для сайта на WordPress.

Чтобы добавить капчу для Contact Form 7, нужно установить совместимый с ней плагин, активировать и настроить его.

Плагины капчи для Contact Form 7

Плагины капчи для Contact Form 7 — это расширения, с помощью которых можно добавить капчу для контактной формы Contact Form 7 в WordPress. Если у вас ещё не установлен плагин Contact Form 7, это можно сделать по инструкции Контактная форма WordPress.

Ниже мы рассмотрим, как настроить три популярных плагина капчи: Contact Form 7 Image Captcha, Contact Form 7 Captcha и Advanced noCaptcha & invisible captcha (v2 & v3).

Contact Form 7 Image Captcha

Contact Form 7 Image Captcha — простая капча, которая не требует от пользователя решения головоломок и угадывания сложных символов. Чтобы пройти капчу, достаточно выбрать один из трёх простых значков (например, чашку, грузовик или ель). Также можно скрыть появление капчи до момента, пока пользователь не начнёт взаимодействовать с контактной формой.

Чтобы добавить капчу на сайт:

В панели управления WordPress перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [cf7ic], например, после тега [submit] (кнопка Отправить). Это можно сделать вручную или нажав на тег формы Изображение Captcha.

Готово, вы добавили на сайт «Image Captcha»:

Captcha WordPress для Contact Form 7

Contact Form 7 Captcha

Contact Form 7 Captcha — надёжный плагин для reCaptcha v2 («Я не робот» и невидимая капча) от Google. Для размещения капчи на сайте нужно зарегистрироваться в Google Captcha и получить API-ключи

Чтобы добавить капчу на сайт:

На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.

В панели управления WordPress перейдите в раздел Настройки — CF7 Simple Recaptcha и заполните поля:

Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

Invalid captcha error message — пропишите текст, который увидят пользователи в случае, если не пройдут капчу.

Нажмите Save Settings (Сохранить настройки):

Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» перед тегом [submit] (кнопка Отправить) вставьте в поле шорткод [cf7sr-simple-recaptcha] и нажмите Сохранить:

Готово, вы добавили на сайт капчу «Я не робот»:

Contact Form 7 капча

Advanced noCaptcha & invisible captcha (v2 & v3)

Advanced noCaptcha & invisible captcha (v2 & v3) — плагин с возможностью выбора вида капчи — reCaptcha v2 («Я не робот» и невидимая капча) или v3 (которая не требует действий от пользователя). Для капчи версии v2 можно менять тему (светлая или тёмная) и размер. Капчу можно настроить для всех пользователей или только для неавторизованных. Кроме этого, можно указать количество неудачных попыток входа в систему, после которых будет всплывать капча.

Чтобы добавить капчу на сайт:

На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.

В панели управления WordPress перейдите в раздел Настройки — Advanced noCaptcha & invisible captcha и заполните поля:

Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

Также вы можете внести дополнительные настройки. Нажмите Сохранить изменения:

Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [anr_nocaptcha g-recaptcha-response] и нажмите Сохранить:

Готово, вы добавили на сайт reCAPTCHA v3:

Теперь вы знаете какие бывают плагины капчи для контактной формы WordPress и как добавить капчу в Contact Form 7.

Источник

Как установить captcha на форму?

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

Капча будет автоматически установлена под последним виджетом поля в форме:

Отображение на опубликованной странице:

Если вы хотите самостоятельно собирать статистику по капче, то нужно будет произвести некоторые изменения с кодом.
Итак, в первой строке скрипта, в самом его начале, мы видим ключ (key) капчи
«6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J»
Для доступа к статистике нам нужно заменить данный ключ на свой.

Важно! Убедитесь, что «Проверить источник решений reCAPTCHA» не выбран (с данной настройкой капча может не работать)

Готово! Капча создана. Появится 2 ключа. Скопируйте первый:

Ключ получен. Замените его вместо текущего
«6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J» в скрипте.

Капча устанавливается по умолчанию на все виджеты новых форм страницы.
❗Если для каких-то форм это не нужно, то поставьте у формы класс nocaptcha

Галочка капчи будут отображаться в заявке как отдельное поле:

Готово! 😊 Теперь можно протестировать работу на опубликованной странице.

Источник

Добавление Google reCAPTCHA к PHP форме

Статья, в которой рассмотрим, как подключить recaptcha к форме обратной связи, работающей по технологии ajax.

Что такое Google reCAPTCHA?

Google reCAPTCHA – это сервис для защиты вашего сайта от ботов и других атак.

Формы обратной связи, комментирования, регистрации, авторизации, оформление заказа довольно часто подвергаются спам атаке. Чтобы их защитить от ботов и злоупотребление можно воспользоваться reCAPTCHA.

Версии Google reCAPTCHA:

Подключение reCAPTCHA v2 или v3

Установку Google reCAPTCHA v2 или v3 для проверки форм можно представить в виде следующих шагов:

Получение ключей reCAPTCHA

Получение ключей для reCAPTCHA v2 или v3 необходимо перейти на страницу «www.google.com/recaptcha/admin».

Для доступа к консоли администратора необходимо иметь аккаунт в Gmail. Если учётной записи нет, то её нужно завести.

После этого необходимо нажать на значок «+».

В открывшейся форме нужно:

После заполнения всех полей нажать на кнопку «Отправить».

При успешной регистрации Google будут выданы 2 ключа:

Установка recaptcha на сайт

Подключение reCAPTCHA к сайту (странице) осуществляется как на стороне клиента (в HTML), так на стороне сервера (в PHP).

Разберём, как это осуществляется более подробно. В качестве примере выберем ajax форму обратной связи.

Подключение recaptcha к HTML-документу

Подключение виджета reCAPTCHA к странице осуществляется посредством выполнения 2 действий:

Интегрирование recaptcha в php скрипт

Установка recaptcha в скрипт php осуществляется посредством внесения в файл process.php следующих изменений:

Готовая форма обратной связи с recaptcha

Бесплатно загрузить форму обратной связи с recaptcha можно по следующей ссылке:

Изображения готовой формы, в которую интегрирована recaptcha.

Статьи, связанные с этой темой:

Комментарии:

У себя на сайте в форме регистрации для валидации использую php либу grecaptcha:
На самой странице:
В принципе все отлично работает.

Но, к примеру при регистрации юзера после submit формы рекапча валидировалась, а какое-либо поле (логин, e-mail и т.п.) не прошло валидацию.
Юзер исправляет данные. При этом рекапча уже отмечена решенной.
А при повторном submit формы — получаем ошибку валидации timeout-or-duplicate

Погуглив данную ошибку понял, что API рекапчи не позволяет её верифицировать более одного раза по одному и тому же токену.

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

Долго гуглил — как я понял через php это не предусмотрено, а через js — grecaptcha.reset();.

Можете помочь советом, как это «прикрутить»?

В документации есть опция error-callback. Может можно решить задействовав её?

Спасибо за Ваш ответ. Я выбрал отправку по SMTP, но не знаю что прописать вместо ***
Вот данные почты, помогите пожалуйста заполнить.

Имя пользователя: fetva@313news.net
Пароль: Используйте пароль почтовой учетной записи.
Сервер входящей почты: cpanel24.v.fozzy.com
IMAP Port: 993 POP3 Port: 995
Исходящий сервер: cpanel24.v.fozzy.com
SMTP Port: 465
IMAP, POP3 и SMTP authentication.

с этим вылезла ошибка, письмо не отправляется.

Как добавить в форму новое поле подробно описывал в этой статье. Она, конечно, немного отличается от этой, но принцип такой же.

Я посмотрел и попытался сделать. Добавил в индексный файл

а в файл process.php добавил:
перед:
добавил
далее добавил pol тут
и тут
в итоге письмо отправляется, на почту приходит слово Пол, но выбранная опция не приходит.
Я не разбираюсь в php, помогите пожалуйста.

Может порт с использованием ssl какой-то другой.

В этой форме ещё нужно добавить код в «script.js»:

Письмо не ушло. На почте ничего нет, но в файле message.txt оно появилось.

Через минуту в форме появилось сообщение:
А вместо капчи написано: Время проверки истекло…

Приведу код на всякий случай

Добрый день.
Спасибо за инструкцию.

Помогите, пожалуйста.
1. Нет файла process.php Где он может лежать? Или его нужно создать?
2. Файл script.js у меня в шаблоне сайта, это нормально, код капчи будет в нем работать?
Спасибо.

Почему то не отправляются файлы в папку images, ошибку не пишет, просто отправляет сообщение на почту.

Сделал для нескольких типов файлов, как вы писали ниже.

// если данные были отправлены методом POST, то…
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) <

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;

// отправляем письмо
if ($mail->Send()) <
$data[‘result’]=’success’;
> else <
$data[‘result’]=’error’;
>

//после загрузки веб-страницы
$(function () <

Источник