К выходу в свет готовится новая версия рекапчи от Google - под манящим кодовым названием Invisible Recaptcha. Несмотря на статус бета, уже можно с уверенностью опробовать новую технологию и начинать внедрять (или подготавливать к внедрению) в расширения на сайты. В этой статье я попытаюсь осветить нововведения, а также свои плюсы или минусы от интеграции на сайт. Кроме этого я поделюсь опытом, как легко и безболезненно установить в контактную форму и какие подводные камни могут при этом возникнуть.

Внедрение на сайт Invisible ReCAPTCHA от Google
Внедрение на сайт Invisible ReCAPTCHA от Google

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

Пока вроде бы налицо одни плюсы. Остается правда вопрос, а если рекапча не показывается, то вдруг она не будет показываться ботам, да и как сайту определять показывать капчу или нет? Сравнивая с предыдущей версией Google Recaptcha 2, кроме этой невидимости особых нововведений можно и не заметить. Даже скрипт подключения рекапчи одинаков. Отличительным признаков Invisible Recaptcha является обязательность наличия функции обратного вызова (callback). В противном случае невидимая рекапча будет работать как обычная 2.0 версия.

Интеграция невидимой рекапчи на сайт

Давайте попробуем разобраться, как нам подключить Invisible Recaptcha в какую-нибудь контактную форму либо форму для комментариев.

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

Далее необходимо добавить вызов виджета в шаблон формы. API новой рекапчи достаточно скудное и немного запутанное, но всё же предлагает 3 варианта подключения скрипта на сайт:

Подключение Invisible Recaptcha через button

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

Приведу пример данного кода:

<button

class="g-recaptcha"

data-sitekey="Ваш_ключ"

data-callback="YourOnSubmitFn">

Submit

</button>

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

В данной функции должны быть все наши проверки перед последующей отправкой данных серверу, в самом простом варианте эта функция будет выглядеть так:

<script>

     function onSubmit = function(token) {

       document.getElementById("demo-form").submit();

     }

</script>

Данный скрипт обязан быть после подключения скрипта api.js! Данную функцию можно модифицировать под свои нужды, проверяя вводимые данные или же если надо отправить данные через ajax.

Внедряем невидимую капчу через div

Предыдущий метод будет работать только на кнопках button, если же мы захотим использовать блоки для определения места и стиля подгрузки через div, нам придется дополнительно вызывать виджет командой grecaptcha.execute();

После всех манипуляций наш код примет вид:

<div class="g-recaptcha"

          data-sitekey="Ваш_ключ"

          data-callback="onSubmit"

          data-size="invisible">

</div>

а функция JS будет иметь вид:

<script>

     function onSubmit = function(token) {

       document.getElementById("id_of_form").submit();

     }

</script>

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

grecaptcha.execute();

Не забывайте вставлять функцию после подключения скрипта рекапчи, иначе функция будет не определена и будет выдавать ошибку.

Вызов Invisible Recaptcha скриптом api.js

Рассмотрим ещё один вариант подключения виджета рекапчи. На этот раз мы будем подключать непосредственно в src подключаемого скрипта:

<script type="text/javascript">

        var onloadCallback = function() {

          grecaptcha.render('submit', {

            'sitekey' : 'Ваш_ключ',

          });

        };

    </script>

    <form action="?" method="POST">

      <input id='submit' type="submit" value="Submit">

    </form>

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

        async defer>

</script>

На сайте API можно найти другие настройки, как выбор языка или цветовой шаблон, для простых примеров подойдут и эти варианты.

Серверная часть Invisible Recaptcha

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

Для примера приведу вариант реализации который мне больше нравится:

$recaptcha_secret = "secret_key";

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);

$response = json_decode($response, true);

if($response["success"] === true) {  

// Обрабатываем успешный ответ

}

else {

// Иначе выдаем ошибку

}

Не забываем подставить свой секретный ключ!

Invisible Recaptcha не работает на сайте

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

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

Как оказалось, виноваты были настройки ключа, их можно найти в расширенных настройках для вашего домена. По умолчанию настройки безопасности стояли на середине ( в отличие от Recaptcha 2) и лишь перставив на самый простой режим заветная цель была достигнута и рекапча исчезла с поля зрения.

Убираем отображение рекапчи для людей
Убираем отображение рекапчи для людей

 Желаю и вам успешной установки данного типа защиты на сайты, если же возникнут сложности или затруднения, то с радостью помогу советом.

Минусы использования невидимой рекапчи

Как оказалось, радужное представление новшества омрачилось некоторыми факторами. Во-первых, могут возникнуть некоторые конфликты с функциями проверки контактных форм, хотя это решаемый вопрос.

Во-вторых, работоспособность Invisible Recaptcha напрямую зависит от использования Javascript в браузере, в противном случае пользователи с отключенным исполнением скриптов не смогут пройти проверку. Хотя с другой стороны это поможет отсеять примитивных ботов, не умеющих исполнять JS.

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

Поэтому вопрос перехода на новую версию пока остается открытым.

Комментарии   
+1 # Евгения 10.04.2017 11:26
Добрый день. Подскажите, а что может означать такая ошибка при установке кода:

Warning: file_get_conten ts() [function.file- get-contents]: Unable to find the wrapper "https" - did you forget to enable it when you configured PHP? in /home/h236604/v vvvv.com/docs/i ndex1.php on line 12

Warning: file_get_conten ts(google.com/r ecaptcha/api/si teverify?secret =key_removed&re sponse=&remotei p=ip_remote) [function.file- get-contents]: failed to open stream: No such file or directory in /home/h236604/v vvvv.com/docs/i ndex1.php on line 12
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 10.04.2017 11:46
Во-первых, не стоит публиковать секретные ключи.
Во-вторых, проверьте настройки сервера или функцией phpinfo() гляньте значение allow_url_fopen (должно быть on)
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 10.04.2017 12:22
Секретный ключ я поменяла, прежде чем запостить)
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 10.04.2017 12:24
allow_url_fopen стоит включенная.
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 10.04.2017 13:11
А не глянул, у вас ответ с формы (response) приходит пустым, возможно имя другое переменной?
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 10.04.2017 15:17
К сожалению мои знания в PHP слишком скудны. И я искала готовое решение, однако, как оказалось готовое решение все равно нужно как то адаптировать. А я просто подставила код, написанный Вами(
Скрипт по отправке формы заказа у меня вот такой. сайт vspomnite.com
Не пойму у какой переменной может быть другое имя
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 10.04.2017 15:22
Ой, почему то все рассыпалось(
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 10.04.2017 15:24
Пыталась исправить свои сообщения, но такое не допускается. И код тоже сюда не вставить, чтоб пояснить(
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 10.04.2017 15:45
Обрезается опасный код.
У вас не идет проверка рекапчи - она не генерируется просто.
Вам необходимо после ваших проверок на введенные поля в JS вставить grecaptcha.exec ute(); при удачной проверке!
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 14.04.2017 08:21
Добрый день! Скажите пж, а как можно проверить работает ли невидимая капча? Есть еще один сайт printwel.ru, на котором, как утверждает исполнитель, он установил невидимая капчу. Но установлена она в коде несколько иным способом нежели чем у вас в статье. Закрались сомнения. А вот как проверить я не знаю, а исполнитель не говорит(
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 14.04.2017 10:35
А там заработала после всех манипуляций?
По второму сайту:
По логике, если письмо отправляется, то скорее всего даже проверки на Recaptcha не было сделано. Если не отправляется, то не работает, потому что g-recaptcha-res ponse: приходит пустым.
У вас ошибки в консоле JS: "Uncaught Error: The bind parameter must be an element or id"
из-за этого скорее всего и не работает капча от гугла.
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 14.04.2017 10:51
К сожалению не заработало, поэтому и пришлось обратиться к знающему человеку и заказать установку капчи. Бот вдруг переключился на другой сайт и начал долбать заказы обратного звонка уже с printwel.ru. Поэтому решили установить капчу сразу на второй сайт. Спам вроде прекратился. Причем и по первому сайту(где установка капчи не удалась) и по второму (где делал умный человек).
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 14.04.2017 10:56
И я не могу взять в толк - Капча же невидимая и, вроде как, проверка должна проходить какими то внутренними алгоритмами. Если проверка пройдена, то письмо должно отправляться. А Вы говорите, "если письмо отправляется, то скорее всего даже проверки на Recaptcha не было сделано" (с). :-?
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 14.04.2017 11:17
Есть две проверки: со стороны гугла, ответ который передается в g-recaptcha-res ponse, и на стороне серверной части вашего сайта, где вы через секретный ключ проверяете, прошел ли проверку посетитель или нет.
Согласитесь, если сделать проверку необязательной, то письма будут отправляться.
Сейчас у вас приходит пустой ответ от гугла, а значит письма не должны отправляться. В противном случае, вам неправильно установили.
И простой тест, как рекапча установлена, в конце статьи есть "Настройки безопасности" - переставьте ползунок в самый надежный, и в любом случае будет выскакивать капча перед отправкой формы.
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 17.04.2017 08:26
Спасибо вам большое за столь полные и содержательные ответы.
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 17.04.2017 09:25
Пожалуйста, если разберетесь с проблемой, то напишите как, будет интересно знать.
Ответить | Ответить с цитатой | Цитировать
0 # Алекс 10.05.2017 13:24
:-| Такой вопрос.
Мой сайт на русском языке, а домен немецкий "de", т.к. я нахожусь в Германии. Когда я устанавливаю капчу, вопрос выплывает на нем. языке, а мои заказчики все русские. Как изменить язык вопрося капчи?
Спасибо
Ответить | Ответить с цитатой | Цитировать
0 # Protect Your Site 10.05.2017 13:41
Цитирую Алекс:
:-| Такой вопрос.
Мой сайт на русском языке, а домен немецкий "de", т.к. я нахожусь в Германии. Когда я устанавливаю капчу, вопрос выплывает на нем. языке, а мои заказчики все русские. Как изменить язык вопрося капчи?
Спасибо

Подключайте скрипт рекапчи с явным указанием языковой версии, к примеру для русской рекапчи:
api.js?hl=ru
Ответить | Ответить с цитатой | Цитировать
0 # Виталий 17.09.2017 14:26
Вопрос скорее не по самой невидимой каптче, а связанным с ней вопросам.
Суть в том, что при установке невидимой каптчи перестало проверяться требование required в полях ввода. Если же ставить свою проверку, то как восстановить внешний вид выдачи алертов bootstrap-формы (а не всплывающего окна стандартного JS alert()) ?
Ответить | Ответить с цитатой | Цитировать
+1 # Protect Your Site 17.09.2017 15:25
Виталий, тут зависит каким образом проверяете заполнение полей, а также в какой очередности. Да и на какой стороне идёт проверка, в идеале стоит аяксом отправлять данные в backend, а оттуда уже должна возвращаться ошибка, которая впишется в вашу бутстрап форму. Вообщем тут настолько абстрагирована информация, что конкретно и не ответишь.
Ответить | Ответить с цитатой | Цитировать
0 # Виталий 01.11.2017 13:18
Не получается подключить эту каптчу, хоть тресни!
При обычной кнопке формы поля проходят html5-валидацию (то есть пустые значения, обязательные поля, длина поля) и далее форма отправляется скрипту (другой адрес страницы). Все Ок, при этом скрипт api.js подключен.

Как только начинаю "играться" с изменением кнопки, вызовом колбэков и прочим (по советам выше, вариант через button), то сразу:
а) валидация пропадает
б) получаю в консоли предупреждение о непонятном token=
в) при клике дополнительно в консоли предупреждение об отсутствии функции onSubmit (хотя скрипт есть, ставил и до и после form
г) и никто никуда не переходит, остаемся на исходной странице с формой.

Если же использовать вариант 3 (через скрипт), то аналогично: нет валидации, и форма никуда не уходит.

А вот значек гугла висит в нижнем углу сайта, то есть сам скрипт подключился, инициализировал ся и все Ок.

Как побороть? Какие данные дать для более полного понимания?
Ответить | Ответить с цитатой | Цитировать
Добавить комментарий