Используем невидимую рекапчу на сайте

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

Как следует из названия новой разновидности капчи она должна быть невидимой. Как это реализуется? Как помним вторая версия 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.

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

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