Защита PHP формы с помощью invisible reCAPTCHA

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

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

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

Регистрация домена и получение ключей

  1. Открываем страницу www.google.com/recaptcha/admin (при необходимости выполняем регистрацию и авторизацию на сайте).
  2. Заполняем форму «Регистрация сайта». Указываем название, отмечаем Invisible reCAPTCHA (тип reCAPTCHA), вводим домены (по одному встроке).
  3. Получаем ключи: публичный (для клиента) и секретный (для сервера).

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

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

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

  1. Добавить на страницу скрипт reCAPTCHA:<script src=»https://www.google.com/recaptcha/api.js» async defer></script>
  2. Добавить к кнопке, которая будет использоваться для отправки формы или выполнения другого действия на сайте атрибуты (класс «g-recaptcha», в data-sitekey — публичный ключ сайта, в data-callback — имя JavaScript функции обратного вызова для выполнения действий после завершения проверки капчи):<form id=»messageForm» method=»POST» action=»process.php»> <input type=»email» name=»email» required=»required»> <textarea name=»message» required=»required»></textarea> <!— Кнопка, с подключённым к ней виджетом invisible reCAPTCHA —> <button class=»g-recaptcha» data-sitekey=»your_site_key» data-callback=»onSubmit»>Отправить</button> </form>
  3. Добавить на страницу сценарий JavaScript функцию onSubmit:<script> function onSubmit(token) { // отправить форму на сервер document.getElementById(«messageForm»).submit(); } </script>

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

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

  1. Добавить в HTML форму элемент div с атрибутами class="g-recaptcha"data-sitekey="значение публичного ключа"data-callback="onSubmitReCaptcha" и data-size="invisible"onSubmitReCaptcha — это имя функции, которая будет вызвана после окончания успешной проверки пользователя. В данный элемент будет осуществляться рендеринг капчи invisible reCAPTCHA.<!— Форма обратной связи —> <form id=»messageForm» enctype=»multipart/form-data» method=»post» novalidate> <!— … содержимое HTML формы —> <!— invisible reCaptcha —> <div id=»recaptcha» class=»g-recaptcha» data-sitekey=»6LdXhhgUAAAAAFUToe9JV6qa19DrI2TEM3GH-l7g» data-callback=»onSubmitReCaptcha» data-size=»invisible»></div> <!— Кнопка, отправляющая форму по технологии AJAX —> <button id=»submit» type=»submit» class=»btn btn-primary pull-right» name=»send-message»>Отправить сообщение</button> </form><!— Конец формы —>
  2. Подключить скрипт reCaptcha.<script src=»https://www.google.com/recaptcha/api.js» async defer></script>
  3. Вызвать проверку reCaptcha (grecaptcha.execute()) после успешной валидации HTML формы.// при отправке формы messageForm на сервер (id=»messageForm») $(‘#messageForm’).submit(function (event) { // отменим стандартную отправку формы на сервер event.preventDefault(); // если форма прошла валидацию, то вызовем invisible reCaptcha if (validateForm(this)) { grecaptcha.execute(); } });
  4. Добавить функцию обратного вызова onSubmitReCaptcha, которая будет запущена, если пользователь успешно прошёл капча тест. Код данной функции, содержит вызов другой функции, которая отправляет форму обратной связи на AJAX.function onSubmitReCaptcha(token) { var idForm=’messageForm’; sendForm(document.getElementById(idForm),’/feedback/process.php’); }

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

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

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

  1. Подключить скрипт reCAPTCHA с указанием функции (в данном случае onloadReCaptchaInvisible), которая будет вызвана после завершения загрузки api.js. Функцию onloadReCaptchaInvisible будем использовать для программной генерации виджетов и получения их id.<script src=»https://www.google.com/recaptcha/api.js?onload=onloadReCaptchaInvisible&render=explicit» async defer></script>
  2. Добавим в каждую из форм обратной связи контейнер, который будет представлять собой виджет reCaptcha.<!— HTML форма 1 —> <form id=»messageForm1″ method=»post»> <!— … —> <div id=»recaptcha1″></div> <!— … —> </form> <!— HTML форма 2 —> <form id=»messageForm2″ method=»post»> <!— … —> <div id=»recaptcha2″></div> <!— … —> </form>
  3. Представим каждый контейнер как виджет 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» }); };
  4. Использовать ID виджета при проверке reCAPTCHA:// выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha1 grecaptcha.execute(idCaptcha1); // выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha2 grecaptcha.execute(idCaptcha2);
  5. Применять 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 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 и т.д.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
× iOs app

To install this Web App in your iPhone/iPad press iOs sourse and then Add to Home Screen.