Авторизация

Используем Google reCaptcha вместе с PHP и JavaScript

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

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

Нет ничего сложного в том, чтобы поставить Google reCaptcha на свой сайт. Первым делом идем на сайт:

https://www.google.com/recaptcha/intro/index.html

Нажимаем Get reCaptcha и регистрируем свой сайт.

После регистрации своего сайта. Вы получите два ключа - секретный ключ (Google Secret Key) и публичный ключ (Google Site Key). Секретный ключ будет отправляться на сервер Google вместе с GET запросом, для проверки каптчи, а публичный ключ устанавливается непосредственно на ваш сайт.

Устанавливаем HTML Google reCaptcha на сайт.

Установка HTML кода Google reCaptcha на сайт происходит в два этапа. Первый этап заключается в подключении необходимых JavaScript библиотек:

<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"> </script>

Затем непосредственно в форму, которую необходимо проверять вы вставляете DIV блок следующего содержания:

<div class="g-recaptcha" data-sitekey="Ваш ПУБЛИЧНЫЙ ключ reCaptcha"></div>

Проверка Google reCaptcha средствами PHP

Несмотря на то, что у вас уже появилась каптча на странице, она не проходит валидацию на сервере и любой человек может "пройти" вашу каптчу. Давайте исправим это.

Google reCaptcha проверяется на сервере, путем отправки GET запроса на сервер Google с приватным ключом, IP адресом и значением поля g-recaptcha-response из $_POST.

Вот листинг файла post.php, который отправляет запрос на сервер Google для проверки валидации каптчи:


/**
* Ваш приватный ключ от Google reCaptcha.
*/
const GOOGLE_RECAPTCHA_PRIVATE_KEY = '6LeuFQ0UAAAAAPHYQANQn7TBBBP9oqRg8cWMR8oK';
if (isset($_POST['g-recaptcha-response'])) {
    $params = [
          'secret' => GOOGLE_RECAPTCHA_PRIVATE_KEY,
          'response' => $_POST['g-recaptcha-response'],
          'remoteip' => $_SERVER['REMOTE_ADDR']
      ];
      $curl = curl_init('https://www.google.com/recaptcha/api/siteverify?' . http_build_query($params));
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
      $response = json_decode(curl_exec($curl));
      curl_close($curl);
        if (isset($response->success) && $response->success == true) {
          echo "Вы прошли проверку reCaptcha";
      } else {
          echo "Вы не прошли проверку reCaptcha";
      }
} 

Этот файл был создан для примера и в реальной ситуации, скорее всего вы будете проводить какие-либо дополнительные проверки, например проверку на правильность полей логин и пароль.

Как обновить Google reCaptcha средствами JavaScript.

Иногда требуется обновить reCaptcha программно, например если вы отправляете данные на сервер средствами AJAX. Сделать это несложно, достаточно в обработчике прописать следующую строчку:

grecaptcha.reset();

И при определенном событии, например, при нажатии на кнопку, reCaptcha обновится. Пример обновления Google reCaptcha при нажатии на кнопку:

var button = document.getElementById('reload');
  button.addEventListener('click', function(e) {
      grecaptcha.reset();
  });

Как разместить несколько кодов Google reCaptcha на одной странице.

Очень часто требуется, чтобы на одной странице было несколько Google reCaptcha. Сделать это стандартным способом невозможно, так как в этом случае всегда будет установлена только одна каптча, а остальные будут скрыты. Такое поведение можно с легкостью переопределить, если подписаться на событие onload возникающее во время загрузки JavaScript файла каптчи:

<script src="https://www.google.com/recaptcha/api.js?onload=onLoadHandler&render=explicit"></script>

В листинге выше вы должны обратить свое внимание на строчку onLoadHandler, это и есть наша callBack функция, которая будет вызываться при загрузке скрипта. Давайте посмотрим ее листинг:

var onLoadHandler = function( ) {
  	var captcha1 = grecaptcha.render('captcha1ID', {
          'sitekey' : '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
           'theme' : 'light'
      });
      var captcha2 = grecaptcha.render('captcha2ID', {
          'sitekey' : '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
           'theme' : 'light'
      });
  }

Теперь, при загрузке страницы у нас будет вызываться каждый раз функция onLoadHandler, в который мы инициализируем одновременно две Google reCaptcha на своей странице и при этом две каптчи одинаково хорошо работают. Вот полный HTML код вызова несколько reCaptcha на одной странице:

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>Google reCaptcha</title>
      <script src="https://www.google.com/recaptcha/api.js?onload=onLoadHandler&render=explicit"></script>
  </head>
  <body>
  <form action="post.php" method="post">
      <div id="captcha1ID"></div>
      <button type="submit">Отправить первую форму</button>
  </form>
  <form action="post.php" method="post">
      <div id="captcha2ID"></div>
      <button type="submit">Отправить вторую форму</button>
  </form>
  <script type="text/javascript">
      var onLoadHandler = function( ) {
          var captcha1 = grecaptcha.render('captcha1ID', {
              'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
              'theme': 'light'
          });
          var captcha2 = grecaptcha.render('captcha2ID', {
              'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
              'theme': 'light'
          });
      };
  </script>
  </body>
  </html>

Добавление нескольких Google reCaptcha с помощью jQuery по клику мыши.

Часто требуется добавить несколько Google reCaptcha с помощью JavaScript или jQuery при каком-то событии, например, по клику мыши. Сделать это очень просто, зная основной принцип Google reCaptcha: должен быть элемент с уникальным ID и он должен быть в DOM дереве. Дальше осталось написать готовый код:

<script type="text/javascript">
      $(function( ) {
          $('.action').on('click', function(e) {
              e.preventDefault();
              var $container = $('#google-recaptcha-container');
              var id = 'captcha-' + $container.find('div').length;
              var $div = $('<div></div>');
              $div.attr('id', id);
              $container.append($div);
              grecaptcha.render(id, {
                  'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
                  'theme': 'light'
              });
          });
      });
  </script>

Суть кода в том, что мы по какому-то действию должны в $container вставить DIV с уникальным ID, а потом в этот DIV отрендерить нашу каптчу. Все очень просто.

Конечно же, это пример синтетический, но когда вы будете делать свой проект с Google reCaptcha, скороее всего у вас будет несколько модальных окон или форм и на каждой нужно будет показать свою каптчу.

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

Invalid domain for site key

Последнее, о чем хотелось бы рассказать - об ошибке Invalid domain for site key. Ошибка возникает в том случае, если ваш публичный ключ находится не на том домене, который вы указывали в настройках reCaptcha. Думаю, тут все понятно.

Полный листинг и готовый рабочий пример можно скачать с нашего GitHub репозитория по адресу:

https://github.com/backenderru/google-recaptcha-sample
Скачать с сайта

[ Saitadmin.ru || с 2006 по текущий год || Санкт-Петербург ]