Приветствую вас!
Итак, мы наконец-то решились защитить свои формы капчей, т.к. спамеры вконец достали тупым спамом.
Хотя я и не приветствую капчи, т.к. они вынуждают совершить лишние телодвижения, да и могут оттолкнуть потенциальных клиентов от заполнения наших форм, но в ряде случаев они бывают жизненно необходимы.
Итак, в этом посте мы напишем собственный гибкий капча-механизм на PHP, который мы сможем поставить на свои формы за 5-10 минут.
Наша капча будет состоять из заданных латинских букв и арабских цифр, может иметь нужную нам длину и дополнительные артефакты в виде наклонов и линий, затрудняющих сканирование капчи ботами. Все эти параметры легко задаются в серверном скрипте, который будет формировать и показывать капчу.
Капчу мы будем рисовать на движке PHP GD, и для этого нам потребуются шрифт(ы) – да, можно использовать несколько шрифтов для некого затруднения работы по обходу капч.
Создадим папку fonts и закинем туда парочку бесплатных TTF-шрифтов, например, liber-mono.ttf и liber-sans.ttf. Сразу замечу, что полный комплект файлов – скрипты и шрифты вы можете скачать по ссылке: https://beotiger.com/download/jcaptcha.
Напишем наш серверный скрипт, который будет создавать и отображать капчу, назовём его скажем, jcaptcha.php
Вот этот скрипт с подробными комментариями:
// зададим имя куки для сохранения в ней кода капчи define('CAPTCHA_COOKIE', 'imgcaptcha_'); /* Инициализируем генератор случайных чисел. Хотя в руководстве по PHP написано, что это делается автоматически каждый раз при запуске сценария, но... я им не верю 0_0 */ mt_srand(time()); /* Определим путь к папке со шрифтами и список имен файлов со шрифтами в ней - из этого списка каждый раз будем выбирать случайный шрифт */ define('PATH_TTF', 'fonts/'); $fonts = array('liber-mono.ttf', 'liber-sans.ttf'); /* Основные параметры капчи. Для поддержки разных параметров капчи здесь можно создать многомерный массив и обращаться к нему по индексу. */ $par = array( // ширина капчи 'WIDTH' => 120, // высота капчи 'HEIGHT' => 32, // размер шрифта на капче 'FONT_SIZE' => 14, // кол-во символов на капче 'CHARS_COUNT' => 5, // разрешенные символы капчи 'ALLOWED_CHARS' => 'ABCDEFGHJKLMNPQRSTUVWXYZ23458', // фоновый цвет капчи - белый в нашем случае 'BG_COLOR' => '#FFFFFF', // кол-во линий на капче 'LINES_COUNT' => 3, // толщина линий 'LINES_THICKNESS' => 2 ); /* Общие парметры капчи */ // цвета символов define('CODE_CHAR_COLORS', '#880000,#008800,#000088,#888800,#880088,#008888,#000000'); // цвета линий define('CODE_LINE_COLORS', '#880000,#008800,#000088,#888800,#880088,#008888,#000000'); // получаем цвета линий и символов в массивы для случайной выборки позднее $line_colors = preg_split('/,\s*?/', CODE_LINE_COLORS); $char_colors = preg_split('/,\s*?/', CODE_CHAR_COLORS); // создаем пустой рисунок и заполняем его белым фоном $img = imagecreatetruecolor($par['WIDTH'], $par['HEIGHT']); imagefilledrectangle($img, 0, 0, $par['WIDTH'] - 1, $par['HEIGHT'] - 1, gd_color($par['BG_COLOR'])); // устанавливаем толщину линий и выводим их на капчу imagesetthickness($img, $par['LINES_THICKNESS']); for ($i = 0; $i < $par['LINES_COUNT']; $i++) imageline($img, mt_rand(0, $par['WIDTH'] - 1), mt_rand(0, $par['HEIGHT'] - 1), mt_rand(0, $par['WIDTH'] - 1), mt_rand(0, $par['HEIGHT'] - 1), gd_color($line_colors[mt_rand(0, count($line_colors) - 1)]) ); // Переменная для хранения кода капчи $code = ''; // Зададим координату по центру оси Y $y = ($par['HEIGHT'] / 2) + ($par['FONT_SIZE'] / 2); // Выводим символы на капче for ($i = 0; $i < $par['CHARS_COUNT']; $i++) { // выбираем случайный цвет из доступного набора $color = gd_color($char_colors[mt_rand(0, count($char_colors) - 1)]); // определяем случайный угол наклона символа от -45 до 45 градусов $angle = mt_rand(-45, 45); // выбираем случайный символ из доступного набора $char = substr($par['ALLOWED_CHARS'], mt_rand(0, strlen($par['ALLOWED_CHARS']) - 1), 1); // выбираем случайный шрифт из доступного набора $font = PATH_TTF . $fonts[mt_rand(0, count($fonts) - 1)]; // вычислим координату текущего символа по оси X $x = (intval(($par['WIDTH'] / $par['CHARS_COUNT']) * $i) + ($par['FONT_SIZE'] / 2)); // выводим символ на капчу imagettftext($img, $par['FONT_SIZE'], $angle, $x, $y, $color, $font, $char); // сохраняем код капчи $code .= $char; } // сохраним капчу в куках для дальнейшей проверки setcookie(CAPTCHA_COOKIE, md5($code)); /* Посылаем сформированный рисунок в браузер и избавляемся от него, хотя сборщик мусора обычно это делает за нас */ header("Content-Type: image/png"); imagepng($img); imagedestroy($img); // Преобразуем HTML 6-символьный цвет в GD цвет function gd_color($html_color) { return preg_match('/^#?([\dA-F]{6})$/i', $html_color, $rgb) ? hexdec($rgb[1]) : false; }
Вот как выглядит сформированная данным скриптом капча (щёлкните на ней для смены кода):
Теперь для создании формы с капчей достаточно добавить в неё дополнительный инпут с произвольным именем и разместить капчу, например так:
<form action="go.php" method="post"> Введите имя: <input name="name"><br> Введите email: <input name="email"><br> Введите код с картинки: <input name="captcha"> <img title="Щёлкните для нового кода" alt="Капча" src="jcaptcha.php" style="border: 1px solid black" onclick="this.src='jcaptcha.php?id=' + (+new Date());"><br> <input type="submit" value="Отправить!"> </form>
А в скрипте go.php после получения данных с формы, но перед дальнейшей их обработкой нужно будет проверить код капчи, и если он не совпадает с заданным, вывести соответствующее сообщение и вернуться к форме, например, так:
// зададим имя куки для получения из неё кода капчи, // оно конечно же должно совпадать с соотв. именем в jcaptcha.php define('CAPTCHA_COOKIE', 'imgcaptcha_'); // заметим: поле `captcha` обязательно для заполнения if(empty($_POST['captcha']) || md5($_POST['captcha']) != @$_COOKIE[CAPTCHA_COOKIE]) die('Неверный код с картинки. Вернитесь и повторите попытку.');
Приведенный здесь код дан лишь для примера, в реальных условиях проверять капчу и выводить соотв. сообщение лучше ч/з AJAX, не покидая форму и не заставляя клиента каждый раз вводить одни те же данные по нескольку раз, с возможным таймаутом при превышении числа неудачных попыток для предотвращения брутфорс-атаки.
В заключении замечу, что не стоить создавать слишком сложных, плохо читаемых капч, т.к. это может отпугнуть клиентов от вашего сайта, а лучше в идеале совсем обходиться без капчи. Также стоит давать возможность сменить код капчи без перезагрузки страницы, как и продемонстрировано в нашем примере с формой, где обработчик onclick капчи обновляет её каждый раз, когда на ней щёлкают.
Итак, вы можете скачать полный комплект файлов данного примера – скрипты и шрифты по ссылке: https://beotiger.com/download/jcaptcha
А теперь – пока, пока.
До свидания, до новых встреч, друзья!
