Меню

Как добавить на сайт капчу

6 марта 2018 года. Опубликовано в разделах: Интернет-маркетинг для новичков. 3076

Наверное, каждый пользователь интернета хотя бы раз столкнулся с вводом проверки капчи на форме обратной связи. Но что такое капчи для сайтов? Что стоит за этими затейливыми картинками и значками? Давайте разбираться!

Как известно, слово CAPTCHA пишется большими буквами, ведь это не просто термин, а целая аббревиатура из английских слов. По-русски она звучит как «полностью автоматизированный открытый тест Тьюринга для распознавания компьютеров и людей». Название говорит само за себя: данный инструмент киберзащиты дает возможность отличить человека от компьютера, предупреждая тем самым, многочисленные атаки на интернет-страницы.

Что же представляет собой тест Тьюринга? Обратимся к истории. В 1950 г. английский логик Алан Тьюринг провел интересный опыт, в ходе которого человек (судья) общался с компьютером и другим человеком посредством текстовой переписки. Считалось, что компьютер прошел тест в том случае, если судья не мог определить, кто является его оппонентом в данный момент времени.

Следует сказать, что изначальная версия теста была ориентирована на исследование возможностей компьютера. Так вот, нынешняя капча — это новое, усовершенствованное поколение теста Тьюринга. Роль судьи в данном инструменте играет компьютерная программа. По этой причине современная капча для сайта получила название обратного теста Тьюринга.

Мир современного интернета жесток и коварен. Множество сайтов регулярно подвергаются вредоносным автоматизированным атакам. Функцией капчи в данной ситуации является обеспечение безопасности ресурса посредством блокировки этих атак.

Помимо своего основного назначения, капча несет и дополнительную полезную функцию, а именно распознавание отсканированных и печатных текстов. При работе с типографским текстом программы-распознаватели (типа Adobe FineReader) лишь частично справляются с этой задачей. Что же касается рукописей, то их распознавание почти нулевое. Так вот, разработчики капчи собрали целую базу нераспознанных символьных конструкций. Эти конструкции стали отображаться в формате картинок капчи, которая предлагала пользователям ввести в текстовое поле увиденные символы. Такой прием позволил наполнить базу нераспознанных слов вариантами их расшифровки.

При этом пользователи с большой долей вероятности доказывали свою реальность, ведь распознать рукописный текст может только живой человек. Будет логично спросить, как механизм капчи определяет правильность введенных символов? Но ответ на этот вопрос разработчики хранят в строгом секрете.

Как уже упоминалось выше, принцип действия капчи заключается в решении задачи, доступной живому человеку и недоступной компьютеру. В зависимости от вида поставленной задачи, различают следующие виды капчи:

  • Графическая капча. Представляет собой набор символов, которые были искажены и пропущены сквозь шумовые фильтры.
    В частности, так выглядит Яндекс-капча для сайта.

Ее особенность заключается в том, что кодовое слово предлагается на кириллице.

  • Логическая капча. Позволяет определить наличие человеческой логики. К таким задачам относятся:
    • Арифметические операции.
    • Поиск объекта по заданному критерию (например, на изображении лесного пейзажа отметить хвойные деревья).
    • Перестановка символов (например, написать наоборот предложенное слово).
  • Поведенческая капча. В этом случае пользователю предлагается совершить указанное действие:
    • Перемещение бегунка в заданное положение.
    • Поворот картинки на заданный градус.
    • Составление пазла.

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

  • Звуковая капча. Предназначена для слепых или слабовидящих пользователей. Ее особенность в том, что все задания озвучиваются в виде голосовых сообщений.

Встречаются и комбинированные виды капчи. Так работа Гугл-капчи для сайта (reCAPCHA) начинается с поведенческого задания, предлагающего поставить галочку «Я не робот».

В случае успешного результата система дает логическое задание, предлагая отметить на фото заданные элементы.

Создание капчи для сайта html — дело трудоемкое и требует хороших знаний php и JS. Можно встроить в сайт готовую капчу, однако и это занятие требует некоторых навыков программирования. Среди сервисов, предлагающих готовые решения, наиболее популярны Гугл и «Яндекс».

Перед тем, как поставить капчу google на сайт, нужно получить два специальных ключа. Первый ключ нужен для размещения виджета в интерфейсе. Второй — для проверки на сервере правильности результата теста. Для их получения необходимо создать учетную запись google. После этого нужно пройти по ссылке https://www.google.com/recaptcha/admin#list и авторизоваться. Если вы все сделаете правильно, вам откроется панель reCAPTCHA с блоком регистрации сайта.

После ввода необходимых данных, вам откроется страница, содержащая ключи.

Помимо ключей, этот сайт содержит необходимый скрипт. Его нужно скопировать и вставить в блок head кода вашего сайта. Затем нужно вставить блок с капчей в любое выбранное место.

Подключение капчи происходит как на серверной, так и на клиентской стороне. Для клиентской части, т.е. html-документа, капча подключается в 2 этапа: добавление кода reCAPCHA в js-страницу и добавление в блок div класса «g-recaptcha». В качестве значения одного из атрибутов класса подставляется полученный ранее публичный ключ.

Итоговый код будет выглядеть примерно так:

(div )(/div)
(!обрабатываем исключительные ситуации –)
(div )(/div)

Что-же касается js-страницы, то в ее код следует внести следующие строки:

//Обратная связь
var mycap = grecaptcha.Response();
// При отправке пустой формы, готовим сообщение об ошибке
if (!mycap.length) <
$(‘#recaptchaError’).text(‘Тест не пройден’);
> else <
$(‘#mycapErr’).text(”);
>
// Если форма валидна, а количество символов капчи не нулевое, то результат посылается на серверную часть.

if ((formaValid) && (mycap.length)) <
DataForm.append(‘g-recaptcha-response’, mycap);
.
>
grecaptcha.reset();
if ($mes) <
$(‘#mycapErr’).caption($mes);
>

Серверная часть, т.е. php-скрипт также подлежит изменениям. Для этого в файл process.php нужно внести следующие правки:

  1. Присвоить новой переменной содержимое секретного ключа.
  2. Подключить клиентскую библиотеку autoload.php.
  3. Проверить массив POST на наличие ключа g-recaptcha-response.
  4. С помощью секретного ключа создать объект класса recaptcha.
  5. В случае получения положительного результата выполнить нужные действия.
  6. В случае ошибки отправить клиенту соответствующее сообщение.

Готовый код будет выглядеть примерно так:

// Если проверка пройдена
//.
> else <
// выводим код ошибки
$myerr = $prn->getErrorCodes();
$data[‘err_prn’]=$prn;
$data[‘mes’]=’Проверка не пройдена’;
$data[‘myres’]=’err_prn’;
>
> else <
//Массив отсутствует
$data[‘my_res’]=’error’;
>

Система «Яндекс» также предлагает удобный сервис отслеживания спама. Этот сервис носит название «Яндекс.Чистый Веб» и включает 4 метода: обнаружение бота, получение капчи, проверку введенного ответа и обжалование результатов. Для их реализации необходимо знание PHP-функций API системы «Яндекс.Чистый Веб».

Перед тем, как установить капчу на сайт, нужно создать простой статический php-класс:

class MyYanClass
const c_d_u = ‘http://cXML-a.yand.ru/2.0/ck-s’;
const g_c_u = ‘http://cXML-a.yand.ru/2.0/g-c’;
const c_c_u = ‘http://XML-a.yand.ru/2.0/c-c’;>

Теперь займемся реализацией методов. Программный интерфейс получает запросы GET и POST и выдает ответы XML-формата. Вот так будет выглядеть простая функция передачи запроса:

function Q_XML($u, $par = array(), $p = false)

$Q_param = hp_builder_query($par);
if ($post)
<$hp_op = array( 'http' =>array ( ‘method’ => ‘POST’, ) );
$ct = st_context_create($p_op);
$cs = file_get($u, false, $c);>
else $cs = get($url.’?’.$Q_Param);
if (!$cs) return 0;
$D_XML = XMLElement($cs);
return $D_XML;>

Далее напишем алгоритм проверки на спам. Все проверяемые данные будем передавать единым массивом:

Function Poisk_spam($m_d, $r_f_d = 0)
<$r = set::Query_x(set::c_d_u, $m_d,1);
$s_d = (isset($r->caption[‘metka’]) && $r->caption[‘otmetka’] == ‘da’);
if (!$r_f_d) return $s_d;
return arr( ‘s_l’ => (ins($r->links)) ? $r->links : array() );>

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

$r= Q_x(get_captcha_url, array(‘ss’ => $ss));

И, наконец, проверка капчи осуществляется с помощью функции check_captcha_url. На вход ей передается идентификатор (id) созданной капчи. Вот как это будет выглядеть:

function my_cap($ > <$param = array( 'c' =>$id_cap, ‘v’ => $znach, ‘id’ => $id);
$rez = Q_x(check_captcha_url, $param);
return $r->ok);>

Как правило, проблемы с капчей возникают на WordPress-сайтах. Классические тесты на таких страницах могут срабатывать некорректно. Дело в том, что работа большинства плагинов кэширования WordPress основана на серверном кэшировании. Так, для повышения скорости вызова все типовые запросы к БД хранятся на стороне сервера. Плагины WordPress хранят даже структуру блоков страницы. Такая перегруженность лишними деталями искажает работу капчи. Решается проблема просто — достаточно сменить капчу с серверной генерацией заданий на AJAX-капчу. Эта технология позволяет получать с сервера задания без перезагрузки всей страницы. По этому принципу работает новая версия Гугл-капчи — Google reCAPTCHA v2, или noCAPTCHA. Подключается она с помощью специального плагина Google Captcha (reCAPTCHA) by BestWebSoft.

Стандартная форма, созданная с помощью этого плагина будет выглядеть вот так:

источник

Всем привет! ?

Сегодня в продолжение разговора о том, что такое CAPTCHA и как заработать на капче, мы поговорим о том, как же её установить на свой сайт.

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

Поэтому сегодняшняя статья будет состоять из двух частей: установка reCAPTCHA от Google и того, как сделать капчу на PHP самостоятельно.

Указанные в статье примеры будут универсальные, без привязки к какой-либо платформе сайта, поэтому их можно использовать абсолютно на любом сайте, разработанном с использованием PHP и HTML.

Перед тем, как мы приступим к практике, немного теории о том, как работает капча, чтобы начинающим программистам и пользователям, не знакомым с программированием вообще, были понятны приведённые в статье действия по установке готовой и созданию капчи с нуля.

Если вы — опытный разработчик, то следующий абзац смело пропускайте.

Если изучить внимательно существующие сайты, использующие капчу, то заметно, что она размещается на различных HTML формах ресурса, необходимых для осуществления пользовательских действий.

Механизм работы HTML форм следующий:

  • пользователь вводит информацию в соответствующие поля;
  • нажимает на кнопку «Отправить» или с похожим названием, оформленную в виде HTML элемента input type=»submit»;
  • при этом данные формы отправляются на сервер, где происходят дальнейшие действия. Имя серверного скрипта прописано в атрибуте action HTML-тэга form.

При использовании CAPTCHA на форме, она является одним из полей, значение которому указывает пользователь при решении капчи.

Затем на сервере проверяется значение капчи с правильным ответом и если они совпадают, то действие, производимое пользователем с помощью формы, выполняется.

Если же нет — выдаётся сообщение о неправильном вводе капчи, а иногда ещё и происходит фиксация IP-адреса, с которого была произведена попытка ввода неверной CAPTCHA, с дальнейшим внесением его в blacklist и блокированием доступа как к сайту в целом, так и к отдельным элементам.

Читайте также:  Как осуществить личный визит к президенту

На таком принципе была основана работа самых первых, так сказать, «классических» капч, и он до сих пор успешно применяется.

Разнообразие в данный механизм вносят JS капчи, которые отправляют AJAX запрос на сервер для проверки правильности ввода в режиме «реального времени», т.е. без перезагрузки страницы. Ярким представителем JavaScript капчи является всем известная Google reCAPTCHA noCAPTCHA, об установке которой мы поговорим далее.

Итак, как работает капча, мы разобрались. Из её принципа работы следует, что сама реализации капчи CAPTCHA будет содержать клиентский код (HTML элемента капчи) и серверный (PHP скрипт, обрабатывающий ответ пользователя).

В случае использования сторонних решений вам, скорее всего, понадобится только клиентский код. Серверный может быть ограничен только лишь отправкой запросов на сторонний сервер для проверки правильности ввода (у той же самой Google reCAPTCHA v2).

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

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

Теперь самое время перейти от сухой теории к практическому применению полученных знаний и сделать капчу на PHP самостоятельно.

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

Она будет состоять из поля для ввода текста и кнопки «Отправить», между которыми в будущем мы будем размещать нашу капчу.

Внешне она выглядит следующим образом:

Для удобства разработки и демонстрации результатов я решил создать новый репозиторий на Github, в котором можно будет найти весь код, приведённый в данной статье.

Для каждой реализации капчи создан отдельный каталог с идентичной структурой.

Поскольку наша форма комментариев на момент разработки является самостоятельным решением, а не частью существующей страницы сайта, то для её запуска в каждом каталоге есть файл index.php. В нём же происходит вызов файла form.html, содержащего описанный выше код.

Данная структура приложения была выбрана не случайно, т.к. она максимально соответствует реальным проектам, в которых html вызывается из PHP скрипта на сервере. Поэтому для интеграции кода капчи из статьи на свой сайт всё, что вам потребуется, — это скопировать form.html к себе на сервер, а код из index.php в свой серверный скрипт, вызывающий необходимую форму.

Или перенести содержимое вышеуказанных файлов в соответствующие.

Ну, а теперь приступаем к созданию капчи. Начнём с интеграции готовых сторонних решений, а далее я покажу, как сделать капчу на PHP своими руками.

Серверные скрипты были разработаны на PHP 5.6, но и на более поздних версиях (PHP 7+) с ними проблем не будет, т.к. я старался не использовать deprecated конструкции.

В качестве стороннего сервиса для установки капчи на сайт я решил использовать упоминавшуюся ранее Гугл рекапчу, которая на сегодняшний день является негласным стандартом CAPTCHA.

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

Для того, чтобы получить ключ reCAPTCHA, нужно создать Google-аккаунт, который даёт доступ ко всем сервисам данной компании (Youtube, Google диск, почта Gmail и др.) либо воспользоваться существующим (думаю, у большинства из вас он есть, если вы пользуетесь хотя бы одним из перечисленный сервисов).

После того, как вы залогинитесь в своём аккаунте, переходим на страницу https://www.google.com/recaptcha/admin, вводим название капчи (можно добавлять несколько CAPTCHA, поэтому имя нужно для банальной идентификации) и выбираем нужную версию reCAPTCHA.

Я лично рекомендую использовать вторую версию, которой является уже упоминавшаяся noCAPTCHA. Она как раз и является AJAX капчей, об особенностях которой мы также говорили. Первая версия рекапчи подойдёт любителям старой доброй графической капчи, для прохождения которой нужно вводить искажённые символы и цифры с картинок.

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

Нажимаем на кнопку «Регистрация» и попадаем на страницу управления созданной капчей с доступом к статистике её ввода, кодом reCAPTCHA и списком инструкций по установке reCAPTCHA на сайт.

Просто выполняем описанные шаги:

Добавление кода reCAPTCHA в виде поля на HTML форму описано достаточно подробно, поэтому не буду его ещё раз повторять. Просто выполните указанные выше инструкции.

В результате наша форма должна принять следующий вид:

Обратите внимание, что ваш сайт, на который вы добавляете reCAPTCHA, должен иметь доменное имя, указанное при её создании. Если оно будет отличаться от реального, использовать капчу не получится. Поэтому при настройке reCAPTCHA обязательно указывайте его корректно, даже в случае разработки на локальном веб-сервере.

Итак, HTML часть капчи завершена, настало время для серверной реализации. Как заметно из инструкции от Google, серверная проверка ввода капчи происходит следующим образом: после решения капчи пользователем результат отправляется на локальный сервер в виде значения параметра g-recaptcha-response.

Затем на локальном сервере нужно отправить POST-запрос на сервер reCAPTCHA, который уже и возвращает итоговый ответ: правильно ли была введена капча пользователем или он оказался роботом и не смог пройти все линии защиты.

Подробного примера реализации, как при установке reCAPTCHA на HTML форму, здесь у Google нет, т.к. неизвестно на каком языке написаны ваши серверные скрипты, а предоставлять примеры для всех существующих ныне серверных языков — это утомительно и долго, т.к. их около 20.

С целью упрощения жизни разработчиков существует масса библиотек для работы с reCAPTCHA, которые реализовывают АПИ для осуществления необходимых действий. PHP библиотека для работы с капчей предлагается даже самим Гуглом.

Но я не являюсь приверженцем их использования для таких простых действий, как банальная отправка запроса с одного сервера на другой, поэтому решил разработать PHP скрипт серверной реализации рекапчи самостоятельно.

Приведённый далее код можно найти в каталоге google_captcha публичного репозитория, ссылка на который была указана ранее.

Для отправки запроса на сервер Google для проверки правильности ввода PHP капчи был создан отдельный скрипт verify_captcha.php со следующим кодом:

Сперва в коде идёт проверка наличия параметра g-recaptcha-response в запросе, отправленном при подтверждении формы. Если же параметра нет, что равноценно отсутствию reCAPTCHA на форме, то скрипт завершает свою работу с соответствующим сообщением.

Далее мы отправляем POST запрос средствами PHP на сервер reCAPTCHA, как это требует Google, и анализируем полученный ответ, предварительно преобразовав его из JSON-формата в обычный объект.

Если ответ от сервера содержит параметр success со значением true, то всё прошло успешно. В противном случае ответ будет содержать параметр errors с указанием причины неудачного действия.

В итоге скрипт после завершения своей работы выводит на экран итоговое сообщение с текстом «Капча пройдена успешно!» в случае успешного выполнения серверного сценария и «Неверная капча!», если в процессе произошли какие-то ошибки.

При использовании приведённого примера интеграции Google reCAPTCHA в реальном проекте вместо сообщений должны быть прописаны необходимые действия.

Знаю, что я опоздал со своей статьёй, как минимум, лет на 10, когда капча только набирала обороты, практически каждый пытался написать капчу самостоятельно, и повсюду были примеры самописных реализаций.

Но тогда я ещё не занимался веб-программированием, поэтому алгоритмы работы капчи мне были неинтересны.

На данный момент готовых решений CAPTCHA существует великое множество, среди которых масса тщательно оттестированных и защищённых от всех существующих способов обхода реализаций.

Поэтому созданием самописок уже давно никто не занимается.

Но я всё же решил заняться собственной реализацией капчи, чтобы наконец разобраться с принципом её работы и познакомить вас с ним. Кроме того, мне была интересна реализация способов защиты от обхода капчи, с которыми я познакомил вас в предыдущей статье.

После того, как я замотивировался, осталось определиться с тем, на каком виде капчи остановиться, т.к. их существует великое множество.

Обычный чекбокс с надписью «Я не робот» или генерация математического примера показались мне слишком простыми в плане реализации, поэтому я решил остановиться на самом сложном — графической капче, для решения которой нужно правильно ввести символы, изображённые на картинке.

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

Для генерации картинок на PHP уже, конечно же, существует масса готовых библиотек и решений. Из-за них, кстати, о функциях PHP для работы с изображениями мало кто в курсе, т.к. всем нужно всё делать побыстрее, для чего библиотеки как раз и создаются ?

В силу приведённых причин я и решил «изобрести очередной велосипед» для реализации графической капчи, кодом которого с вами и хочу поделиться. Он доступен в репозитории данного урока в каталоге image_captcha.

Вообще-то, слово «изобрести» в моём случае тоже не совсем подходит, т.к. за основу я взял существующую реализацию с Хабра — https://habrahabr.ru/post/120615/, структурировав её код, убрав некоторые ошибки, переделав непонравившиеся мне моменты и добавив свои наработки.

Так что далее в статье и в репозитории на github вы найдёте плоды коллективного труда и можете поучаствовать в его доработке и развитии сами, если сочтёте нужным.

HTML код элемента CAPTCHA для интеграции капчи на форму будет следующий:

Его нужно добавить в нужное место вашей HTML формы на сайте. В моём примере он будет располагаться после textarea name=»comment».

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

Сперва я прописал генерацию символьной последовательности и самой картинки сплошным кодом, но потом решил его немного структурировать путём создания класса CaptchaValue с соответствующими методами. В итоге, captcha.php принял следующий вид:

Читайте также:  Как можно заморозить яблоки

При проектировании класса использовался интерфейс, содержащийся в файле CaptchaInterface.php, поэтому не забудьте добавить его на сервер, чтобы PHP не выдавал ошибки:

Файлы классов и интерфейса я вынес в отдельный каталог ‘classes’, который размещён на уровень ниже form.html и других файлов, расположенных в корне, поэтому либо сделайте как я, либо исправьте пути к файлам классов везде, где они подключаются в коде через PHP директиву include.

Сам класс CaptchaValue, код которого расположен в CaptchaValue.php, выглядит так:

Здесь без комментариев не обойтись, т.к. мы рассматриваем самый главный класс всего приложения.
Расскажу конкретно о каждом методе, начиная с самого главного, в котором происходит вся магия, — captcha_image().

Генерировать изображение капчи на PHP я решил следующим образом:

  • создаём изображение в памяти без сохранения на жёсткий диск;
  • задаём ему цвет фона;
  • наносим символы капчи, задавая им цвет, отличный от фона, и разные шрифты;
  • слегка поворачиваем символы под разными углами;
  • с целью усложнения распознавания капчи ботами наносим линии под символами и поверх них;
  • добавляем шум.

Теперь более подробно о функциях PHP для работы с изображениями, с помощью которых я реализовал задуманное.

За создание объекта изображения отвечает PHP функция imagecreatetruecolor(), которой я в качестве параметров передал размеры генерируемой картинки. В моём случае ширина изображения 150px и высотой 70px.

Сперва я попробовал использовать imagecreate(), но в данном варианте при каждой генерации изображения цвет фона принимал случайное значение, которое иногда плохо сочеталось с цветом символов, делая их нечитабельными. При использовании imagecreatetruecolor() цвет фона можно задавать.

Далее я указал толщину будущих наносимых линий с помощью imagesetthickness(), задав её 2 пикселя.

Для задания фона изображения я использовал PHP функцию imagefill(), в качестве аргумента которой был указан цвет, сгенерированный с помощью imagecolorallocate(). Цвет фона, как вы видите, динамический, т.е. каждый раз задаётся случайно.

Диапазоны цветовых каналов я подобрал таким образом, чтобы итоговый цвет был достаточно светлым, и символы капчи на нём были различимы.

Чтобы создать линии, которые будут под символами капчи, логично их нарисовать перед созданием самих символов. Поэтому это я и сделал с помощью функции PHP для рисования линий imageline(), у которой в качестве аргументов указаны координаты точек начала и конца каждой из них.

Значения также случайны, чтобы линии постоянно находились в различных местах. Так же случаен цвет каждой из них и их количество (в моём примере от 3 до 5 — больше делать не советую, т.к. будут ещё линии поверх символов).

Далее идёт посимвольная прорисовка строки $code, которая генерируется функцией generate_code() и передаётся в качестве аргумента в captcha_image().

Генерация самой случайной символьной последовательности происходит так:

  1. задаём строку символов, из которых будет состоять наша итоговая последовательность;
  2. из неё выбирается случайное количество символов (от 4 до 6 в моём случае);
  3. символы для верности ещё раз перемешиваются;
  4. полученная строка записывается в сессию методом session_write() в переменную $captcha_value, где попутно фиксирует время генерации PHP капчи в переменной $answer_time для дальнейшей проверки времени её ввода пользователем;
  5. функция возвращает итоговую строку символов для дальнейшего использования.

Теперь вернёмся снова в image_captcha() к циклу прорисовки символов случайной строки:

Для прорисовки символов я решил воспользоваться различными шрифтами. Они должны быть в виде ttf файлов, и для них был создан отдельный каталог, путь к которому задаётся в виде private свойства класса CaptchaValue font_dir. Значение его задаётся в конструкторе.

Итак, получаем список файлов из указанной директории с помощью PHP scandir() и записываем результаты в массив $font_arr. В переменной $font_size у нас будет храниться случайно сгенерированное значение размера шрифта, а в $x — случайное значение, которое будет использоваться для вычисления позиции символов нашей строки на изображении.

Итак, сам цикл, где происходит перебор всей сгенерированной случайной строки, которую мы отрисовываем.

Первая же строка цикла $x += 20; вычисляет положение текущего символа на изображении. Если хотите расположить символы ближе/дальше друг от друга, то изменения стоит вносить в данную строку. Можете даже сделать шаг случайным значением, но тогда есть вероятность, что символы будут попросту перекрывать друг на друга.

На следующей строке мы выбираем символ из строки, далее заново генерируем для него цвет и получаем идентификатор шрифта в массиве для получения доступа к нему.

Наносим символ на изображение с учётом всех полученных до этого данных PHP функцией imagettftext(), которая позволяет делать это с применением ttf шрифтов, что, отражает её название.

О назначении каждого её параметра можете прочитать в официальной документации PHP, я же хочу обратить внимание на третий, которому я указал значение rand(-10, 10).

Это — угол поворота символа. Если хотите, чтобы все были строго вертикальными, то укажите вместо моих данных 0, но не рекомендую, т.к. эта, с виду, простая мера способна усложнить жизнь хакерам и создаваемым ими ботам.

Рассмотрим оставшийся код метода captcha_image().

После нанесения строки на изображение, следуя алгоритму генерации капчи, следует нанесения шума на полученное промежуточное изображение. Я решил сделать это после прорисовки символов, т.к. он позволяет сделать в буквах своеобразные «дыры», что ещё больше усложнит распознавание капчи OCR.

Сперва мы генерируем число точек, которыми будем создавать шум (в моём случае их будет от 2000 до 4000, что для картинки 150х70 в самый раз).

Затем генерируем цвет каждой точки заново (без этого можно обойтись, задав всем одинаковый, например, белый) и наносим её на изображение с помощью стандартной PHP функции imagesetpixel().

После данного преобразования я ещё раз наношу линии уже поверх нарисованных символов описываемым ранее способом: в цикле по количеству линий с помощью функции PHP imageline(). Цвет каждой снова генерируется случайным образом.

Осталось только вывести её на экран в окне браузера с помощью PHP функции imagepng(), для чего браузеру передаются соответствующие заголовки с помощью PHP header(), и очистить память сервера от изображения, которое мы генерировали, с помощью PHP imagedestroy().

В итоге, у нас получилось сделать капчу, которая выглядит следующим образом:

Для ещё большей защиты от взлома я решил добавить в данную реализацию генерируемое название поля для ввода значения капчи, чтобы хакерам было сложнее вводить её автоматически.

За генерацию отвечает класс CaptchaField, описанный в скрипте classes/CaptchaField.php, а именно его метод generate_code(), который вызывается в главном файле, запускающем всю реализацию как самостоятельный сайт, index.php:

Как видите, сгенерированное значение записывается в переменную $captcha_code, которая затем выводится в HTML коде нашей формы комментариев вместо имени поля для ввода капчи:

Сам класс CaptchaField выглядит следующим образом:

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

Поскольку данный класс реализует интерфейс CaptchaInterface, то должен переопределять его методы generate_code() и session_write().

В данном классе, как и в случае CaptchaValue, они отвечают за генерацию кода и запись его в сессию, соответственно. Только код в данной ситуации у нас другой.

Для генерации имени поля для ввода капчи я решил использовать PHP функцию uniqid для генерации случайного идентификатора. Первый параметр функции пустой, т.к. я решил обойтись без строчного префикса, а второй — true, что добавляет энтропию для увеличения уникальности значения и удлиняя его до 23 символов вместо 13.

Ну, и для большей секьюрности я решил ещё дополнительно применить двойное md5 шифрование. В результате, метод generate_code() класса CaptchaField вернёт следующее значение, предварительно записав его в переменную сессии captcha_field:

Итак, сама PHP CAPTCHA и сгенерированное имя поля для её ввода готовы.

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

За проверку, как и в случае реализации Google noCAPTCHA reCAPTCHA, которая была приведена выше, отвечает серверный скрипт verify_captcha.php.

Поскольку я решил структурировать данную реализацию путём создания классов, то verify_captcha.php выглядит так:

Сам же класс CaptchaVerify выглядит следующим образом:

Главным его методом является verify_code(), который и вызывается в verify_captcha.php.

В нём сперва происходит чтение данных из сессии (сгенерированного значения капчи и поля для её ввода, а также время генерации картинки CAPTCHA на сервере), а затем происходят проверки на содержание в сессии соответствующих значений и наличие среди параметров запроса имени submit кнопки формы, что свидетельствует о том, что пользователь вводил код через форму вручную, а не программно.

Далее мы вычисляем время, потраченное пользователем на ввод капчи на основании текущего времени в момент проверки введённого значения и времени генерации капчи. Если оно меньше 6 секунд, то с большой вероятностью капчу вводили программно без соблюдения таймаутов.

Поэтому в таком случае скрипт завершается с соответствующим сообщением об ошибке «Вы или робот или вводите капчу слишком быстро!». Кстати, данный текст подскажет реальным пользователям, которые вводят PHP CAPTCHA слишком быстро, делать это медленее, чтобы их старания были засчитаны.

Ну, а затем мы проверяем введённое значение капчи из запроса с тем, которое было сгенерировано изначально и записано в сессию. Поскольку перед записью в сессию значение шифровалось, то мы то же самое делаем и со значением пользователя, после чего сравниваем их.

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

Во всех остальных случаях выдаются сообщения об ошибке с соответствующими текстами с помощью функции error_msg(), которая помимо завершения выполнения скрипта ещё и фиксирует в сессии попытку неверного ввода по IP клиента.

Если таковых наберётся больше 10, то выполнения действия невозможно будет даже при правильном вводе капчи. Для разблокировки нужно будет написать администратору, чтобы тот сбросил счётчик.

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

Читайте также:  Как правильно сформировать крону яблони

Поэтому на практике используйте вариант с БД. В сессию запись была сделана в качестве демонстрации данной возможности.

Или вообще можете отказаться от данного способа защиты капчи от взлома, если считаете его слишком жёстким. Всё в ваших руках ?

Для этого я, собственно говоря и описал весь код подробно, чтобы даже люди, не знакомые с программированием, смогли бы его настроить под свои нужды.

Надеюсь, я ответил на вопрос о том, как сделать капчу на PHP. Причём поделился с вами аж двумя вариантами.

Честно скажу, что реализованная мною графическая капча не является бронебойной и 100% защиту от всех современных способов взлома не предоставляет. Повторюсь, мне была интересная её реализация только с точки зрения практического применения способов защиты от обхода капчи и хотелось вспомнить возможности PHP для работы с изображениями.

Своей цели я достиг. А если ещё и смог быть вам полезным своим трудом — для меня будет вдвойне приятно ?

Если вы планируете устанавливать капчу на реальный проект, то рекомендую воспользоваться всё-таки готовыми и оттестированными решениями. Той же самой Google reCAPTCHA, порядок установки которой описан в первой части статьи.

Мой код будет полезен больше таким же разработчикам, каковым я сам являюсь. Кстати, надеюсь на вашу помощь при тестировании приведённого кода и ценные замечания по поводу его недостатков, которые вполне могут присутствовать.

Поэтому пишите свои отзывы в комментариях под статьёй: что понравилось, что не понравилось, что можно улучшить.

Очень надеюсь на вашу помощь и поддержку.

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться ?

источник

reCAPTCHA — это система, позволяющая установить защиту на сайты от ботов, а также помогающая Google в оцифровке старой литературы. Эта статья поможет вам понять что такое рекапча(капча) и расскажет как установить recaptcha на сайт.

reCAPTCHA — это продолжение проекта CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) — полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей) — компьютерный тест, используемый для того, чтобы определить, кем является пользователь системы: человеком или компьютером. Основная идея теста: предложить такую задачу, которая с лёгкостью решается человеком, но крайне сложна и трудоёмка для компьютера.

После обновления в 2015 пользоваться ReCAPTCHA (No CAPTCHA ReCAPTCHA) стало гораздо проще. Теперь достаточно поставить галочку «Я не робот» / «I’m not a robot»:

Кстати, сейчас Google тестирует новую версию, именуемую reCaptcha Invisible.

Суть обновления в том, что теперь нет необходимости что-либо делать, чтобы подтвердить, что вы человек, если у «капчи» нет сомнений в вашей «человечности».

Проект находится на стадии бета-версии, но им уже можно пользоваться.

Как установить reCaptcha на сайт

Для установки reCAPTCHA на ваш сайт воспользуйтесь документацией от разработчиков Google. Там вы также найдёте дополнительные данные о персональной настройки reCAPTCHA. Для пользователей CMS Moguta ниже приведена подробная инструкция.

Мы покажем установку на примере формы обратной связи, однако данный метод будет работать и для других форм.

Шаг 1

  1. Заходим в административную панель;
  2. Настройки – Опции;
  3. Находим строчку «Использовать капчу»;
  4. Ставим галочку;

Шаг 2

Для начала вам понадобится API key, так что заходим сюда (Необходимо зарегистрироваться в Google) Вам будет предложено зарегистрировать свой сайт и домен. Они зарегистрируют указанный вами домен, а также все поддомены. Например, если вы укажете адрес domen.ru, они также зарегистрируют poddomen.domen.ru

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

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

  1. Заходим на хостинг;
  2. Переходим по адресу mg-templates/mg-default/;
  3. Находим файл template.php;
  4. в этом файле вставляем строчку в тег head:
  5. Переходим по адресу mg-templates/mg-default/views;
  6. Находим файл feedback.php;
  7. В этот файле находим форму;
  8. В форме удаляем стоковую капчу и заменяем ее на;

Теперь вы знаете как установить reCAPTCHA на сайт, а также на CMS Moguta. Если у вас появятся какие-либо вопросы пишите в комментариях, до новых встреч!

источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы увидите возвращенное значение для имени и 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 тег после формы:

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

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

источник

Adblock
detector