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

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

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

Нажимаем 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 репозитория по адресу:

Комментарии (2)

  • КапчаМэйкер26.06.2018 в 14:37
    К форме комментариев к статье про капчу можно было бы добавить капчу ответить
  • Андрей14.05.2019 в 15:36
    Хорошая статья! ответить