Установка Google reCAPTCHA v3 на AJAX форму сайта

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

Содержание статьи

Что такое Google reCAPTCHA v3?
Шаг 1: Регистрация вашего сайта
Шаг 2: Добавление reCAPTCHA на вашу AJAX форму
HTML:
JavaScript:
Шаг 3: Проверка reCAPTCHA на сервере
Пример кода на сервере (PHP):
Завершение

Что такое Google reCAPTCHA v3?

Прежде чем мы перейдем к установке, давайте разберемся, что такое Google reCAPTCHA v3 и почему он стал настолько популярным. Google reCAPTCHA v3 — это бесплатный сервис от Google, который разработан для выявления и блокирования ботов на веб-сайтах. Однако, в отличие от более старых версий reCAPTCHA, v3 не требует от пользователей вводить какие-либо капчи или выполнять дополнительные задания. Вместо этого v3 анализирует пользовательское взаимодействие с сайтом и присваивает оценку, основанную на уровне доверия. Это позволяет сайтам более точно определять, является ли пользователь человеком или ботом.

Шаг 1: Регистрация вашего сайта

Прежде чем начать установку Google reCAPTCHA v3, вам потребуется зарегистрировать свой сайт в Google reCAPTCHA. Вот как это сделать:

Перейдите на официальный сайт Google reCAPTCHA (https://www.google.com/recaptcha).
Нажмите на «Администратор» в верхнем правом углу экрана и войдите в свой аккаунт Google.
После входа в аккаунт, нажмите на «Создать» или «Добавить сайт».
Заполните необходимую информацию о вашем сайте, включая доменное имя.
Примите условия использования и выберите версию reCAPTCHA, в данном случае — v3.
После завершения регистрации, вам будет предоставлен секретный ключ (Site Key) и секретный ключ (Secret Key), которые вам понадобятся для установки reCAPTCHA на вашей AJAX форме.

Шаг 2: Добавление reCAPTCHA на вашу AJAX форму

Теперь, когда у вас есть Site Key и Secret Key, вы можете начать установку reCAPTCHA на вашей AJAX форме. Вам потребуется HTML, JavaScript и серверный код для этого процесса. Давайте разберемся с каждым из этих шагов подробнее.

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Форма с Google reCAPTCHA v3</title>
<!-- Добавьте скрипт reCAPTCHA v3 на вашу страницу -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fwww.google.com%2Frecaptcha%2Fapi.js%3Frender%3DYOUR_SITE_KEY%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>
<form id="ajax-form">
<!-- Ваши поля формы здесь -->
<input type="text" name="name" placeholder="Ваше имя">
<input type="email" name="email" placeholder="Ваш email">
<textarea name="message" placeholder="Ваше сообщение"></textarea>
<!-- Добавьте скрытое поле для reCAPTCHA response -->
<input type="hidden" id="recaptcha-response" name="recaptcha-response">
<button type="submit">Отправить</button>
</form>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%2F%2F%20JavaScript%20%D0%B4%D0%BB%D1%8F%20%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8%20%D1%84%D0%BE%D1%80%D0%BC%D1%8B%20%D0%B8%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F%20reCAPTCHA%20response%0Adocument.getElementById('ajax-form').addEventListener('submit'%2C%20function%20(e)%20%7B%0Ae.preventDefault()%3B%0A%0A%2F%2F%20%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D0%B5%20reCAPTCHA%20response%0Agrecaptcha.ready(function()%20%7B%0Agrecaptcha.execute('YOUR_SITE_KEY'%2C%20%7B%20action%3A%20'submit_form'%20%7D).then(function(token)%20%7B%0Adocument.getElementById('recaptcha-response').value%20%3D%20token%3B%0A%0A%2F%2F%20%D0%A2%D0%B5%D0%BF%D0%B5%D1%80%D1%8C%20%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%20%D0%BE%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D1%84%D0%BE%D1%80%D0%BC%D1%83%20%D0%BD%D0%B0%20%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%0A%2F%2F%20%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5%20AJAX%20%D0%B8%D0%BB%D0%B8%20%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%B5%20%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%BE%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B8%20%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85%20%D0%BD%D0%B0%20%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%0A%7D)%3B%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

JavaScript:


<script>
        // JavaScript для обработки формы и получения reCAPTCHA response
        document.getElementById('ajax-form').addEventListener('submit', function (e) {
            e.preventDefault();
            
            // Получите reCAPTCHA response
            grecaptcha.ready(function() {
                grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit_form' }).then(function(token) {
                    document.getElementById('recaptcha-response').value = token;
                    
                    // Теперь можно отправить форму на сервер
                    // Используйте AJAX или другие методы для отправки данных на сервер
                });
            });
        });
    </script>

В приведенном выше HTML коде, вы видите JavaScript, который отвечает за обработку формы и получение reCAPTCHA response. Когда пользователь отправляет форму, скрипт выполняет запрос к reCAPTCHA и получает токен, который отправляется на сервер вместе с данными формы.

Шаг 3: Проверка reCAPTCHA на сервере

Теперь перейдем к серверной части. Вам необходимо проверить reCAPTCHA на сервере, чтобы убедиться, что запрос отправлен от человека, а не от бота. Для этого используйте ваш Secret Key.

Пример кода на сервере (PHP):


<?php
// Получите данные из AJAX формы
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$recaptchaResponse = $_POST['recaptcha-response'];

// Проверка reCAPTCHA
$secretKey = 'YOUR_SECRET_KEY'; // Замените YOUR_SECRET_KEY на ваш Secret Key
$verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
$data = [
'secret' => $secretKey,
'response' => $recaptchaResponse,
];

$options = [
'http' => [
'header' => "Content-Type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data),
],
];

$context = stream_context_create($options);
$response = file_get_contents($verifyUrl, false, $context);
$responseKeys = json_decode($response, true);

if ($responseKeys['success']) {
// Ваш код для обработки данных формы, например, отправка письма или сохранение в базе данных
// ...
echo "Форма успешно отправлена!";
} else {
echo "reCAPTCHA не пройдена. Пожалуйста, проверьте, что вы не робот.";
}
?>

Этот PHP код выполняет проверку reCAPTCHA на сервере с использованием вашего Secret Key. Если reCAPTCHA успешно прошла, сервер обрабатывает данные формы. В противном случае, выводится сообщение об ошибке.

Завершение

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

Итак, не забудьте зарегистрировать свой сайт в Google reCAPTCHA, добавить reCAPTCHA на вашу AJAX форму и проверить ее на сервере с использованием Secret Key. Это сделает ваш сайт более безопасным и защищенным от ботов.