Пример подключения ReCaptcha на сайт, регистрация в API, вставка кода в форму, проверка правильности введенной капчи.
Итак, сначала нужно добавить сайт в 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 id="recaptcha-1"></div> и <div id="recaptcha-2"></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>Пример:
После отправки формы, на стороне сервера, введённый ответ капчи (будет в $_POST['g-recaptcha-response']) нужно отправить на https://www.google.com/recaptcha/api/siteverify вместе с секретным ключом и получить положительный или отрицательный ответ. Данное действие можно реализовать двумя способами:
Вариант на 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 'Ошибка заполнения капчи.';
}Чтобы проверить правильность заполнения капчи перед отправкой формы, можно применить следующий код:
<script src="https://www.google.com/recaptcha/api.js"></script>
<form method="post" action="#" id="form">
<input type="email">
<div class="g-recaptcha" data-sitekey="КЛЮЧ_САЙТА"></div>
<button type="submit">Отправить</button>
</form>
<script>
$('#form').submit(function(){
var response = grecaptcha.getResponse();
if(response.length == 0) {
alert('Вы не прошли проверку CAPTCHA должным образом');
return false;
}
});
</script>
Или я чего то не понял в этой статье?
Пишите в телеграм с пометкой темы https://t.me/BlackDemar
И как мне тогда использовать мой обработчик формы (у вас в form action ни один php обработчик не указан)?, он у меня используется для передачи заявок с форм в битрикс