Как подключить Google ReCAPTCHA на сайт

Как подключить Google ReCAPTCHA на сайт

Пример подключения Google reCaptcha на сайт, регистрация в API, вставка кода в форму, проверка правильности введенной капчи.

Регистрация сайта в сервисе reCaptcha

Итак, сначала нужно добавить сайт в ReCaptcha API перейдя по ссылке https://www.google.com/recaptcha/admin/create (нужна авторизация), в форме нужно указать название и домен сайта где будет использоваться капча.

После отправки формы появится страница с данными для интеграции.

Вывод на сайте

Чтобы вывести капчу в форме, нужно подключить api.js и добавить <div> c классом g-recaptcha и атрибутом data-sitekey с открытым ключом.

<script src="https://www.google.com/recaptcha/api.js"></script>
 
<form method="post" action="#">
	<input type="email">
	<div class="g-recaptcha" data-sitekey="КЛЮЧ_САЙТА"></div>
	<button type="submit">Отправить</button>
</form>

Несколько reCaptcha на странице

В таком случае, в формах вставляются несколько DIVов с уникальным идентификатором, а далее к ним подключается reCaptcha JS-скриптом.

Форма #1
<form method="post" action="#">
	<input type="email">
	<div id="recaptcha_1"></div>
	<button type="submit">Отправить</button>
</form>
 
Форма #2
<form method="post" action="#">
	<input type="email">
	<div id="recaptcha_2"></div>
	<button type="submit">Отправить</button>
</form>
 
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">
<script>
var onloadCallback = function(){
	var key = 'КЛЮЧ_САЙТА';
	grecaptcha.render('recaptcha_1', {
		'sitekey': key
	});
	grecaptcha.render('recaptcha_2', {
		'sitekey': key
	});
};
</script>

Проверка заполнения капчи

На стороне сервера проверку введенной капчи можно реализовать двумя способами:

Вариант на curl (через POST)

$error = true;
$secret = 'СЕКРЕТНЫЙ_КЛЮЧ';
 
if (!empty($_POST['g-recaptcha-response'])) {
	$curl = curl_init('https://www.google.com/recaptcha/api/siteverify');
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, 'secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']);
	$out = curl_exec($curl);
	curl_close($curl);
	
	$out = json_decode($out);
	if ($out->success == true) {
		$error = false;
	} 
}    
 
if ($error) {
	echo 'Ошибка заполнения капчи.';
}

Вариант на file_get_contents

$error = true;
$secret = 'СЕКРЕТНЫЙ_КЛЮЧ';
 
if (!empty($_POST['g-recaptcha-response'])) {
	$out = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']);
	$out = json_decode($out);
	if ($out->success == true) {
		$error = false;
	} 
}
 
if ($error) {
	echo 'Ошибка заполнения капчи.';
}