Cyber Monday Sale! 50% off themes, plugins, graphics, audio + video! Cyber Monday Sale! Download Now
Advertisement
  1. Web Design
  2. Form Design
Webdesign

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

by
Difficulty:BeginnerLength:LongLanguages:

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:

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

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

Шаг 4

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

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

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

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

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

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

Шаг 1

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

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

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

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

Шаг 2

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

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

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

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

Шаг 3

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

Шаг 4

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

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

Шаг 5

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

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

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

Заключение

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.