Google captcha recaptcha

Всем доброго дня. Как только появилось свободное время я все таки решил написать статью посвященную установке Google reCaptcha.

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

Для начала работы с нашей гуглокапчей нам необходимо получить 2 специальных ключа.

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

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

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

После авторизации вы увидите панель reCAPTCHA и форму регистрации вашего сайта.

Google captcha recaptcha

 

После заполнения и отправки формы регистрации сайта вы попадете на страницу с ключами и всей необходимой нам информацией.

capcha

 

Установка reCapcha на форму

Для примера я создал простую форму авторизации. Она будет отправлять данные POST запросом на сервер.

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

В конечном итоге у вас должна получится следующая структура формы:

<script src='https://www.google.com/recaptcha/api.js'></script> <!--Скрипт располагать в блоке head--> <form action="/form.php" method="post">  <input type="text" name="login">  <input type="password" name="password">  <div class="g-recaptcha" data-sitekey="Тут указываете ваш первый ключ"></div>  <!--блок кнопки reCapcha-->  <button>Отправить</button> </form>

Форма готова. Осталось только вставить свой ключ в атрибут data-sitekey и капча заработает!

Проверка reCapcha на сервере

Следующим этапом будет написание проверки результата отправки формы на сервере.

Первым делом необходимо проверить были ли вообще переданы в POST массив данные от капчи. Если таких данных не поступало то мы просто пропускаем все проверки и просим пройти валидацию.

<?php if (isset($_POST['g-recaptcha-response'])){  //проверяем дальше }else{  exit('Вы не прошли валидацию reCaptcha'); } ?>

Дальше переходим к основной части проверки. Приведу сразу весь код и поясню что за что отвечает.

<?php if (isset($_POST['g-recaptcha-response'])) {  $url_to_google_api = "https://www.google.com/recaptcha/api/siteverify";  $secret_key = '6LcdBBYUAAAAAJcHFDLRWfLYwBNomKtKGjHu21tg';  $query = $url_to_google_api . '?secret=' . $secret_key . '&response=' . $_POST['g-recaptcha-response'] . '&remoteip=' . $_SERVER['REMOTE_ADDR'];  $data = json_decode(file_get_contents($query));  if ($data->success) {  // Продолжаем работать с данными для авторизации из POST массива  } else {  exit('Извините но похоже вы робот (0_0)/');  } } else {  exit('Вы не прошли валидацию reCaptcha'); } ?>

Этого базового функционала достаточно для полноценной работы с google reCaptcha.

Интеграция с WordPress

В случае с WordPress для этой же задачи прекрасно подойдет плагин — Google Captcha (reCAPTCHA) by BestWebSoft. В него встроен обширный функционал для интеграции капчи на разные разделы WordPress сайта.

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

Google Captcha

Далее можете просто указать в каких местах сайта вы хотите видеть желаемую гуглокапчу.

Это все что я хотел поведать об установке reCaptcha.
В связи с неплохим интересом к данной статье я решил выпустить с скором времени ещё одну статью посвященную уже работе с последней версией гугл капчи. Подписывайтесь на обновления чтобы не пропустить эту статью.
Всего хорошего!

dmkweb.ru Права на контент защищены.

dmkweb.ru

Описание проблемы

  В начале июля несколько клиентов, независимо друг от друга, пожаловалась нам о том что часть токенов для прохождения ReCaptcha, которые они получают от нас, не принимается сайтами, где проходится капча. Мы провели ряд экспериментов и выявили, что при верификации ответа на ReCaptcha, Google.com может вернуть вот такую ошибку:

{"success":false,"error-codes":["incorrect-captcha-sol"]}

 

  Этой проблеме подвержен не только наш сервис решения капч RuCaptcha.com, но и обычные люди, которые проходят рекапчу на каком-либо сайте, но сайт не принимает ответ на капчу от них.

В API ReCaptcha нет описания данной ошибки. Доподлинно нам не известны её причины, но некоторые зависимости мы смогли найти.

 

От чего зависит получение incorrect-captcha-sol

Появление incorrect-captcha-sol, по нашим наблюдениям, происходит по двум факторам:

1) Очень плохой IP
У Google, видимо, есть рейтинг для каждого IP-адреса. Если Вы решаете ReCaptcha без ошибок и не более 50 капч в сутки, то этот IP будет считаться хорошим.
Если Вы делаете что либо из этого списка:

  • совершаете много ошибок при решении

  • открываете капчу но не прорешиваете её до конца

  • решаете больше двух капч в минуту

То Ваш IP либо банится вообще, либо начинает получать такие токены, которые при дальнейшей проверке получают incorrect-captcha-sol

2) Плохие cookie
Помимо рейтинга IP, у Google есть рейтинг пользователей. Каждому, кто заходил на google.com или на страницу с установленной ReCaptcha, присваиваются свои cookie. Google анализирует Ваши действия в сети и оценивает насколько Вы похожи на живого человека или на робота. Если пользователь с одним набором cookie целый день решает капчи, даже если это делается с разных IP, то это, скорее всего, робот и такой пользователь будет решать капчи до зелёной галочки, но при дальнейшей проверке его ответа Google будет возвращать
{"success":false,"error-codes":["incorrect-captcha-sol"]}
Самое обидной в этом то, что при авторизации в гугловом почтовике gmail.com, Google проассоциирует Вас с Вашими прошлыми действиями и, если хоть один раз в прошлом посчитал Вас роботом, то теперь у Вас в 3 из 4 случаев не будет приниматься решение ReCaptcha.
 

Как RuCaptcha борется с incorrect-captcha-sol

 Для снижения количества “плохих” токенов  в ответах на капчи заказчиков, мы регулярно чистим куки в приложении работников, а также следим за качеством IP-адресов работников. Про это расскажем чуть подробнее.

 Да, некоторая часть наших работников имеет “очень плохие” IP-адреса, решая с которых ReCaptcha они получают токены, которые при последующей верификации получают incorrect-captcha-sol. Для борьбы с этим, мы раз в час выдаём тестовую ReCaptcha для каждого уникального IP-адреса и верифицируем ответ на неё в google.com. Если мы получили  incorrect-captcha-sol, то мы перестаём выдавать капчи для решения с этого IP и данный пользователь может решать капчи только через прокси (прокси, в свою очередь, также регулярно проверяются).

 Таким образом мы снижаем процент “плохих” ответов до 1-3%. К сожалению, прошли те времена, когда мы с гордостью говорили, что все 100% ответов на ReCaptcha от нашего сервиса верные.

 

Возвраты за плохие решения

С июля мы включили приём reportbad на ReCaptcha. Поэтому для сокращения издержек на капчу, Вы можете настроить автоматическое уведомление нас о том, что полученный от нас токен не прошёл верификацию, как это сделать описано у нас в APIReportbad.

Каждый час мы собираем статистику по жалобам на работников и возвращаем средства за те капчи, которые были разгаданы "плохим" работником.

 

Похоже, гугл считает мой IPкуку плохим. Я нигде не могу пройти капчу, что мне делать?

Да, множество простых людей столкнулись с проблемой, что они не могут пройти авторизациюрегистрацию на сайтах, где установлена ReCaptcha. Что с этим делать мы расскажем в следующей новости. Следите за обновлениями на нашем блоге!

rucaptcha.com

Здравствуйте! Уважаемые читатели блога Iprodvinem.ru. Не так давно у меня на сайте появилась проблема: капча, которая раньше довольно долго и исправно работала, перестала это делать. В последнее время число спамных комментариев доходило до 70 в день, согласитесь  это мягко говоря перебор. Было понятно что старый плагин не работает и нужно искать новое решение.

Комментарии по своей сути делятся на два вида: автоматические и ручные. Ручные как понятно из самого названия  оставляются живыми людьми, как правило в не большом количестве. Но вот автоматические комментарии которые оставляются программами роботами, в колоссальных размерах, а особенно если это блог с большим трафиком.

Почему я выбрал именно reCAPTCHA?

Поискав на просторах рунета решение, мой взгляд пал на reCAPTCHA от гугла. Раньше я уже думал поставить на блог эту капу, но дело в том, что раньше сама капча была слишком сложной, и тогда я от нее отказался. В новой же версии капчи, гугл учел все недоработки прошлой версии и создал капчу, которая  по простоте и удобству на порядок опередила всех своих конкурентов.

Вот сами взгляните как выглядит реКапча от Гугла будет выглядеть для 99.9% посетителей вашего сайта:

реКапча-от-Гугла

А вот так вот она будет выглядеть в случае форс-мажора (если алгоритм после проведения десятка тестов на человечность все же за сомневается):

реКапча-от-Гугла-2

Регистрация сайта в reCAPTCHA и установка ее на свой блог

Для начала нужно зайти на официальную страницу reCAPTCHA (https://www.google.com/recaptcha/admin#list) и добавить там свой сайт, чтобы взамен получить два ключа которые в дальнейшем будут вам необходимы для того чтобы капча работала.

Регистрация представляет из себя указание названия капчи в системе и доменное имя вашего сайта, где эту самую капчу вы планируете использовать. Заполняете все поля и нажимаете “Регистрация”.

реКапча-от-Гугла-3

После этого вы попадете в административную панель сервиса reCAPTCHA для вашего сайта. Если вы хотите вы можете добавить ее в закладки вашего браузера, чтобы в дальнейшем не искать. Со временим в процессе работы реКапча начнет вам показывать статистику по работе, но а пока из этой панели мы можем взять те самые ключи, без которых  «Я не робот»  не будет работать.

реКапча-от-Гугла-4

Чуть ниже вы увидите инструкцию, как именно проводить интеграцию. Если честно мне это было не сильно понятно, поэтому было принято решение решить данный вопрос с помощью плагина для интеграции reCAPTCHA в WordPress. Поискав по просторам интернета был найден простой и функциональный плагин – No CAPTCHA reCAPTCHA (https://wordpress.org/plugins/no-captcha-recaptcha/).

iprodvinem.ru

Что такое капча

Капча (англ. captcha) — аббревиатура от «Completely Automatic Public Turing Test to Tell Computers and Humans Apart» (полностью автоматический тест Тьюринга для отличния компьютеров от людей). По сути, это защита от заполнения и отправки любых форм ботами и спамерами в автоматическом режиме, будь то запрос в поисковой системе или регистрация в каком-либо сервисе, отправка комментария под статьёй или заполнение анкеты на сайте. Как правило, представляет собой картинку с со случайным текстом, цифрами, буквами, значение которой нужно записать в специальную форму.

Эффект рассчитан на то, что боты картинку не распознают, а человек — сможет. Соответственно, спамеры в автоматическом режиме и боты проверку не пройдут, и спам тоже.

Виды капчи, какая она бывает

Как было сказано выше, как правило, капча — это картинка с цифрами и буквами. Однако, это не единственная её форма, ведь всё зависит от вашей фантазии.
Самая простая капча представляет собой чекбокс, куда надо поставить галочку в подтверждение о том, что вы — не робот.

Бывают такие, что приходится выбирать картинки по какому-то признаку. Например, подобная схема реализована на сайте МТС в разделе отправки бесплатных сообщений SMS.
Собственно, видов превеликое множество. Как же выбрать то, что нужно? Лично я рекомендую пользоваться самописными вариантами, ибо тут всё будет зависеть от фантазии вашей или ваших программистов. Если капча получится оригинальной, то такую вещь обойти спамерам будет намного сложнее. Но, так как это довольно накладно либо по времени, либо по деньгам, советую воспользоваться сервисом Google reCAPTCHA

Google ReCaptcha — как установить и настроить

Google reCAPTCHA — это сервис, который предоставляет бесплатную капчу для защиты различных форм ввода данных на сайте от спамеров и ботов.

Google Recaptcha

На изображении вы видите промо Google reCAPTCHA Invisible — нового вида рекапчи (невидимая), который только проходит бета-тестирование. Соответственно, пока что пользоваться им я не рекомендую, лучше отдать предпочтение классической проверенной рекапче.

  1. Нужно авторизоваться или завести новый аккаунт. Если у Вас уже есть аккаунт от почты Gmail, можно авторизоваться с его помощью.

  2. После авторизации регистрируем сайт, получаем ключи доступа.

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

      Если их прописать неверно, увидите ошибку Error: Invalid domain key или Ошибка: неверный домен ключа
      Ошибка: неверный домен ключа

    • Владельцы — введите туда свой email от аккаунта Google (Gmail почту). На эти адреса можно настроить уведомления о работе reCAPTCHA
    • Расширенные настройки — здесь можно настроить уровень параноидальности капчи, а также имя домена, на котором она располагается
      Расширенные настройки Google Recaptcha
  3. Далее, добавление reCAPTCHA на сайт. У вас будет в наличии 2 ключа, публичный и секретный

    Они понадобятся в дальнейшем:

    • Публичный ключ будет использоваться в HTML формы отправки сообщений, или там, где мы хотим использовать капчу
    • Секретный ключ нужно держать в тайне, он используется для связи сайта с Google Recaptcha
  4. Нужно вывести следующий код в теле страницы, желательно перед закрывающим тегом </head>:
    <script src='https://www.google.com/recaptcha/api.js'></script>
  5. В том месте, где нужно вывести капчу, вставляем:

    <div class="g-recaptcha" data-sitekey="6LcPh-ASAAAAAA_6GlKkDitO2LPvPEza0lRm2GRE"></div>

    где значение атрибута data-sitekey должно совпадать с публичным ключом, в нашем случае, это 6LcPh-ASAAAAAA_6GlKkDitO2LPvPEza0lRm2GRE

  6. Теперь надо оформить обработку отправки данных на сервер Гугла и верификации ответа капчи. Звучит сложно, на деле всё проще. Нам понадобится небольшая PHP библиотека с GitHub

    • Если Вы умеете пользоваться Composer, просто вбиваете в консоль или командную строку следующую команду, которая скачает всё, что нужно:

      composer require google/recaptcha "~1.1"
    • Можно просто скачать библиотеку архивом zip, распаковать архив, взять оттуда содержимое каталога /src/ и вручную разместить его в нужное место в Вашем проекте, например, в каталоге /recaptcha/.

    Я приведу пример с последним вариантом.

  7. Допустим, у нас есть форма

    <!DOCTYPE html>  <html>  	<head>  		<meta charset="utf-8">  		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">  		<title>Google reCAPTCHA</title>  		<style>  			form {width: 100%; max-width: 500px; margin: 1em;}  		</style>  		<script src='https://www.google.com/recaptcha/api.js'></script>  	</head>  	<body>  		<div class="container">  			<div class="row">  				<form action="" method="POST">  					<?php if ( $success ) { ?>  						<div class="alert alert-success" role="alert">  							<?= $success ?>  						</div>  					<?php } ?>  					<?php if ( $fail ) { ?>  						<div class="alert alert-danger" role="alert">  							<?= $fail ?>  						</div>  					<?php } ?>					  					<div class="form-group row">  						<label for="exampleInputEmail1" class="col-sm-2 col-xs-12 col-form-label">Email</label>  						<div class="col-sm-10 col-xs-12">  							<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email">  						</div>  					</div>  					<div class="form-group row">  						<label for="exampleInputPassword1" class="col-sm-2 col-xs-12 col-form-label">Пароль</label>  						<div class="col-sm-10 col-xs-12">  							<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Введите пароль">  						</div>  					</div>  					<div class="form-group row">  						<label class="col-sm-2 col-xs-12 col-form-label">Капча</label>  						<div class="col-sm-10 col-xs-12">  							<div class="g-recaptcha" data-sitekey="6LcPh-ASAAAAAA_6GlKkDitO2LPvPEza0lRm2GRE"></div>  						</div>  					</div>  					<div class="form-group row">  						<label class="col-2 col-form-label"></label>  						<div class="col-sm-10 col-xs-12">  							<button type="submit" class="btn btn-primary">Отправить</button>  						</div>  					</div>  				</form>  			</div>  		</div>  	</body>  </html>  

    В ней мы разместили нашу рекапчу над кнопкой отправки формы. Теперь нужно подключить обработчик. Над этой формой разместим следующий код:

    <?php  /**   * Recaptcha   * https://sheensay.ru/?p=205   * **************************** */  require_once 'recaptcha/autoload.php';    $secret = '6LcPh-ASAAAAAHZTpPumSP7ZLCET3saE4WnDfOth'; // Вставляем сюда секретный ключ  $remoteIp = $_SERVER['REMOTE_ADDR'];  $gRecaptchaResponse = $_POST['g-recaptcha-response'];  $success = $fail = '';    if ( !empty( $_POST ) ) {  	$recaptcha = new ReCaptchaReCaptcha( $secret );  	$resp = $recaptcha -> verify( $gRecaptchaResponse, $remoteIp );  	if ( $resp -> isSuccess() ) {  		// Проверка успешно пройдена  		$success = 'Форма успешно отправлена, спасибо!';  	} else {  		// Ошибка  		$fail = 'Ошибка отправки формы: ';  		$errors = $resp -> getErrorCodes();  		foreach ( $errors as $error ) {  			$fail .= $error . '; ';  		}		  	}  }  ?>  

    Здесь мы подключили PHP библиотеку для обработки рекапчи, а также верифицировали капчу на сервере Google.

    Я подготовил специальную страницу для проверки рекапчи: http://recaptcha.sheensay.ru — код полностью копирует источник выше.
    В случае, если форма будет успешно отправлена, вы увидите соответствующее сообщение:

    Если же, капча не пройдёт проверку, вы увидите сообщение об ошибке:

Всё, теперь каждая форма комментариев защищена капчей.

Иерархия файлов в подобном проекте:
Иерархия файлов и каталогов
index.php в корне — тут располагается основной код, рядом располагается каталог recaptcha — в нём все файлы из PHP-библиотеки

Приведу полный код страницы http://recaptcha.sheensay.ru. Вы можете поменять логику вывода ошибок на свою:

<?php  /**   * Recaptcha   * https://sheensay.ru/?p=205   * **************************** */  require_once 'recaptcha/autoload.php';    $secret = '6LcPh-ASAAAAAHZTpPumSP7ZLCET3saE4WnDfOth'; // Вставляем сюда секретный ключ  $remoteIp = $_SERVER['REMOTE_ADDR'];  $gRecaptchaResponse = $_POST['g-recaptcha-response'];  $success = $fail = '';    if ( !empty( $_POST ) ) {  	$recaptcha = new ReCaptchaReCaptcha( $secret );  	$resp = $recaptcha -> verify( $gRecaptchaResponse, $remoteIp );  	if ( $resp -> isSuccess() ) {  		// Проверка успешно пройдена  		$success = 'Форма успешно отправлена, спасибо!';  	} else {  		// Ошибка  		$fail = 'Ошибка отправки формы: ';  		$errors = $resp -> getErrorCodes();  		foreach ( $errors as $error ) {  			$fail .= $error . '; ';  		}		  	}  }  ?>  <!DOCTYPE html>  <html>  	<head>  		<meta charset="utf-8">  		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">  		<title>Google reCAPTCHA</title>  		<style>  			form {width: 100%; max-width: 500px; margin: 1em;}  		</style>  		<script src='https://www.google.com/recaptcha/api.js'></script>  	</head>  	<body>  		<div class="container">  			<div class="row">  				<form action="" method="POST">  					<?php if ( $success ) { ?>  						<div class="alert alert-success" role="alert">  							<?= $success ?>  						</div>  					<?php } ?>  					<?php if ( $fail ) { ?>  						<div class="alert alert-danger" role="alert">  							<?= $fail ?>  						</div>  					<?php } ?>					  					<div class="form-group row">  						<label for="exampleInputEmail1" class="col-sm-2 col-xs-12 col-form-label">Email</label>  						<div class="col-sm-10 col-xs-12">  							<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email">  						</div>  					</div>  					<div class="form-group row">  						<label for="exampleInputPassword1" class="col-sm-2 col-xs-12 col-form-label">Пароль</label>  						<div class="col-sm-10 col-xs-12">  							<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Введите пароль">  						</div>  					</div>  					<div class="form-group row">  						<label class="col-sm-2 col-xs-12 col-form-label">Капча</label>  						<div class="col-sm-10 col-xs-12">  							<div class="g-recaptcha" data-sitekey="6LcPh-ASAAAAAA_6GlKkDitO2LPvPEza0lRm2GRE"></div>  						</div>  					</div>  					<div class="form-group row">  						<label class="col-2 col-form-label"></label>  						<div class="col-sm-10 col-xs-12">  							<button type="submit" class="btn btn-primary">Отправить</button>  						</div>  					</div>  				</form>  			</div>  		</div>  	</body>  </html>  

Как установить Google Recaptcha в WordPress

Чтобы установить Google Recaptcha в WordPress, самым удобным будет сделать это через плагин Google Captcha (reCAPTCHA) by BestWebSoft

Устанавливаете плагин, в поля вводите ключи для домена, которые мы приготовили по инструкции выше — и готово.

Ключи нужно получать тут: https://www.google.com/recaptcha/admin

Далее, переходите к настройкам плагина, вводите публичный и секретный ключи в соответствующие поля:

Как защитить комментарии от спама без капчи

Если морока с собственными комментариями ни к чему, трудно установить капчу, она Вам почему-то не нравится или просто нет такой возможности, то можно воспользоваться готовой системой комментирования Disqus. Как выглядит Disqus, можно увидеть под этой статьёй, на этом сайте интегрирована и используется эта система комментирования. Из плюсов — очень удобная система модерирования, отсутствие спама как такового, приятный внешний вид.

sheensay.ru

Гугл капча сейчас везде. Плюс ее в том что она заменяет CSRF-токен.

Регистрируем свой домен по ссылке https://www.google.com/recaptcha/admin#list . Получаем ключи. Гугл предоставляет свое мини-апи для запросов на проверку.   Скачать его можно тут https://github.com/vaajnur/recaptcha2

Кстати, если не любите ооп и композер, в конце статьи есть способ проверки капчи всего лишь 3мя строчками кода.

Размещаем на страничке HTML-код капчи с секретным ключом.

Подключаем javascript

 <script src='https://www.google.com/recaptcha/api.js'></script> 

обработка отправленной капчи

 require_once __DIR__ . '/vendor/autoload.php'; // Register API keys at https://www.google.com/recaptcha/admin $siteKey = '6LdISD0UAAAAAFUfApJZSRqBRuOcfiVdnT31234234'; $secret = '6LdISD0UAAAAAAkYRxJxMYahh70RCVcUn5675675'; // reCAPTCHA supported 40+ languages listed here: https://developers.google.com/recaptcha/docs/language $lang = 'ru'; if (isset($_POST['g-recaptcha-response'])){  $recaptcha = new ReCaptchaReCaptcha($secret);  $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);  if ($resp->isSuccess()):  ?>  <h2>Success!</h2>  <p>That's it. Everything is working. Go integrate this into your real project.</p>  <p><a href="/">Try again</a></p>  <?php  else:  ?>  <h2>Something went wrong</h2>  <?php  endif; }

Сама форма

  <form action="" method="post">  <div class="g-recaptcha" data-sitekey="<?php echo $siteKey; ?>"></div>  <script type="text/javascript"  src="https://www.google.com/recaptcha/api.js?hl=<?php echo $lang; ?>">  </script>  <br/>  <input type="submit" value="submit" />  </form>  
 

Полный код здесь https://github.com/vaajnur/recaptcha2/blob/master/index.php

И пример http://recaptcha.dev10.ru/

Invisible recaptcha

Для этой капчи тоже нужны бэкенд обработчики. Проверка проходит по переменной g-recaptcha-response, которая попадает в post массив , или тот же token в параметрах колбека.

Регаем невидимую капчу по новой. Класс и атрибуты переносим на кнопку сабмита и навешиваем элементарный обработчик на эту кнопку. Форме присваиваем id. Внизу справа должно появиться мод. окно капчи

 <form action="" method="post" id="id_of_form">   <button  class="g-recaptcha"  data-sitekey="<?php echo $siteKey;?>"  data-callback="onSubmit">  Submit </button>    var onSubmit = function(token) {  grecaptcha.reset()  document.getElementById("id_of_form").submit();   } </form>

Для ajax капчи добавляем

 grecaptcha.render(el, {sitekey: $(el).data('sitekey')}); 

Несколько рекаптч на 1 стр.

Подключаем бибил-ку с параметрами

 //www.google.com/recaptcha/api.js?onload=onloadRecaptchaCallback&render=explicit 

и далее сам колбек. Селектор должен отличаться от привычного g-recaptcha

  function onloadRecaptchaCallback(){  $('.g-recaptcha123').each(function(ind, el){  grecaptcha.render(el, {  'sitekey' : jQuery(el).attr('data-sitekey')  })  })  } 

где el это DOM element а не jquery object.
Плюс данного вызова в том что можно выбрать любой селектор, например при открытии модалки аяксом

 grecaptcha.render($('.mainform .g-recaptcha123').get(0), { siteKey: $('.g-recaptcha123').data('sitekey') }); 

навесим обработчик конкретной форме mainform, иначе выдаст ошибку
reCAPTCHA has already been rendered in this element


Ошибки при работе с капчей.

Uncaught Error: reCAPTCHA placeholder element must be empty

Тег капчи не должен содержать вложенных тегов.

ReCAPTCHA couldn’t find user-provided function:

Бывает, что колбек существует, но не биндиться. Решение простое — вынести колбек за $(function), или прочие функции. Колбек должен быть виден напрямую.

recaptcha__ru.js:255 Uncaught (in promise) null 

Здесь ошибка колбека. Попробуйте вызвать grecaptcha.reset() в колбеке.

Uncaught Error: No reCAPTCHA clients exist.

Указанный выше способ — перегенерите капчу. grecaptcha.reset()

render Missing required parameters: sitekey

скорее всего у вас 1-й параметр ф-ии render(el, {}) не dom элемент.

Error: reCAPTCHA has already been rendered in this element
возникает с динамическим контентом. Вешаем колбек правильно, а также ставим таймаут

  $(document).on('click', "input[type='submit']", function(){  setTimeout(function(){  grecaptcha.render($('#form-container .g-recaptcha123').get(0), {  sitekey: $('#form-container .g-recaptcha123').eq(0).data('sitekey')  })  }, 1000)  })  
А также возможны ошибки бэка

OPENSSL file_get_contents(): Failed to enable crypto

file_get_contents() returns “failed to open stream:

что означает надо включить директивы пхп

allow_url_fopen
allow_url_include

Есть и более простая форма проверки recaptcha.
$recaptcha_secret = '6Leao28UAAAfgfgfMR-6OKq9HBRgfsdkyIBdfXnFA7'; $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);  $result = json_decode($response, true);  

phpjs.ru

Как работает reCAPTCHA?

Пример работы reCAPTCHA

Пользователь жмет на кнопку «Я не робот», если анализ Google уверен, что вы человек, то все хорошо, иначе появится вторая проверка, например ввод слова или выбор нескольких картинок одной тематики из массива изображений, пример:

Пример дополнительной проверки reCAPTCHA

или

Google captcha recaptcha

Так же на этот вопрос есть отличный ответ в виде видео от Google:

Удобно? Тогда приступим к интеграции на сайт.

Добавляем reCAPTCHA на сайт

Добавляем reCAPTCHA API key

Для начала необходимо добавить reCAPTCHA API key, для этого перейдите по ссылке: https://www.google.com/recaptcha/admin, и заполните поля: метка (1), домены (где будет использоваться reCAPTCHA) (2) и жмем на кнопку «Register» (3).

Форма добавления reCAPTCHA API key

После чего получим данные для добавления reCAPTCHA на сайт:

Пример данных reCAPTCHA API key

Добавляем 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>  

Внешний вид:

Google captcha recaptcha

Дополнительно

Тема

Сменить цвет reCAPTCHA можно с помощью атрибута data-theme, который может принимать значение dark и light (по умолчанию):

<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="dark"></div>  

Google captcha recaptcha

<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="light"></div>  

Google captcha recaptcha

Язык

По умолчанию язык в 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

кодер.укр

Обзор No Captcha ReCaptcha

No Captcha ReCaptcha отображает флажок, с помощью которого пользователю предлагается указать, что он не является ботом. Это может показаться не надежным решением, но внутренние алгоритмы и методы Google позволяют точно определить, является ли пользователь ботом. Новая версия является более удобной и безопасной.

Регистрация сайта и получения ключей

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

Вы должны создать страницу настроек для плагина, которая позволяет администратору WordPress установить ключ сайта и секретный ключ, которые он получит в панели администрирования ReCaptcha:

Давайте рассмотрим, как работает приведенный выше код:

  • Мы создаем страницу настроек в панели администрирования WordPress;
  • На этой странице настроек выводятся два поля для ввода ключа сайта и секретного ключа;
  • Эти ключи сохраняются как параметры WordPress site_key и secret_key.

Добавление No Captcha ReCaptcha в форму комментариев WP

Нам нужно интегрировать ReCaptcha в форму комментариев, чтобы исключить возможность размещения ботами спама.

Создайте в папке плагина файл style.css и поместите в него следующий код:

Приведенный выше код скрывает кнопку «Оставить комментарий» в форме комментариев WordPress. Таким образом, мы размещаем панель ReCaptcha над кнопкой «Оставить комментарий«, вставив кнопку и панель ReCaptcha вручную.

Ниже приводится код для вставки ReCaptcha в форму комментариев:

Давайте рассмотрим, как работает приведенный выше код:

  • Мы подключаем JavaScript-файл Google ReCaptcha в интерфейсе WordPress с помощью действия wp_enqueue_scripts;
  • Мы также подключаем файл style.css с помощью функции wp_enqueue_style;
  • В форме комментариев мы выводим флажок с помощью действия comment_form;
  • После того, как комментарий был отправлен, перед его добавлением в базу данных WordPress вызывается фильтр preprocess_comment. Внутри фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, то возвращается комментарий, чтобы добавить его в базу данных. В противном случае возвращается ноль, чтобы блокировать добавление комментария в базу данных.

Добавление No Captcha ReCaptcha в форму входа WP

Мы должны интегрировать ReCaptcha в форму авторизации панели администрирования, чтобы предотвратить взломы паролей ботами с помощью перебора. Ниже приводится код для интеграции ReCaptcha в форму входа:

Давайте рассмотрим, как работает приведенный выше код:

  • Мы подключаем JavaScript-файл Google ReCaptcha на страницах входа, регистрации и восстановления пароля с помощью действия login_enqueue_scripts;
  • Мы выводим флажок с помощью действия login_form;
  • Перед получением окончательного результата аутентификации WordPress запускает фильтр wp_authenticate_user для добавления дополнительного этапа валидации. Мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы возвращаем объект пользователя, в противном случае мы возвращаем объект ошибки.

Добавление No Captcha ReCaptcha в форму регистрации WP

Интегрируем ReCaptcha в форму регистрации, чтобы предотвратить создание ботами фейковых аккаунтов. Ниже приводится код для интеграции:

Давайте рассмотрим, как работает приведенный выше код:

  • Мы выводим флажок с помощью действия login_form;
  • Перед получением окончательного результата аутентификации WordPress запускает фильтр registration_errors, чтобы добавить дополнительный шаг валидации. Внутри этого фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы возвращаем пустой объект ошибки, иначе мы добавляем дополнение к объекту ошибки и возвращаем его.

Добавление No Captcha ReCaptcha в форме восстановления пароля

Нам нужно интегрировать ReCaptcha в форму восстановления пароля, чтобы предотвратить заполнение этой формы ботами. Ниже приводится код для интеграции:

Давайте рассмотрим, как работает приведенный выше код:

  • Мы отображаем флажок с помощью действия lostpassword_form;
  • Перед получением окончательного результата аутентификации WordPress запускает действие lostpassword_post, чтобы добавить дополнительный этап проверки. Внутри этого фильтра мы проверяем, является ли пользователь человеком или ботом. Если это человек, мы не возвращаем ничего, иначе мы блокируем скрипт с помощью сообщения об ошибке.

www.internet-technologies.ru

Журнал изменений

V1.40 — 18.01.2019

  • Update : All functionality was updated for WordPress 5.0.3.
  • Update : The enqueueing of styles and scripts has been improved.

V1.39 — 20.12.2018

  • Update : All functionality was updated for WordPress 5.0.1.

V1.38 — 26.11.2018

  • NEW : Google Captcha (reCAPTCHA) Version 3 has been added.

V1.37 — 07.08.2018

  • NEW : The compatibility with Testimonials by BestWebSoft has been added.
  • Обновлено: чешский языковой файл обновлен.
  • PRO : The bug related to WooCommerce Checkout form has been fixed.

V1.36 — 19.03.2018

  • PRO версия: устранена ошибка, связанная с регистрационной формой BuddyPress.

V1.35 — 08.02.2018

  • Обновлено: чешский языковой файл обновлен.
  • Исправлено: исправлены стили Google Captcha.
  • Исправлено: исправлена потенциальная уязвимость брутфорс.

V1.34 — 06.02.2018

  • Добавлено: добавлена совместимость с опцией Wordfence «Немедленно заблокировать IP-адреса пользователей, которые пытаются войти в систему под этими именами».
  • Обновлено: оптимизирован функционал вывода в формах reCAPTCHA.
  • Обновлено: улучшена совместимость с плагином Limit Attempts by BestWebSoft.

V1.33 — 15.11.2017

  • Исправлено: удалена проверка ненужной reCAPTHCA.
  • Обновлено: улучшена совместимость с плагинами Captcha by BestWebSoft и Contact Form by BestWebSoft.

V1.32 — 13.10.2017

  • Добавлено: добавлена совместимость с плагином Limit Attempts by BestWebSoft.
  • Добавлено: добавлена возможность скрывать Google Captcha для зарегистрированных пользователей.
  • Обновлено: возможность проверять Google Captcha с помощью AJAX была удалена.
  • Обновлено: добавлена возможность отображать и проверять Google Captcha в сторонних формах с использованием фильтров.
  • Обновлено: добавлена возможность отключать вызов функции по окончанию загрузки скрипта Google Captcha.
  • PRO версия: добавлена совместимость с формами плагинов bbPress, Fast Secure Contact Form, Jetpack, Forums — wpForo.

V1.31 — 21.08.2017

  • Обновлено: обновлена страница настроек плагина.

V1.30 — 18.05.2017

  • Обновлено: испанский языковой файл обновлен.

V1.29 — 27.04.2017

  • Добавлено: добавлена невидимая версия reCAPTCHA.
  • Обновлено: чешский языковой файл обновлен.

V1.28 — 14.04.2017

  • Исправлено: уязвимость межсайтового скриптинга (XSS) была устранена.

V1.27 — 26.10.2016

  • Добавлено: возможность скрывать Google Captcha (reCAPTCHA) для IP-адресов из белого списка и устанавливать уведомления белого списка.
  • PRO версия: добавлена совместимость с плагином WooCommerce.
  • PRO версия: обновлен список языков reCAPTCHA.

V1.26 — 15.08.2016

  • Обновлено: изменен приоритет хука для отображения капчи в форме регистрации.
  • Обновлено: совместимость с плагином JetPack.

V1.25 — 15.07.2016

  • Обновлено: раздел плагинов BWS обновлен.

V1.24 — 27.06.2016

  • Обновлено: обновлен функционал для использования Captcha с плагином Contact Form Multi.
  • Обновлено: раздел плагинов BWS обновлен.

V1.23 — 19.04.2016

  • Добавлено: возможность проверить введенный ключ сайта и секретный ключ.
  • Добавлено: возможность добавлять пользовательские стили.

V1.22 — 25.02.2016

  • Добавлено: чешский языковой файл был добавлен в плагин.
  • Обновлено: добавление функционала скриптов плагина было изменено так, что они будут добавлены только на страницах отображения капчи.
  • Исправлено: устранена ошибка с отображением нескольких блоков reCAPTCHA на одной странице в разных формах.
  • Исправлено: устранена ошибка с определением функции JS на().

V1.21 — 10.12.2015

  • Добавлено: добавлена кнопка для вставки шорткода Google Captcha в контент.
  • Добавлено: фарси/персидский языковой файл был добавлен в плагин.
  • Добавлено: французский языковой файл был добавлен в плагин.

V1.20 — 02.10.2015

  • Обновлено: textdomain был изменен.

V1.19 — 28.08.2015

  • Исправлено: исправлена ошибка в работе Google Captcha (reCAPTCHA) версии 2 в PHP версии ниже 5.3.

V1.18 — 26.08.2015

  • Добавлено: возможность восстанавливать стандартные настройки.
  • Обновлено: раздел плагинов BWS.
  • Обновлено: весь функционал плагина обновлен под версию WordPress 4.3.

V1.17 — 29.06.2015

  • Исправлено: устранена ошибка при проверке капчи в пользовательской форме входа, регистрации, восстановления пароля.

V1.16 — 18.05.2015

  • Исправлено: устранена ошибка при проверке капчи при удалении ‘recaptcha_widget_div’.
  • Исправлено: устранена ошибка, связанная с использованием устаревших методов jQuery (благодаря Junio Vitorino, github.com/juniovitorino).
  • Добавлено: арабский языковой файл был добавлен в плагин.
  • Добавлено: немецкий языковой файл был добавлен в плагин.
  • Добавлено: языковой файл хинди был добавлен в плагин.
  • Обновлено: весь функционал плагина обновлен под версию WordPress 4.2.2.

V1.15 — 09.04.2015

  • Исправлено: устранена ошибка при проверки капчи для пользователей из списка исключений.

V1.14 — 07.04.2015

  • Исправлено: исправлена работа капчи с формой комментариев при неактивном JavaScript.
  • Исправлено: исправлена проверка reCaptcha v2 в PHP версии 5.6 и выше.
  • Добавлено: итальянский языковой файл был добавлен в плагин.

V1.13 — 13.02.2015

  • Исправлено: исправлена уязвимость при входе в панель администратора.
  • Добавлено: греческий языковой файл был добавлен в плагин.

V1.12 — 20.01.2015

  • Добавлено: болгарский языковой файл был добавлен в плагин.
  • Обновлено: добавлена проверка опции «allow_url_fopen» в настройках PHP.
  • Обновлено: добавлен стиль для форм, которые используются в капчи v2.

V1.11 — 30.12.2014

  • Обновлено: добавлена новая версия Google Captcha (reCAPTCHA).
  • Исправлено: исправлена ошибка с отображением Google Captcha (reCAPTCHA) в форме регистрации на мультисайте.
  • Исправлено: исправлена ошибка с плагином Multilanguage.
  • Обновлено: весь функционал плагина обновлен под версию WordPress 4.1.

V1.10 — 26.11.2014

  • Обновлено: обновлен URL-адрес и названия ключей для Google Api.

V1.09 — 14.11.2014

  • Исправлено: устранена ошибка с совместным отображением плагинов Google reCaptcha and Captcha.
  • Исправлено: устранена ошибка с неверными ответами в пользовательских формам.
  • Исправлено: устранена ошибка при переадресации входа.

V1.08 — 14.10.2014

  • Добавлено: испанский языковой файл был добавлен в плагин.
  • Исправлено: устранена ошибка при работе в сети подсайтов.
  • Исправлено: устранена ошибка с логином пользователя.
  • Исправлено: устранена ошибка с отправкой Contact Form.

V1.07 — 02.09.2014

  • Добавлено: китайский (традиционный) языковой файл был добавлен в плагин.

V1.06 — 07.08.2014

  • Исправлено: брешь в безопасности была устранена.
  • Исправлено: отображение персонального ключа во фротенде было удалено.

V1.05 — 21.07.2014

  • Исправлено: исправлена ошибка с подтверждением формы Google Captcha (reCAPTCHA).

V1.04 — 18.07.2014

  • Исправлено: исправлена ошибка с отображением Google Captcha (reCAPTCHA) с плагином Contact Form Pro (by BestWebSoft).
  • Добавлено: бразильский/португальский языковой файл был добавлен в плагин.

V1.03 — 06.06.2014

  • Добавлено: польский языковой файл был добавлен в плагин.
  • Добавлено: украинский языковой файл был добавлен в плагин.
  • Добавлено: автоматическое обновление капчи в случае ввода неправильного значени (благодаря Yaroslav Rogoza, github.com/rogyar).
  • Обновлено: весь функционал плагина обновлен под версию WordPress 3.9.1.
  • Исправлено: устранена проблема с проверкой капчи для сайтов, использующих протокол https.

V1.02 — 03.04.2014

  • Обновлено: скриншоты были обновлены.
  • Обновлено: раздел плагинов BWS обновлен.
  • Исправлено: выполнена оптимизация плагина.

V1.01 — 05.02.2014

  • Исправлено: исправлена ошибка с добавлением формы комментариев в панель администратора.
  • Добавлено: на страницу плагина были добавлены ссылки «Настройки», «FAQ» «Поддержка».
  • Добавлено: добавлены ссылки на страницы плагинов.

V1.0

  • Добавлено: возможность добавлять Google Captcha (reCAPTCHA) в стандартные формы.

ru.wordpress.org

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.