04-03-2015, Скрипты

Рекапча

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

captcha-1
Необходимое зло (спасибо спамерам)

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

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

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

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

notsure

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

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

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

register

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

keys

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

 

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

 

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

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

 

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

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

dark

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

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

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

 

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

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

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

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

 

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

form-submitted

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

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

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

 

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

 

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

 

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

 

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

 

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

 

[aio_button align=”center” animation=”swing” color=”blue” size=”small” icon=”search” text=”ДЕМО” relationship=”dofollow” url=”https://romua1d.ru/examples/grecaptcha2″]

[wpfilebase tag=file id=32 /]

Источник: http://webdesign.tutsplus.com/ru/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website–cms-23024


RomualdShmidtelson

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Отправить письмо