установка невидимой капчи на сайт google recatcha v3

Установка Google reCaptcha v3 на сайт 2019. Как установить невидимую капчу на сайт.

Всем привет сегодня я покажу вам как устанавливать Google Recaptcha v3 на сайт. Это новый тип капчи, которая не требует выполнения заданий, а сама определяет пользователя по действиям которые он совершает на сайте. Это невидимая капча, нового типа, которая сейчас очень часто используется на различных сайтах.

Первым делом вам нужно зарегистрировать google почту и авторизоваться.

Далее переходим по данной ссылке https://www.google.com/recaptcha/intro/v3.html и нажимаем на кнопку “Admin console”

Если вы впервые создаете капчу то у вас появится окно с создание капчи. Здесь вам нужно заполнить поля.

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

Далее вы выбираете тип капчи. Сегодня мы рассматриваем капчу версии 3, поэтому выбирайте её.

После это прописываем доменные имена. Если вы пользуетесь локальным сервером, то прописывайте localhost или название папки, если это OpenServer.

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

После того как вы прописали домены, вы принимаете условия использования reCaptcha и нажимаете на кнопку отправить.

После этого вы попадаете на страницу с ключами. Вам нужно скопировать данные ключи.

Нажав на кнопку “Перейти в google аналитику” вы попадаете на страницу статистики, где показаны все выполнения и блокировки представленной капчи.

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

Код для Google reCaptcha

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

Весь код выглядит так…

<?php
/*КЛЮЧИ*/
define('SITE_KEY', '6LfH-aIUAAAAANTmsRDS2lZRIjjOxL4Q9q0fIFTl');
define('SECRET_KEY', '6LfH-aIUAAAAAEWJIQJizklZldRxFeTGseZSbRxu');

/*ОБРАБОТКА ЗАПРОСА*/
if($_POST){
    /*СОЗДАЕМ ФУНКЦИЮ КОТОРАЯ ДЕЛАЕТ ЗАПРОС НА GOOGLE СЕРВИС*/
    function getCaptcha($SecretKey) {
        $Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
        $Return = json_decode($Response);
        return $Return;
    }
    
    /*ПРОИЗВОДИМ ЗАПРОС НА GOOGLE СЕРВИС И ЗАПИСЫВАЕМ ОТВЕТ*/
    $Return = getCaptcha($_POST['g-recaptcha-response']);
    /*ВЫВОДИМ НА ЭКРАН ПОЛУЧЕННЫЙ ОТВЕТ*/
    var_dump($Return);
    
    /*ЕСЛИ ЗАПРОС УДАЧНО ОТПРАВЛЕН И ЗНАЧЕНИЕ score БОЛЬШЕ 0,5 ВЫПОЛНЯЕМ КОД*/
    if($Return->success == true && $Return->score > 0.5){
        echo "Succes!";
    }
    else {
        echo "You are Robot";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
   <form action="/" method="POST">
       <input type="text" name="name" /><br/><br/>
       <input type="text" id="g-recaptcha-response" name="g-recaptcha-response" /><br/><br/>
       <input type="hidden" value="Submit" />
   </form>
   
    <script src="https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY?>"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('<?php echo SITE_KEY;?>', {action: 'homepage'}).then(function(token) {
                //console.log(token);
                document.getElementById('g-recaptcha-response').value=token;
            });
        });
    </script>

</body>
</html>

HTML

Давайте начнем разбор с HTML. Здесь я создал простую форму которая состоит из двух полей и кнопки. Каждому полю необходимо прописать значение для атрибута name . Одно из полей мы будем использовать для капчи, поэтому зададим ему специальный идентификатор – g-recaptcha-response.

<form action="/" method="POST">
       <input type="text" name="name" /><br/><br/>
       <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" /><br/><br/>
       <input type="submit" value="Submit" />
</form>

Данные из формы будут отправляться методом POST, обработку я буду проводить в этом же файле, поэтому в атрибуте action ставлю значение /.

JavaScript

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

<?php
/*КЛЮЧИ*/
define('SITE_KEY', '6LfH-aIUAAAAANTmsRDS2lZRIjjOxL4Q9q0fIFTl');
define('SECRET_KEY', '6LfH-aIUAAAAAEWJIQJizklZldRxFeTGseZSbRxu');
...
...
?>

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

<script src="https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY?>"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('<?php echo SITE_KEY;?>', {action: 'homepage'}).then(function(token) {
                //console.log(token);
                document.getElementById('g-recaptcha-response').value=token;
            });
        });
  </script>

Раскомментируйте функцию console.log(token), чтобы увидеть токен в консоли. Данный токен мы будем передавать в качестве значения для поля #g-recaptcha-response.

PHP

Теперь рассмотрим PHP. Вначале я занес ключи в константы, чтобы с ними было удобнее работать(одну из них я уже прописывал в js скрипте).

Ниже мы прописываем проверку что массив POST не пустой и данные из формы записываются.

Далее мы создаем функцию которая будет делать запрос на google сервис и возвращать нам данные этого запроса.

После этого мы записываем работу функции в переменную, чтобы с ней было удобнее работать.

В документации написано, что если значение параметра score ниже 0.5 то скорее всего это бот, а если выше то это человек. Исходя из этого мы создаем данное условия и плюсом проверяем что проверка прошла успешно.

/*КЛЮЧИ*/
define('SITE_KEY', '6LfH-aIUAAAAANTmsRDS2lZRIjjOxL4Q9q0fIFTl');
define('SECRET_KEY', '6LfH-aIUAAAAAEWJIQJizklZldRxFeTGseZSbRxu');

/*ОБРАБОТКА ЗАПРОСА*/
if($_POST){
    /*СОЗДАЕМ ФУНКЦИЮ КОТОРАЯ ДЕЛАЕТ ЗАПРОС НА GOOGLE СЕРВИС*/
    function getCaptcha($SecretKey) {
        $Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
        $Return = json_decode($Response);
        return $Return;
    }
    
    /*ПРОИЗВОДИМ ЗАПРОС НА GOOGLE СЕРВИС И ЗАПИСЫВАЕМ ОТВЕТ*/
    $Return = getCaptcha($_POST['g-recaptcha-response']);
    /*ВЫВОДИМ НА ЭКРАН ПОЛУЧЕННЫЙ ОТВЕТ*/
    var_dump($Return);
    
    /*ЕСЛИ ЗАПРОС УДАЧНО ОТПРАВЛЕН И ЗНАЧЕНИЕ score БОЛЬШЕ 0,5 ВЫПОЛНЯЕМ КОД*/
    if($Return->success == true && $Return->score > 0.5){
        echo "Succes!";
    }
    else {
        echo "You are Robot";
    }
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

9
Оставить комментарий

avatar
6 Цепочка комментария
3 Ответы по цепочке
1 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
8 Авторы комментариев
АннаProgTimeAndriyАлексейИлья Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Serg
Гость
Serg

)

Дмитрий
Гость
Дмитрий

Нихуя не понятно. Где переменные полей то? Где сама отправка? Хоть бы комментариями показал где код отправки формы идет в случае успеха , а где в случае отказа, пиздец

дима
Гость
дима

А каптча подключается для всех страниц или только на определенные?

Илья
Гость

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

Алексей
Гость
Алексей

А как разбить код на несколько файлов? Как установить на html сайт, из PHP только отправка формы

Andriy
Гость

https://www.site4study.com/lesson/86
PHP reCAPTCHA V3 class приклад класу

if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) {

$recaptcha = new RecaptchaModule();
if ($recaptcha->isChecked()) {
echo ‘HELLO PEOPLE’;
echo ‘
‘ . $_POST[‘name’];
} else {
echo ‘HELLO ROBOT’;
}

}

Анна
Гость
Анна

Здравствуйте.
Лично у меня ошибка Invalid site key or not loaded in api.js: SITE_KEY на строчке grecaptcha.execute(‘SITE_KEY’, {action: ‘homepage’}).then(function(token) в том числе. Сделала все по инструкции, а в итоге вот(