Добавление reCAPTCHA v3 на сайт. Практика.

25 июля 2019

Вся официальная документация представлена на странице https://www.google.com/recaptcha/intro/v3.html

В нашей статье будет представлена конкретная простая реализация.

Для начала, нужно зарегистрировать сайт и получить ключи для подключения reCaptcha на сайте. Сделать это можно в консоли админа https://www.google.com/recaptcha/admin/

Шаг 1.

Нужно зарегистрировать новый сайт https://www.google.com/recaptcha/admin/create

Указываем название проекта, домены, а так же выбираем тип reCaptcha v2 или reCaptcha v3 (далее речь пойдет о ней).

Шаг 2.

После этого вы получите ключ сайта (reCAPTCHA_site_key) для интеграции на стороне клиента, а так же секретный ключ (reCAPTCHA_secret_key) для интеграции на стороне сервера.

Шаг 3.

Интеграция на странице на стороне клиента

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
	grecaptcha.ready(function() {
		grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
			// тут может быть ваш код, мы просто в скрытое поле добавляем значение токена
			$('input[name=g-recaptcha-response]').val(token);
		});
	});
</script>

И сама форма

<form method="POST" action="post.php">
	<input type="hidden" name="g-recaptcha-response" />
	<input type="text" name="yourName" placeholder="Ваше имя" required />
	<input type="email" name="yourEmail" placeholder="E-mail" required />
	<input type="submit" value="Отправить" />
</form>

Шаг 4.

Проверка и обработка данных на стороне сервера

<?php
$reCaptcha['site_key'] = '...';
$reCaptcha['secret_key'] = '...';

// функция для отправки запроса на сервер Google
function getCaptcha($data) {
    $Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$reCaptcha['secret_key']}&response={$data}");
    $Return = json_decode($Response);
    return $Return;
}

if (isset($_POST)) {
	// отправляем запрос на сервер Google и получаем ответ
	$return = getCaptcha($_POST['g-recaptcha-response']);
	
	// если запрос отправлен корректно и значение score > 0.5
	if($return->success == true && $return->score > 0.5){
		// ... обработка данных формы
	} else {
		exit("Похоже, что вы – бот.");
	}
}
?>

P.S. Это самый простой пример реализации. Вы его можете развить и доработать под свои конкретные задачи, например для обработки информации в асинхронном режиме (AJAX).

Давайте начнем
новый проект вместе
Ваше сообщение успешно отправлено.
Хотите новый сайт или логотип?
Оставьте свои контактные данные и расскажите в нескольких словах о своем проекте. Мы свяжемся с вами и уточним детали.
Продолжая, вы даете согласие на обработку персональных данных. Ваши данные не будут передаваться третьим лицам.