Собственная капча на PHP своими руками за 5 минут

Приветствую вас!

Итак, мы наконец-то решились защитить свои формы капчей, т.к. спамеры вконец достали тупым спамом.

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

Итак, в этом посте мы напишем собственный гибкий капча-механизм на 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

А теперь – пока, пока.
До свидания, до новых встреч, друзья!