Настройка, установка Invisible reCAPTCHA. Примеры.

Информация о материале
Категория: root

Invisible reCAPTCHA защищает ваш сайт от спама и других видов автоматических злоупотреблений, например массовые регистрации на форуме и т.д. В этой статье рассмотрим, как добавить reCAPTCHA на ваш сайт или приложение. 

Чтобы начать использовать Invisible reCAPTCHA, вам необходимо зарегистрироваться в службах Google. Далее получить ключевую пару для вашего сайта. Ключевая пара состоит из ключа сайта и секретного ключа. Ключ сайта используется для вызова службы Invisible reCAPTCHA на вашем сайте или мобильном приложении.

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

Полученный после регистрации ключ сайта необходимо вставить вместо <you site key> в клиентской части скрипта. А секретный ключ в серверной части вместо <your secret key>

Пример реализации функционала невидимой reCaptcha на стороне клиента + серверная часть (php):

Пример работы Google's reCaptcha

Сторона клиента, файл index.php или index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invisible reCaptcha Demo</title>

    <!-- Подгружаем API Invisible reCAPTCHA -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!--call back function-->
    <script>
        function onSubmit(token) {
            document.getElementById('reCaptchaForm').submit();
        }
    </script>
</head>
<body>
<div class="container">
    <form id="reCaptchaForm" action="signup.php" method="POST">
        <input type="text" placeholder="type anything">
        <!-- Конфигурация Invisible reCaptcha, здесь вставляем ключ сайта -->
        <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Отправить</button>
        <br/>
    </form>
</div>
</body>
</html>

Серверная часть, файл signup.php

<?php
//Выполняем проверку после отправки формы
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = '<your secret key>';
    $response = $_POST['g-recaptcha-response'];     
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
    $result = json_decode($reCaptchaValidationUrl, TRUE);

    //выводим полученный ответ от сервера
    print_r($result);

    if($result['success'] == 1) {
        //Проверка пройдена - здесь выполняем нужный нам код
        $userMessage = '<div>Успешно: проверка пройдена :)</div>';
    } else {
        //Проверка не пройдена - Здесь мы сообщаем клиенту что он спамер
        $userMessage = '<div>Упс: попробуйте позже :(</div>';
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Invisible reCAPTCHA - Ответ сервера</title>
    </head>
    <body>
        <?php
            if(!empty($userMessage)) {
                echo $userMessage;
            }
        ?>
    </body>
</html>

Ответ от API сервера будет выглядеть так:

{
  "success": true|false,
  "challenge_ts": timestamp,
  "hostname": string,
  "error-codes": [...]
}

Важнейшей частью ответа является параметр «success», который дает вам необходимую информацию о принятии или отклонении проверки. Что касается другой информации в ответе, «challenge_ts» - это время, когда была запрошена проверка Invisible reCaptcha (формат ISO yyyy-MM-dd'T'HH: mm: ssZZ), а «hostname» показывает веб-сайт, на котором была выполнена проверка reCaptcha.