Установка Google reCaptcha на сайт. Как установить невидимую капчу и капчу «я не робот» на PHP

Инструкция по добавлению Google reCaptcha на сайт, с помощью PHP и jQuery. В новой записи мы с вами рассмотрим как добавлять капчу с заданиями (reCaptcha v2) и невидимую капчу (reCaptcha v3).

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

https://www.google.com/recaptcha/admin/

В качестве основных настроек вам нужно сделать следующее:

1. Прописать название (название не влияет на работу капчи)
2. Выбрать тип капчи
3. Указать домен, для которого капча используется
4. Принять условия использования капчи

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

Все запросы из формы мы будем отправлять через Ajax, и для работы скриптов я создал 2 файла

index.php — в нём храниться форма, и jQuery обработчик

form.php — файл, куда мы будем отправлять Ajax запросы. Здесь я просто буду возвращать полученные данные

Добавление капчи «Я не робот» на сайт

Код для формы с капчей

Форма будет иметь одно поле (телефон) и 2 div элемента

<form id="feedBackForm" action="">
    <input required name="phone" placeholder="Ваш телефон" type="tel">
    <div class="g-recaptcha" data-sitekey="КЛЮЧ_КАПЧИ"></div>
    <div class="text-danger" id="recaptchaError"></div>

    <button>Отправить</button>
</form> 

JavaScript код для капчи

$(document).ready(function() {

    $("#feedBackForm").on("submit", function(event) {
	event.preventDefault()
	var captcha = grecaptcha.getResponse();

	if (!captcha.length) {
	    $('#recaptchaError').text('* Вы не прошли проверку капчей');
	} else {
	    $('#recaptchaError').text('');

	    let dataForm = $(this).serialize()

	    $.ajax({
		url: '/form.php',
		method: 'post',
		dataType: 'html',
		data: dataForm,
		success: function(data){
			console.log(data);
			grecaptcha.reset();
		}
	    });

	}
		
   })

})

Добавление невидимой капчи

Форма для невидимой капчи от Google

<form id="feedBackForm" action="">
    <input required name="phone" placeholder="Ваш телефон" type="tel">
    <button class="g-recaptcha" 
        data-sitekey="6Ldfi74fAAAAAHTp7rVIjXiixZhOe6Zzi_X3Pkc7" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

    <div class="text-danger" id="recaptchaError"></div>
</form>

JavaScript для невидимой капчи

function onSubmit(token) {
    console.log(token)
    document.getElementById("demo-form").submit();
}