Ваш браузер устарел. Рекомендуем обновить его до последней версии.

Как добавить reCapcha на свой сайт?

Опубликовано 27.02.2019

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

Содержание:
1.reCAPTCHA - Регистрация сайта на сервисе и получение ключей.
2.Установка кода и ключей.
3.Подключение recaptcha к HTML-документу.
4.Интегрирование recaptcha в php скрипт.
5.Формы обратной связи от recaptcha.

Рекапча на сайте необходима для защиты от спуфинга(многократные регистрации роботом) спама и других недействительных автоматизированных действий.

 

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

Переходим на сайт reCAPTCHA авторезируемся через гугл аккаунт.

В первую строку пишем название сайта можно тематику

Домен вписываем ниже!

Затем вибераем из 2 вариантов

1.reCAPTCHA v3

2.reCAPTCHA v2

Самый простой и рабочий вариант это 2.  устанавливаем "Флажок "Я не робот"

В  следующие поля вводим доме, ниже почта, подтверждаем правила и отправить.

Теперь перед вами открываются ключи 

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

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

 

 

 

 

 

 

Установка кода и ключей

Один из ключей является публичным. Данный ключ указывается в HTML-коде сайта и предназначен для отображения виджета recaptcha.

Второй ключ является секретным. Он предназначен для установления связи северного скрипта сайта с сервисом reCAPTCHA для проверки ответа пользователя.

 

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

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

 

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

 

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

 

  1. Включения в страницу JavaScript скрипта recaptcha.
  2. Добавление элемента div с классом "g-recaptcha" и атрибутом data-sitekey, имеющий в качестве значения ваш публичный ключ (public key) капчи.

 

Кроме этого, добавим на страницу ещё элемент div с идентификатором id="recaptchaError". Данный элемент будем использовать для отображения ошибки, связанной с google racaptcha.

 Кроме этого необходимо будет внести ещё изменения в файл script.js, т.к. форма обратной связи отправляется на сервер через AJAX.

  1. <!-- добавление элемента div -->
  2. <divclass="g-recaptcha"data-sitekey="6KepjAsTFFFFFFMqccY0ZiGqc3TEd3YVxo8cHsGX"></div>
  3.  
  4. <!-- элемент для вывода ошибок -->
  5. <divclass="text-danger"id="recaptchaError"></div>
  6.  
  7. <!-- js-скрипт гугл капчи -->
  8. <scriptsrc='https://www.google.com/recaptcha/api.js'></script>
       
  1. // Работа с виджетом recaptcha
  2. // 1. Получить ответ гугл капчи
  3. var captcha = grecaptcha.getResponse();
  4.  
  5. // 2. Если ответ пустой, то выводим сообщение о том, что пользователь не прошёл тест.
  6. // Такую форму не будем отправлять на сервер.
  7. if(!captcha.length){
  8. // Выводим сообщение об ошибке
  9. $('#recaptchaError').text('* Вы не прошли проверку "Я не робот"');
  10. }else{
  11. // получаем элемент, содержащий капчу
  12. $('#recaptchaError').text('');
  13. }
  14.  
  15. // 3. Если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX)
  16. if((formValid)&&(captcha.length)){
  17. ...
  18. // добавить в formData значение 'g-recaptcha-response'=значение_recaptcha
  19. formData.append('g-recaptcha-response', captcha);
  20. ...
  21. }
  22. // 4. Если сервер вернул ответ error, то делаем следующее...
  23. // Сбрасываем виджет reCaptcha
  24. grecaptcha.reset();
  25. // Если существует свойство msg у объекта $data, то...
  26. if($data.msg){
  27. // вывести её в элемент у которого id=recaptchaError
  28. $('#recaptchaError').text($data.msg);
  29. }

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

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

  • создание переменной $secret, содержащей секретный ключ вашего сайта;
  • подключения клиентской библиотеки reCAPTCHA PHP посредством включения в скрипт файла autoload.php;
  • проверка наличия ключа g-recaptcha-response в супер глобальном массиве POST;
  • если данное имя (g-recaptcha-response) есть, то создать экземпляр службы recaptcha, используя ваш секретный ключ;
  • получить результат проверки кода: если результат положительный, то выполнить необходимые действия (например, отправить информацию на почту).
  • если возникла ошибка, то отправить клиенту отрицательный результат.
  1. // ваш секретный ключ
  2. $secret ='6NepjAsGBBABBN7_Qy9yfzShcKmc70X2kXQyX1WO';
  3. // однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP)
  4. require_once (dirname(__FILE__).'/recaptcha/autoload.php');
  5. // если в массиве $_POST существует ключ g-recaptcha-response, то...
  6. if(isset($_POST['g-recaptcha-response'])){
  7. // создать экземпляр службы recaptcha, используя секретный ключ
  8. $recaptcha =new \ReCaptcha\ReCaptcha($secret);
  9. // получить результат проверки кода recaptcha
  10. $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  11. // если результат положительный, то...
  12. if($resp->isSuccess()){

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

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

  • создание переменной $secret, содержащей секретный ключ вашего сайта;
  • подключения клиентской библиотеки reCAPTCHA PHP посредством включения в скрипт файла autoload.php;
  • проверка наличия ключа g-recaptcha-response в суперглобальном массиве POST;
  • если данное имя (g-recaptcha-response) есть, то создать экземпляр службы recaptcha, используя ваш секретный ключ;
  • получить результат проверки кода: если результат положительный, то выполнить необходимые действия (например, отправить информацию на почту).
  • если возникла ошибка, то отправить клиенту отрицательный результат.
  1. // ваш секретный ключ
  2. $secret ='6NepjAsGBBABBN7_Qy9yfzShcKmc70X2kXQyX1WO';
  3. // однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP)
  4. require_once (dirname(__FILE__).'/recaptcha/autoload.php');
  5. // если в массиве $_POST существует ключ g-recaptcha-response, то...
  6. if(isset($_POST['g-recaptcha-response'])){
  7. // создать экземпляр службы recaptcha, используя секретный ключ
  8. $recaptcha =new \ReCaptcha\ReCaptcha($secret);
  9. // получить результат проверки кода recaptcha
  10. $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  11. // если результат положительный, то...
  12. if($resp->isSuccess()){