Russian (Pусский) translation by Narine Hovhannisyan (you can also view the original English article)
Поля CAPTCHA являются, возможно, самым распространенным разочаровывающим опытом в Интернете. Они достаточно болезненны для большинства пользователей, не говоря уже о слабовидящих или тех, кто полагается на вспомогательные технологии, такие как скрин-ридеры для доступа в сеть. Однако CAPTCHA играют жизненно важную роль в борьбе со спамом.

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

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

Чтобы показать, что тест 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
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post