Установка рекапчи на сайт и несколько их на одной странице

Мне приходилось разрабатывать капчи самостоятельно, но, стоит честно заметить, что все они не дотягивают до уровня рекапчи. Да что говорить – сам гугл её использует. И вот, на одном из проектов, надо было установить капчу (поставить защиту от накрутки) и я решил поставить именно рекапчу. И эта, казалось бы элементарная процедура, вызвала некоторые сложности. Именно о них и пойдет речь ниже.

Установка рекапчи

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

Сначала добавляем на страницу

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Получаем пост запрос

$recaptcha=$_POST['g-recaptcha-response'];

Настраиваем капчу

$google_url="https://www.google.com/recaptcha/api/siteverify";
$secret="ваш_секретный_ключ";
$ip=$_SERVER['REMOTE_ADDR'];
$url=$google_url."?secret=".$secret."&response=".$recaptcha."&remoteip=".$ip;

И если все в порядке

if(!empty($recaptcha)){

Инициализируем курл и отправляем запрос по адресу гугла

$curl = curl_init();
curl_setopt($curl,CURLOPT_URL, $url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
$res = curl_exec($curl);
curl_close($curl);
$res= json_decode($res, true);

Если запрос подтвержден

if($res['success']){

То что-то делаем

//что-то делаем
}
}

На странице не забываем добавить в форму класс

<div class="g-recaptcha" data-sitekey="публичный_ключ" ></div>

Теперь все отлично у нас работает.



Несколько рекапч на одной странице

Однако, если вы попробуете добавить две или более рекапчи на одну страницу, то у вас будет отображаться только одна. Это не баг – разработчик дал пояснение, что только одна рекапча может отображаться на странице в один момент времени. Неужели нет выхода? Есть! Мы используем некоторую хитрость и JavaScript. В начале страницы вставьте такую функцию:

<script type="text/javascript">
        var onloadCallback = function() {
        mysitekey = .'публичный_ключ';
        grecaptcha.render('recaptcha1', {
        'sitekey' : mysitekey
        });
        grecaptcha.render('recaptcha2', {
        'sitekey' : mysitekey
        });
        };
    </script>
	

А в нужных местах вот эти дивы:

<div class="g-recaptcha" id="recaptcha1"></div>
<div class="g-recaptcha" id="recaptcha2"></div>

Здесь мы пользуемся методом grecaptcha.render и динамически вызываем рекапчу. Работает? Работает!



Итак, вот так просто можно поставить рекапчу на сайт, причем сразу несколько штук. Если у вас есть вопросы по поводу капчи, защиты сайта или любые другие по скриптам или расширению функциональности сайтов, то вы в любое время можете написать мне на почту up777up@yandex.ru или прямо в скайп up777u2 – за небольшое денежное вознаграждение я вам с удовольствием помогу. Выполню практически любые работы по сайтам, блогам, порталам, форумам – на php, js.