Шаг 7. Установите reCAPTCHA на сайт. Этот шаг немного отличается для v2 и v3, поэтому разделим его.
Важно. Добавление reCAPTCHA на сайт требует внесения изменений в HTML-код. Приведённые ниже фрагменты кода форм и алгоритмов проверки прохождения капчи являются примерами. Реальный код на вашем сайте может отличаться, так как структуры форм могут быть разными и особенности проверки зависят от типа действий. Если у вас недостаточно знаний и навыков в программировании, рекомендуем доверить настройку reCAPTCHA специалисту.
Руководство для версии reCAPTCHA v2
1. Интегрируйте капчу на стороне клиента.
Откройте HTML-код сайта. Перед закрывающим тегом </head> вставьте код, который подключает Google reCAPTCHA:
| <script src=»https://www.google.com/recaptcha/api.js»></script> |
Пример:
| <head>
<script src=»https://www.google.com/recaptcha/api.js»></script>
</head> |
Важно: указанный код подключения необходимо разместить в <head> каждой страницы вашего сайта, где будет отображаться reCAPTCHA.
2. Настройте форму.
Найдите блок с формой, для которой планируете настроить проверку. Это обычно блок с тегом <form>. Внутри формы, непосредственно перед кодом кнопки отправки данных <button>, добавьте следующий фрагмент:
| <div class=»g-recaptcha» data-sitekey=»YOUR_SITE_KEY»></div> |
Полная форма будет выглядеть примерно так:
| <form action=»your_form_handler.php» method=»post»>
<label for=»name»>Имя:</label><br>
<input type=»text» id=»name» name=»name»><br><br>
<label for=»email»>Email:</label><br>
<input type=»email» id=»email» name=»email»><br><br>
<div class=»g-recaptcha» data-sitekey=»YOUR_SITE_KEY»></div><br>
<button type=»submit»>Отправить</button>
</form> |
Вместо YOUR_SITE_KEY вставьте ваш ключ сайта, который вы получили на сайте Google reCAPTCHA.
3. Настройте интеграцию с сервером.
Перейдите на сервер и откройте PHP-файл, указанный в атрибуте action тега <form>. Например, в этом примере нужный нам обработчик формы — это your_form_handler.php.
Добавьте код для проверки капчи с секретным ключом в начале файла. Обратите внимание, что структура и содержание кода могут отличаться в зависимости от ваших требований.
Приведу пример PHP-файла с добавленным кодом проверки и секретным ключом. В данном примере обработчик формы будет проверять, прошёл ли пользователь капчу. Если капча не пройдена, на экране отобразится уведомление об ошибке — «Ошибка заполнения капчи!». Пример:
| <?php
$error = true;
$secret = ‘YOUR_SECRET_KEY‘;
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 ‘Ошибка заполнения капчи!’;
}
?> |
Замените YOUR_SECRET_KEY на ранее полученный секретный ключ. Сохраните изменения в файле PHP.
4. Проверьте работоспособность капчи.
Перейдите на страницу с формой и попробуйте отправить её. Убедитесь, что при прохождении капчи форма отправляется успешно, а при её непрохождении отображается сообщение об ошибке.
Руководство для версии reCAPTCHA v3
1. Загрузите API JavaScript.
Чтобы использовать reCAPTCHA v3 на странице, вам нужно подключить JavaScript-библиотеку Google reCAPTCHA. Для этого вставьте следующий код в <head> или перед закрывающим тегом </body> на вашем сайте:
|
<script src=»https://www.google.com/recaptcha/api.js»></script>
|
Повторите процесс для всех страниц сайта, на которых планируете использовать reCAPTCHA v3.
2. Добавьте функцию обратного вызова для обработки токена.
Далее вам нужно создать функцию, которая будет обрабатывать полученный токен reCAPTCHA и выполнять необходимые действия (например, отправить форму). Эта функция будет вызываться после того, как reCAPTCHA выполнит проверку. Добавьте следующий код в ваш HTML-файл:
| <script>
function onSubmit(token) {
document.getElementById(«demo-form»).submit();
}
</script> |
В данном случае функция onSubmit получает токен от reCAPTCHA и отправляет форму с id demo-form. Вы можете адаптировать эту функцию в соответствии с вашими потребностями.
3. Добавьте атрибуты к вашей кнопке HTML.
Чтобы привязать reCAPTCHA к кнопке, используйте специальный HTML-атрибут class=»g-recaptcha», который активирует reCAPTCHA. Добавьте атрибуты для ключа сайта, действия и функции обратного вызова. Код кнопки будет выглядеть так:
| <button class=»g-recaptcha»
data-sitekey=»YOUR_SITE_KEY»
data-callback=»onSubmit»
data-action=»submit»>Submit</button> |
А вот так может выглядеть полный код формы с кнопкой, к которой привязана reCAPTCHA:
| <body>
<form id=»demo-form» action=»your_form_handler.php» method=»post»>
<label for=»name»>Имя:</label>
<input type=»text» id=»name» name=»name» required><br><br>
<label for=»email»>Email:</label>
<input type=»email» id=»email» name=»email» required><br><br>
<input type=»hidden» name=»recaptchaResponse» id=»recaptchaResponse»>
<button class=»g-recaptcha»
data-sitekey=»YOUR_SITE_KEY»
data-callback=»onSubmit»
data-action=»submit»>Отправить</button>
</form>
</body> |
4. Настройте проверку на сервере.
Перейдите на сервер и откройте PHP-файл, указанный в атрибуте action тега <form>. В самое начало файла добавьте код для проверки капчи. Пример PHP-обработчика:
| <?php
function isValid(){
if(
$_POST[‘fname’] != » &&
$_POST[‘lname’] != » &&
$_POST[’email’] != » &&
$_POST[‘message’] != »
) {
return true;
}
return false;
}
$success_output = »;
$error_output = »;
if (isValid()) {
$recaptcha_url = ‘https://www.google.com/recaptcha/api/siteverify’;
$recaptcha_secret = ‘YOUR_SECRET_KEY‘;
$recaptcha_response = $_POST[‘recaptchaResponse’];
$recaptcha = file_get_contents($recaptcha_url.’?secret=’.$recaptcha_secret.’&response=’.$recaptcha_response);
$recaptcha = json_decode($recaptcha);
if($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == «contact») {
$success_output = ‘Ваше сообщение было отправлено успешно.’;
} else {
$error_output = ‘Что-то пошло не так. Пожалуйста, попробуйте снова позже’;
}
} else {
$error_output = ‘Пожалуйста, заполните все обязательные поля.’;
}
$output = [
‘error’ => $error_output,
‘success’ => $success_output
];
echo json_encode($output);
?> |
Замените YOUR_SECRET_KEY на ваш секретный ключ.
Учтите, что в reCAPTCHA v3 проверяется не только success, но и score. Значение score находится в диапазоне от 0.0 (бот) до 1.0 (человек). Рекомендуется использовать порог 0.5. Вы можете настроить этот порог в зависимости от ваших требований.
5. Проверьте работу reCAPTCHA.
Перейдите на страницу с формой и выполните тестовую отправку. Если токен reCAPTCHA подтверждается, то форма успешно отправляется. Если же проверка не пройдена или уровень уверенности (score) ниже установленного, то вы получаете сообщение об ошибке.
