Servlets - google recaptcha v3 пример демо

Получение ключей reCAPTCHA

Первое что нужно сделать, это перейти на сайт:https://www.google.com/recaptcha

Если у вас нет аккаунта в Google, то следует его завести, после этого авторизовавшись в системе на той странице появиться форма такого вида (вид формы со временем может меняться, поэтому не придавайте сильно этому значение):

Заполнить форму максимально просто:
— Указываете наименование вашего сайта;
— Выбираете тип капчи (на данный момент времени доступны v2 и v3);
— Указываете домен сайта;
— Отмечаете галочку принять условия пользования;

После отправки формы вы получаете два ключа:

Первый – публичный, используется для подключения виджета на HTML странице.
Второй – секретный, используется для связи скрипта на вашем сервере и сервисом google.

Исправление 6 — Сбросить браузер

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

Для Chrome

1. Запустите Chrome. Введите в адресной строке chrome: // settings / reset.

2. Нажмите «Восстановить настройки до исходных значений по умолчанию» в разделе «Сброс и очистка».

3. Теперь нажмите кнопку «Сбросить настройки», чтобы подтвердить процесс сброса Chrome.

4. После завершения сброса ваш браузер вернется в состояние по умолчанию.

5. Перезапустите Chrome и посмотрите, сохраняется ли ошибка reCAPTCHA.

Для Firefox

1. Откройте Firefox.

2. Щелкните меню «Настройки» (3 горизонтальные линии) в правом верхнем углу.

3. Щелкните «Справка».

4. Выберите параметр «Дополнительная информация по устранению неполадок».

5. На странице информации об устранении неполадок нажмите кнопку «Обновить Firefox…» справа.

6. В окне подтверждения еще раз нажмите «Обновить Firefox».

7. После завершения процесса обновления перезапустите браузер и проверьте, исправлена ли ошибка.

Спасибо за чтение.

Мы надеемся, что вы смогли решить проблему, из-за которой reCAPTCHA не работает в вашем браузере. Прокомментируйте и сообщите нам об исправлении, которое вам помогло.

Подключение reCAPTCHA в HTML-странице

Первым делом давайте подключим виджет непосредственно на странице, которая показывается пользователю.

Для этого на странице подключаем скрипт виджета:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

После этого, на самой форме следует разместить специальный блок div:

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

Где в качестве значения your_site_key – вы указываете публичный ключ, выданный вашему сайту ранее.

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

Проверка формы на JavaScript происходит следующим образом:

var err = 0; // счётчик ошибок на форме

//...
// проверка других полей формы
//...


// проверка капчи на стороне клиента
var captcha = grecaptcha.getResponse(); // ответ Google reCAPTCHA
if (!captcha.length) {

	err++;
	$('.md-resp-msg').text('* Вы не прошли проверку "Я не робот"');

} else {

	// всё ok, затераем текст сообщения об ошибке
	$('.md-resp-msg').text('');
}


// Если ошибок проверки нет,
// если длина капчи не равна пустой строке,
// то отправляем форму на сервер
if (err == 0 && (captcha.length)) {

	// добавляем поле в AJAX-запрос
	$.ajax({
		type: "POST",
		url: '/script.php',
		data: {
			//...
			// отправляем вместе с остальными полями на форме
			'g-recaptcha-response': captcha
		},
		dataType: "json",
		success: function(data){
			//...
		}
	});

}

// для сброса виджета reCaptcha можно использовать:
grecaptcha.reset();

Таким образом, значение ответа то сервиса Google отправляется на наш сервер, вместе с другими полями, посредством AJAX-запроса. Теперь на стороне сервера остаётся выполнить проверку капчи.
Первым делом, следует подключить саму PHP-библиотеку reCAPCHA:

// ваш секретный ключ
$secret = 'your_secret_api_key';

// клиентская библиотека reCAPTCHA PHP
require_once (dirname(__FILE__).'/recaptcha/autoload.php');

После того как библиотека была подключена, далее в коде можно выполнять проверку переменной g-recaptcha-response POST запроса.

$err = 0; // счётчик ошибок

//...тут проверка остальных полей


// проверяем параметр g-recaptcha-response
if (isset($_POST) && !empty($_POST)) {

	// создаем экземпляр класса ReCaptcha, в качестве параметра передаем секретный ключ
	$recaptcha = new \ReCaptcha\ReCaptcha($secret);
  
	// получаем результат проверки кода recaptcha
	$resp = $recaptcha->verify($_POST, $_SERVER);
  
	// если проверка прошла успешно
	if ($resp->isSuccess()){

		// какие-либо действия в случае успеха
		//...

	} else {
		
		$err++;
		$arResult[] = array(
					'text' =>'Код капчи не прошёл проверку на сервере: '.$resp->getErrorCodes(),
					'type' => false
				);

	}

} else {

	$err++;
	$arResult[] = array(
				'text' =>'Не удалось проверить параметр капчи.',
				'type' => false
			);

}

// если ошибок нет
if ($err == 0){

	// выполняем запись, отравку и т.д.
	
}

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