Как подключить Google ReCAPTCHA на сайт
Пример подключения Google reCaptcha на сайт, регистрация в API, вставка кода в форму, проверка правильности введенной капчи.
Регистрация сайта в сервисе reCaptcha
Итак, сначала нужно добавить сайт в ReCaptcha API перейдя по ссылке https://www.google.com/recaptcha/admin/create (нужна авторизация), в форме нужно указать название и домен сайта где будет использоваться капча.
После отправки формы появится страница с данными для интеграции.
Вывод на сайте
Чтобы вывести капчу в форме, нужно подключить api.js и добавить <div> c классом g-recaptcha и атрибутом data-sitekey с открытым ключом.
Несколько reCaptcha на странице
В таком случае, в формах вставляются несколько DIVов с уникальным идентификатором, а далее к ним подключается reCaptcha JS-скриптом.
Проверка заполнения капчи
На стороне сервера проверку введенной капчи можно реализовать двумя способами:
Использование Google reCAPTCHA v2 и v3 в одной форме
У Google появилась замечательная reCAPTCHA v3. Замечательна она тем, что освобождает пользователя от необходимости тыкать по картинкам в поисках светофоров и пожарных гидрантов, при этом вполне успешно анализирует его действия на сайте и оценивает их по шкале от 0 до 1. Чем выше балл, тем качественней наш бот выше вероятность, что пользователь реальный. Обычно выставляют порог равным 0.5.
А что делать, если хочется добра пользователям сайта, но есть у его владельца некая обеспокоенность, что не пропустит невидимая столь ценного реального пользователя, который может и ведет себя странно и подозрительно, но совсем не бот?
Ответ — последовательно использовать капчу обоих версий — не прошел невидимую проверку — появилась видимая капча!
Что делаем
Тут обозначу основные моменты. Весь код есть по ссылке на github. достаточно переименовать файл config.example.php в config.php и поменять в нем ключи доступа на настоящие.
Для подключения необходимо получить публичные (site key) и приватные (secret key) ключи от обеих версий Google reCAPTCHA на сайте.
Добавляем на страницу скрипт, указав в параметре публичный ключ версии 3
Создаем форму, в которую помимо наших полей добавляем два скрытых для токенов, а также один блок, в который будет добавляться видимая капча. Блоку требуется задать значение атрибута «id».
Форма у нас будет отправляться по ajax. Пишем обработчик для события подтверждения формы. Тут:
form — эта переменная содержит объект формы
captcha_key_site_v3 — открытый публичный ключ для капчи 3 версии
token — токен, присвоенный пользователю, по нему в дальнейшем будем обращаться в сервис Google и получать те самые баллы
— открытый который проверяет, что определена переменная grecaptcha из библиотеки Google, получает токен и записывает его в скрытое поле, после чего отправляем форму.
Для отправки ипользуется метод sendForm , в котором выполняется такая последовательность действий:
Отправляем ajax запрос с данными формы на сервер
Если на сервере проверка пройдена и данные формы приняты, получаем сообщение об успехе и выводим информацию об этом пользователю
Если произошла ошибка, связанная с версией 3 (не отчечает сервер или недостаточно баллов), то рендерим капчу версии 2
Методу render передаем первым параметром id блока, в который будет помещена капча, вторым — набор параметров:
sitekey — публичный ключ капчи версии 2
theme — цветовая схема капчи, может принимать значения dark / light
callback — имя функции, которая будет вызвана после проверки капчи версии 2
WidgetCaptcha — это переменная, в которой хранится идентификатор капчи, полезно использовать особенно когда на странице несколько форм, для сброса капчи используеся метод grecaptcha.reset(WidgetCaptcha)
В функции-коллбеке setTokenV2 передается токен от второй версии капчи, его мы записываем во второе скрытое поле
В этой же функции можно сразу вызвать sendForm() или предоставить пользователю самостоятельно нажать на кнопку. На этот раз форма улетает уже с двумя токенами, при этом первым проверяется токен версии 2, на всякий случай на стороне сервера по нему тоже получаем инофрмацию от Google, и если все в порядке, возвращаем информацию об успехе в браузер, где и показывем соответстующее сообщение.
Код серверной части в файле ajax.php:
Надеюсь, кому-то пригодиться в работе, также буду рад комментариям и вопросам.
Как связать reCaptcha с формой обратной связи
Всем привет. Недавно помогал связать форму обратной связи, которая сделана с применением технологии ajax (то есть без перезагрузки страницы) с recaptca от Google и решил, что многим это тоже может быть интересно.
Да, есть много плагинов для CMS, но вручную сделать это немного сложнее, а раз появился такой вопрос у одного, то может и кому-то из вас пригодится статья.
Делать буду на примере свой же формы.
Форма обратной связи с recaptcha от Google
Итак, для тех, кто еще не понял, мы пытаемся добавить такую штуку в нашу форму:
В первую очередь нужно получить API key для домена, на котором будет использоваться reСaptcha. Чтобы его получить, нужно перейти на эту страницу придумать названия и указать нужный домен:
После этого, вас перебросят на страницу, где кратко будет описана интеграция на сайт, а также находиться ваш секретный ключ и ключ сайта:
Дальше, нам говорят, что перед закрывающимся тегом </head> нужно разместить следующий скрипт:
А в форму, там, где будет располагаться каптча — следующий блок:
Есть несколько дополнительных настроек, например:
- светлый или темный внешний вид — data-theme=»light» или data-theme=»dark».
- нормальный или компактный размер — data-size=»compact», data-size=»norml»
Подробнее о том, какие еще есть настройки и как встроить рекаптчу в несколько форм на одной странице можно почитать тут.
Так как в моей форме все скрипты располагаются в конце страницы, то я решил и скрипт от Google поместить там же. Выглядит это все так:
Еще раз повторюсь, что recaptcha подключается к уже существующей форме, ссылка на которую есть в первом параграфе, поэтому не буду здесь описывать каждую строку, отвечающую за форму. Если что-то будет непонятно, загляните на соседнюю страницу с формой. Или спрашивайте в комментариях.
Разметка формы сейчас выглядит так:
Еще раз повторюсь, не обращайте внимание на форму, если не используете ту, о которой шла речь в одной из прошлых статей. Просто добавьте в нужное место своей формы div с ключом, который выдал Google.
Теперь, если попытаться получить данные переданные методом POST, мы получим не только данные из полей (имя и телефон), а и значение переменной g-recaptcha-response. Его и нужно отправить Гуглу для прохождения верификации.
Самостоятельно сделать это достаточно сложно, но есть готовый скрипт, который просто подключается к обработчику формы. Скачать его можно с Github на этой страничке:
Теперь необходимо подключить его к обработчику (php файлу, который отправляет письмо) или вставить скрипт прямо в него. У меня это файл mail.php. Подключать в самом начале:
В этом файле написан код, который передаст наш секретный ключ, значение g-recaptcha-response в Google, затем произойдет проверка успешна ли пройдена каптча. Но сначала, нужно добавить несколько переменных:
Почти все готово, осталось добавить проверку в форму, чтобы показать пользователями, что они не заполнили каптчу. Я делаю такую:
Полный код моего обработчика:
Обратите внимание на почту и не забудьте поменять на свою. Кроме того, способ подключения файла recaptchalib.php предполагает, что что mail.php и recaptchalib.php находятся рядом, то есть в одной папке. Если будет «вываливаться» ошибка, убедитесь, что пути прописаны правильно или скопируйте код прямо в обработчик (в самый верх).
Вот так, достаточно просто подключить reCaptcha для к своим формам. Надеюсь статья была полезной. Помните, что этот способ не только для той формы, о которой шла речь в начале статьи. Вы легко подключите каптчу и к любой другой. На этом — все. Пока!
Как добавить в PHP-форму reCAPTCHA v3 и отправлять данные с помощью Ajax
В этом руководстве мы добавим в PHP-форму Google reCAPTCHA v3 и отправим ее данные без перезагрузки веб-страницы, используя Ajax.
Почему Google reCAPTCHA v3?
У многих пользователей раньше возникали проблемы при прохождении капчи.
К счастью, сейчас многие сайты используют Google reCAPTCHA v2, которая просто отображает флажок «Я не робот».
В 2018 году Google выпустила reCAPTCHA v3, которая вообще не требует взаимодействия с пользователем. Ее можно использовать в формах, чтобы предотвратить отправку спама.
Теперь узнаем, как добавить Google reCAPTCHA v3 в простую форму.
Регистрация ключей reCAPTCHA v3
Сначала необходимо зарегистрировать свой сайт и получить ключи здесь . Затем добавьте метку, выберите reCAPTCHA v3, введите доменное имя сайта и отправьте данные.
После этого будет сгенерирован site key и secret key. Скопируйте и сохраните их.
HTML-форма
В качестве примера используем простую форму с полями «Полное имя», «Электронная почта» и «Сообщение».
Ниже представлен HTML-код формы. Ее CSS-код доступен в архиве с исходниками .
Отправка данных формы с помощью 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.
Расшифруем объект JSON $recaptcha и проверим success, score и action. Оценка имеет значение от 0,0 до 1,0. По умолчанию можно использовать порог 0,5.
Все готово! Нажмите кнопку отправки, и если вы все правильно настроили, то получите ответ your message was sent successfully .
Бонусный совет:
Добавив JavaScript API, мы получили раздражающий значок reCAPTCHA в правом нижнем углу веб-страницы.
Но этот значок можно скрыть, если добавить следующий текст в поток пользователя:
Поэтому добавьте это в элемент < p > под кнопкой отправки.
Теперь, чтобы скрыть значок, просто добавьте приведенный ниже код в CSS.
Мы успешно настроили Google reCAPTCHA v3 для формы. Теперь вы будете получать сообщения только от реальных людей.