Как интегрировать google recaptcha v3 на свой сайт

Новая каптча от гугл, recaptcha v3 - очень одобный элемент для проверки пользователей при отправке форм. На данной странице я покажу как интегрировать ее на свой сайт

В нашем примере мы будет отправлять через ajax данные с формы, и если капча пройдет валидаюцию то воспользуемся функцией mail для отправки сообщений. Также сообщим пользователю об успешной либо нет отправке

Итак, для начала создадим простую форму, в которой будет несколько полей и одна кнопка. Также заранее создадим пару скрытых полей для наших операций с капчей. Не забудем сделать красивые блоки ответов.

<style>
.panel-danger{
	display: block;
    background-color: #ffd9d9;
    padding: 10px;
    border: 1px dotted red;
}
<style>
.panel-success{
	display: block;
    background-color: #dff0d8;
    padding: 10px;
    border: 1px dotted #3c763d;
}
.panel-danger>.panel-heading, .panel-success>.panel-heading{
	font-size: 20px;
}
</style>
<form id="contact-form" action="ajax.php" method="POST">
	<input type="hidden" name="token" id="token">
	<input type="hidden" name="action" id="action">	
		<input type="text" name="name" placeholder="Ваше имя">
		<input type="text" name="phone" placeholder="Ваш номер телефона">
		<button type="submit" name="submit" class="send-order">Заказать</button>
		<div class="panel panel-danger d-none">
		<button class="close-block" type="button">X</button>
			<div class="panel-heading">Ошибка</div>
			<div class="panel-body error-report"></div>
		</div>								
		<div class="panel panel-success d-none">
		<button class="close-block" type="button">X</button>
			<div class="panel-heading">Успешно</div>
			<div class="panel-body success-report"></div>
			</div>
		</form>

Затем напишем небольшой скрипт для работы капчит, отправим данные на сервер и проведем верификацию данных

 <script>   
			let captcha_action = 'contactForm';  
			grecaptcha.ready(function() {
				grecaptcha.execute('ВАШ_ПУБЛИЧНЫЙ_КОД', {action: captcha_action})
					.then(function(token) {
						if (token) {
					document.getElementById('token').value = token;
					document.getElementById('action').value = captcha_action;
						}
					});
			});	
		 $( ".send-order" ).click(function() {
			event.preventDefault(); 
			let captcha_action = 'contactForm';  
			grecaptcha.ready(function() {
				grecaptcha.execute('ВАШ_ПУБЛИЧНЫЙ_КОД', {action: captcha_action})
					.then(function(token) {
						if (token) {
							document.getElementById('token').value = token;
							document.getElementById('action').value = captcha_action;
						}
					});
			});	
            $.ajax({	
                url: 'ajax.php?comand=1&name='+$('input[name=name]').val()+
				'&phone='+$('input[name=phone]').val()+'&action='+
				$('#action').val()+'&token='+$('#token').val(),
                dataType : "json",
                success: function(response) {
					if(response['error']!== undefined){					
						$('.panel-danger').show('slow').removeClass( "d-none" );
						$('.error-report').empty().append(response['error']);
						console.info(response);
					}else{
						$('.panel-danger').addClass("d-none");
						$('.panel-success').show('slow').removeClass( "d-none" );
						$('.success-report').empty().append(response['success']);	
						console.info(response);
					}
                }
            });
        });
    </script>

На сервере проведем проверку данных, для этого обратимся с нашим закрытым ключем к серверу рекапчи и в ответе сможем проверить нынешний пользователь человек или бот

if (isset($_GET['token']) && isset($_GET['action'])) {
    $captcha_token = $_GET['token'];
    $captcha_action = $_GET['action'];
} else {
	echo json_encode(array('error'=>'Капча работает некорректно.'));
}
 
$url = 'https://www.google.com/recaptcha/api/siteverify';
$params = [
    'secret' => 'ВАШ_ЗАКРЫТЫЙ КЛЮЧ',
    'response' => $captcha_token,
    'remoteip' => $_SERVER['REMOTE_ADDR']
];
 
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
$response = curl_exec($ch);
if(!empty($response)) $decoded_response = json_decode($response);
 
if ($decoded_response && $decoded_response->success && $decoded_response->action == $captcha_action && $decoded_response->score > 0) {
    // обрабатываем данные формы, которая защищена капчей
	$phone 	= $_GET['phone'];
	$name 	= $_GET['name'];
	$numOrder = date('ymd').rand(10, 99);
		if(!empty($phone)){
			$to      = 'ВАШ_ЕМАИЛ';
			$subject = 'Сообщение с SHOP WEBME TOP';
			$message = '<h2>Номер заказа:'.$numOrder.'</h2><p>Номер телефона - :'.$phone. '</p><p>'. 'Имя - :'.$name.'</p>';
			$headers = array(
				'From' => 'ОТ КОГО СООБЩЕНИЕ',
				'Reply-To' => 'КОМУ ВОЗВРАЩАТЬ СООБЩЕНИЕ',
				'MIME-Version' => '1.0',
				'Content-type' => 'text/html; charset=utf-8'
			);
			mail($to, $subject, $message, $headers);
			echo json_encode(array('success'=>'<p>Спасибо за обращение!</p><p> 
Ваш заказа будет обработан в скором времени.</p><p> Номер заказа: '.$numOrder.'</p>'));
		}else{
			echo json_encode(array('error'=>'Не заполнено поле телефон.'));
		}
		//echo json_encode($success);
} else {
	echo json_encode(array('error'=>'Капча не сработала, возможно Вы делаете что-то не так!!!'));
    // прописываем действие, если пользователь оказался ботом
}