Как интегрировать “No CAPTCHA reCAPTCHA” на Ваш Сайт

Russian (Pусский) translation by Narine Hovhannisyan (you can also view the original English article)

Поля CAPTCHA являются, возможно, самым распространенным разочаровывающим опытом в Интернете. Они достаточно болезненны для большинства пользователей, не говоря уже о слабовидящих или тех, кто полагается на вспомогательные технологии, такие как скрин-ридеры для доступа в сеть. Однако CAPTCHA играют жизненно важную роль в борьбе со спамом.

A necessary evil thanks spammers — Необходимое зло (спасибо спамерам)

Как ни странно, несмотря на то, что традиционные "исказители текстов" CAPTCHA неудобны нам для чтения, современные технологии искусственного интеллекта имеют меньше проблем с этим. Google даже использует подобную технологию для прочтения номеров домов и дорожных знаков для подтверждения их местонахождения на Google Street View!

Роботы Google могут безошибочно их прочесть

Это логично, потому что именно разработчики Google придумали лучшее решение для CAPTCHA до сих пор, к концу 2014 года. Для No CAPTCHA reCAPTCHA требуется не более, чем постукивание пальцем, щелчок мышью или нажатие пробела на клавиатуре в соответствующем поле.

В большинстве случаев все очень просто, но если анализ рисков Google по-прежнему не сможет быть уверен в том, что ты человек, то появится вторая подсказка.

Вы можете увидеть это в действии уже по всему Интернету, например на странице @materialup.

Получить No CAPTCHA reCAPTCHA

Приступим уже к главному и установим No CAPTCHA.

Шаг 1

Во-первых, нам нужен API key, так что заходим сюда https://www.google.com/recaptcha/admin. Чтобы получить доступ к этой странице, вы должны быть зарегистрированы в Google. Вам будет предложено зарегистрировать свой сайт, так что дайте ему подходящее имя, затем список доменов (например tutsplus.com), где будет использоваться именно эта reCAPTCHA. Поддомены (например webdesign.tutsplus.com и code.tutsplus.com) автоматичекси учитываются.

Шаг 2

После этого вам дадут ключ сайта и секретный ключ партнера:

Шаг 3

Под ключами вы увидите несколько фрагментов для включения reCAPTCHA на вашем сайте. Сначала вы увидите JavaScript:

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

Вы можете также определить какой из 40 поддерживаемых языков вы будете использовать, добавив параметр к строке. Мы добавим es, это даст нам reCAPTCHA на испанском:

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

Поместите этот скрипт внизу вашей страницы (или под формой, где появится reCAPTCHA, в зависимости от того, как вы распределите загрузку данных).

Шаг 4

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

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

Заметка: атрибут data-sitekey будет держать значение вашего ключа, а не этот пример.

Есть другие атрибуты, которые вы можете добавить в настройки внешнего вида и функциональности вашей reCAPTCHA на данный момент. Например, добавление data-theme="dark" этому div даст вам темную версию, которая больше подойдет вашему интерфейсу пользователя (UI):

Для более подробной информации о настройке reCAPTCHA перейдите сюда developers.google.com.

Посмотрим Все Вместе

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

Шаг 1

Положим наш тег скрипта и текстовый заполнитель в простую форму:

<!DOCTYPE html>
<html lang="en">
  <head>
<title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

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

      <input type="submit" value="Submit" />

    </form>

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

  </body>
</html>

Здесь мы использовали базовую структуру страницы с формой, содержащей поле для имени, поле для email и кнопку для отправки. Мы не придаем какой-либо стиль, поскольку он особо и не нужен для этого урока.

our captcha form — Вы должны иметь что-то похожее на это

Чтобы показать, что тест reCAPTCHA был принят, нам потребуется выполнить некоторые серверные проверки. В данном случае мы будем делать это с PHP, так что сохраните этот файл в новом проекте index.php.

Шаг 2

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

<?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

Каждая пара ключ/значение присутствует в нашем массиве $_POST, где они выводятся с небольшим количеством форматирования. Когда вы отправите форму, то увидите следующее:

Вы увидите возвращенное значение для имени и email, но также значение для g-recaptcha-response. Если вам не удалось завершить тест CAPTCHA, то это значение будет пустым, но если вы поставили галочку рядом с “I’m not a robot”, то вы увидите длинную строку с символами.

Это значение мы и дожны отправить Google для верификации, так давайте сделаем это.

Шаг 3

К счастью для нас, команда разработчиков Google сделала тяжелую работу за нас, так что перейдем к проекту ReCAPTCHA на Github и возьмем копию материала recaptchalib.php. Поместите его в корневом каталоге вашего проекта и затем ссылайтесь на него в верхней части файла index.php:

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

Шаг 4

В этом материале содержится коллекция функций, которая посылает g-recaptcha-response (вместе с нашим секретным ключом) в Google через HTTP запрос. Затем они собирают ответ, проверяя, был ли CAPTCHA успешным. Для его использования нужно сначала создать пару переменных перед закрытием PHP тега:

// ваш секретный ключ
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// пустой ответ
$response = null;

// проверка секретного ключа
$reCaptcha = new ReCaptcha($secret);

ReCaptcha() проверяет присутствие вашего секретного ключа. Если его нет, то он убивает процесс и советует нам пойти и взять ключ. Мы пропускаем наши детали через следующий код:

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
$response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

Шаг 5

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

<?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

Наконец, добавьте закрывающий PHP тег после формы:

<?php } ?>

Это отображает форму, если она была успешно отправлена, в этом случае отображается короткое благодарственное сообщение.

Заключение

Это было черновой и готовой PHP реализацией No CAPTCHA reCAPTCHA. Она открыта для улучшения, но, надеюсь, даст вам понимание основ. Признателен команде разработчиков Google за предоставление материала и благодарен Matt Aussaguel за указание на него.

Полезные Ресурсы

ReCAPTCHA 1.0.0 on Github
ReCAPTCHA documentation
Are you a robot? Introducing “No CAPTCHA reCAPTCHA” Google Security Blog
WordPress ReCaptcha Integration reCaptcha plugin for login, signup, comment forms, Ninja Forms and Contact Form 7

Как интегрировать “No CAPTCHA reCAPTCHA” на Ваш Сайт

Получить No CAPTCHA reCAPTCHA

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Посмотрим Все Вместе

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Заключение

Полезные Ресурсы

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: