К примеру у нас есть простая страница с формой:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Добавляем reCAPTCHA от Google на сайт</title> </head> <body> <form method="post"> <label for="name">Имя:</label> <input name="name" required><br /> <label for="email">E-mail:</label> <input name="email" type="email" required><br /> <input type="submit" value="Отправить" /> </form> </body> </html>
Как работает reCAPTCHA?
Пользователь жмет на кнопку "Я не робот", если анализ Google уверен, что вы человек, то все хорошо, иначе появится вторая проверка, например ввод слова или выбор нескольких картинок одной тематики из массива изображений, пример:
или
Так же на этот вопрос есть отличный ответ в виде видео от Google:
Удобно? Тогда приступим к интеграции на сайт.
Добавляем reCAPTCHA на сайт
Добавляем reCAPTCHA API key
Для начала необходимо добавить reCAPTCHA API key, для этого перейдите по ссылке: https://www.google.com/recaptcha/admin, и заполните поля: метка (1), домены (где будет использоваться reCAPTCHA) (2) и жмем на кнопку "Register" (3).
После чего получим данные для добавления reCAPTCHA на сайт:
Добавляем reCAPTCHA в форму
На страницу добавляем js скрипт из поля 3, скрипт можно добавить перед закрывающемся тегом </head>
или </body>
, далее в форму и добавляем блок с капчей из поля 4 (поля из второго скриншота):
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Добавляем reCAPTCHA от Google на сайт</title> </head> <body> <form method="post"> <label for="name">Имя:</label> <input name="name" required><br /> <label for="email">E-mail:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div> <input type="submit" value="Отправить" /> </form> <script src='https://www.google.com/recaptcha/api.js'></script> </body> </html>
Где data-sitekey
- значение из поля 1 (второй скриншот).
Верификация reCAPTCHA
После того как добавили блок reCAPTCHA в форму нам будет приходить постом 3 значения: name
, email
и g-recaptcha-response
. Перед обработкой полученных данных необходимо валидировать name
и email
, а также отправить значение g-recaptcha-response
Google для проверки.
Пропустим валидацию name
и email
и перейдем к g-recaptcha-response
. Разработчики Google ReCAPTCHA уже сделали всю работу за нас по верификации капчи, поэтому переходим к проекту ReCAPTCHA на Github и скопируем файл recaptchalib.php: https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php.
Затем положим его в удобное место (я положу в корень) и подключаем перед верификацией капчи:
<?php require_once "recaptchalib.php";
Класс ReCaptchaResponse отправит содержимое g-recaptcha-response
и секретный ключ в Google, затем получит ответ и проверит, был ли он успешен:
<?php require_once "recaptchalib.php"; //секретный ключ $secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-"; //ответ $response = null; //проверка секретного ключа $reCaptcha = new ReCaptcha($secret); if (!empty($_POST)) { if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); } if ($response != null && $response->success) { echo "Все хорошо."; } else { echo "Вы точно человек?"; } }
Итог
Теперь соберем все вместе:
<?php require_once "recaptchalib.php"; ?> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Добавляем reCAPTCHA от Google на сайт</title> </head> <body> <?php //секретный ключ $secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-"; //ответ $response = null; //проверка секретного ключа $reCaptcha = new ReCaptcha($secret); if (!empty($_POST)) { //Валидация $_POST['name'] и $_POST['email'] if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); } if ($response != null && $response->success) { echo "Все хорошо."; } else { echo "Вы точно человек?"; } } ?> <form method="post"> <label for="name">Имя:</label> <input name="name" required><br /> <label for="email">E-mail:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div> <input type="submit" value="Отправить" /> </form> <script src='https://www.google.com/recaptcha/api.js'></script> </body> </html>
Внешний вид:
Дополнительно
Тема
Сменить цвет reCAPTCHA можно с помощью атрибута data-theme, который может принимать значение dark и light (по умолчанию):
<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="dark"></div>
<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="light"></div>
Язык
По умолчанию язык в reCAPTCHA определяется по языку браузера, но можно указать язык явно, например, украинский:
<script src='https://www.google.com/recaptcha/api.js?hl=uk'></script>
задать русский язык
<script src='https://www.google.com/recaptcha/api.js?hl=ru'></script>
Дополнительные настройки: https://developers.google.com/recaptcha/docs/display#config
Комментарии
а где обработчик почты? куда его подставить, где указывается емайл, куда будут приходить письма
ОтветитьА какое это имеет отношение к примеру внедрения reCAPTCHA на сайт?
Ну а если все так непонятно, то вместо echo "Все хорошо.":
Добавляем пример отсюда: PHP, пример использования функции mail() или PHP, отправка почты через SMTPОтветить
Отношение прямое - к созданию полноценной рабочей формы :) ща попробуем связать
ОтветитьНу так это не пример создания полноценной формы для формы обратной связи, а пример внедрения reCAPTCHA в форму комментариев, ФОС, регистрации и т.д. и т.п., так что на мой взгляд пример довольно понятный и охватывает суть задачи статьи.
Ответитьне охватывает потому что в обработчике тоже нужн что то прописывать от капчи
ОтветитьКогда добавил reCAPTCHA в свой проект)
ОтветитьАвтор, ты, блин, тролль ) Написал целую статью, а у самого комменты без капчи )
Ответитьтут роботы не ходят
Ответитьпривет 8)
ОтветитьВ нашем случае нет надобности ставить капчу, как только появится количество спама с которым мы не сможем справится, то обязательно поставим.
Ответитьа где валидация полей формы?
ОтветитьВ строке 22
ОтветитьКажется это проверка капчи...Пропустим валидацию name и email и перейдем к g-recaptcha-response.
ОтветитьРебят, подскажите. Сделал всё как по примеру, но он игнорит капчу. Поля формы всё равно отсылаются.
ОтветитьГде код?
ОтветитьВроде все верно, у меня работает. Домены (где будет использоваться reCAPTCHA) правильно прописан, может там проблема. можно еще вывести дамп $response->success, посмотреть что там.
ОтветитьСпасибо добрый человек. Оказывается, что есть разница где находится файл. Мне пришлось ОБЯЗАТЕЛЬНО иметь recaptchalib.php в корне сайта.
ОтветитьНу так путь можно поменять:
ОтветитьДа, уже догадался. Спасибо. Просто не мог даже подумать об этом.
Ответитьпротестите такую капчу meiseder.ru
Ответить(поделюсь кодом)
У на вид работает, но если капчу не проходить а сразу нажать кнопку войти то пропускает.
ОтветитьВ чём проблема?
Код админки PHP:
https://gist.github.com/ARMADAIX/40b7987576ee396402beb46fc9a41273
ОтветитьКак ты решил проблему?
ОтветитьПрекрасно все разжевано. Автору 5+++ .Там где все хорошо,вставляйте свои проверки полей.
Ответитьпример
if (@$_POST['message'] )// отправил или нет
if($_POST['email'] != "") //отправил { if (!preg_match('/^[-0-9\.a-z_]+@([-0-9\.a-z]+\.)+[a-z]{2,6}$/i',$_POST['email'])) // коректный?? die ("<center><h4>Введите коректный e-mail</h4></center>"); //если да то
использую все стандартное из библиотеки и примера и получаю это =(
ОтветитьWarning: file_get_contents(https://www.google.com/recaptcha/api/siteverify?secret=6LfqMVEUAAAAAIw8h9CuDcrXRhGNZlaJXTy2ObAi&remoteip=78.137.58.135&v=php_1.0&response=03AJIzXZ6ImoMhLrKlIAMVJAYiJ42aoH2kw_WiT194T0tlCdLZB4i-AqGOOG05gzM_-i1dzQF0HLjYAutVRQwOt6kxEjGYj2dyAsC51hfGL59Uezl7vQv2xXiw23gj8sJ5f7BE3oWdltAJrIZwFCep-lc_mhjcHKXoxZReAmQ7tyGITgGvacbNYXaGqAg1kxw3K2hVak4OVL8-SmW_OLnAPaNyZXL-7aa6WXxqg5vAXVih4t6FUEdpvZEWHy1VaGwqCWWZ47Xs9RuWNt8NSjnUZLu9s4ETsnLC2yKymv0P1z0yf4mU-6WsIkcYasMAvJnaQZ1yYhD8-I7xzeVuFponR026PNQTyw8bngJ7Ldmfb9JpMM-Tc-Bcn8fhijX1r4wcpV7P1qvht5UWqXqCnsH_0tX7drudEua0pLnrgPWGCVgl1JlTMJ7Z6mnSwULRaaSpaPdwAQY0uzHMZEeG9n-gKSkKRLzLXeH5ujo4ZZ2vCmkgIfzOnHyWWC8RduzT5DPUxC84l4hp95Z6) [function.file-get-contents]: failed to open stream: No such file or directory in /usr/home/viptour/data/www/vanatour.com.ua/recaptchalib.php on line 88
Кажется, вы дважды валидируете один и тот же запросОтветить
откуда вы взяли эти данные? Я просто взял скачал библиотеку из оп поста, и к ней же пример. И все... щас покажу
Ответитьrequire_once "recaptchalib.php";
// Register API keys at https://www.google.com/recaptcha/admin
$siteKey = "6LfqMVEUAAAAAB1GqhcwZ0Q1MMTP7o0yin-LO5pH";
$secret = "6LfqMVEUAAAAAIw8h9CuDcrXRhGNZlaJXTy2ObAi";
// reCAPTCHA supported 40+ languages listed here: https://developers.google.com/recaptcha/docs/language
$lang = "ru";
// The response from reCAPTCHA
$resp = null;
// The error code from reCAPTCHA, if any
$error = null;
$reCaptcha = new ReCaptcha($secret);
// Was there a reCAPTCHA response?
if ($_POST["g-recaptcha-response"]) {
$resp = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
}
echo phpversion();
?>
Из ссылке в ошибке выше
Ответитьопять же ворнинг этот откуда он вылазит то? На элементарной функции. может версия пхп не та?
ОтветитьПростите, а где можно было бы почитать описания этих ошибок ?
Ответитьааааа
ОтветитьА есть руководство как обходить капчу?
ОтветитьНе нужно искать проблему у себя.
ОтветитьКорпорацией Google владеют два психически больных человека, желающих захватить власть во всем мире.
Капчу, на решение которой может уйти час, придумали моральные уроды.
Если человек при регистрации видит эту капчу, он просто закрывает страницу.
Каким бы ни был сайт, альтернативу можно найти всегда.
Даже очень тупые вебмастера начинают замечать просадку в трафике и посылают гугл со своими "сервисами" куда подальше.
Воровство информации пользователей, нерешаемые капчи, увеличение стоимости Google Maps в 16 раз, блокировки аккаунтов AdWords с воровством денег на них при любом чихе - все это отличные поводы для предпринимателей и вебмастеров сделать так, чтобы Google в Украине нестало.
Всем привет, подскажите, как сделать капчу обязательной?
Ответитьа где обработчик почты? куда его подставить, где указывается емайл, куда будут приходить письма
ОтветитьОгромнейшее спасибо! Несколько раз пытался (эти черти из Google не могла API написать), но только с вашей инструкцией получилось!
ОтветитьОтдельное спасибо за "recaptchalib.php"!
PHP клас для роботи з reCAPTCHA V3:
ОтветитьОчень помогла статья! Спасибо, Получилось :-)
ОтветитьСпасибо! Все доходчиво и понятно. Все получилось и работает!
ОтветитьОчень помогло. Спасибо за пошаговое пояснение!
ОтветитьКак рекапчу поставить не в форму а отображение сайта. Пока посетитель не решит её - ничего не увидит
Ответить