Установка Google reCaptcha v3 на сайт. Как установить капчу на сайт в форму.

Установка Google reCaptcha v3 на сайт. Как установить капчу на сайт в форму.

Взято отсюда.

Как устанавливать 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="hidden" id="g-recaptcha-response" name="g-recaptcha-response" /><br/><br/>
       <input type="text" 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";
    }
}
На этом всё!
Please follow and like us:

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Открыть чат
1
Попробуйте написать нам в WhatsApp!
Попробуйте написать нам в WhatsApp!