Создаем капчу для сайта

27 июля 2014 Антон Кулешов 3255 0

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

Реклама

При написании любого приложения, сначала необходимо наметить его логику. Заключаться она будет в двух файлах:

  1. В первом файле мы будем выводить капчу и проверять её на совпадение;
  2. Во втором файле будет находиться скрипт генерирующий её (капчу).

В скрипте нам необходимо будет работать с графикой, поэтому потребуется расширение php_gd2. Если оно у вас подключено, то можно начинать писать сам скрипт.

Написание скрипта

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

  1. $count_chars = 7, число символов в капче;
  2. $rand_size = rand(14, 30), случайный размер шрифта;
  3. $rand_angle = rand(0, 45), случайный угол наклона букв;
  4. $x = 20 и $y = 40, координаты букв;
  5. $shift_x = 35, смещение по x.

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

$img = imageCreateFromJPEG("bg.jpg");

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

$color = imageColorAllocate($img, 0, 0, 0);

Далее нам нужно сгенерировать случайную строку размером в 7 символов. Для этого можно использовать фикцию uniqid(), которая сама по себе возвращает уникальный id, но для большей уникальности я её оберну ещё в md5() и base64_encode(). В итоге всей этой магии получиться максимально уникальная строка с набором цифр, больших и малых букв. После этого остается обрезать её до нужного нам размера и сохранить в сессию.

$captcha = substr(base64_encode(md5(md5(uniqid()))), 0, $count_chars);
$_SESSION["captcha"] = $captcha;

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

Для от-рисовки мы будем использовать цикл for. При каждой итерации которого, будет вызваться функция imageTtfText(), смещая символ по координате x.

for($i = 0; $i < $count_chars; $i++){

	imageTtfText($img, $rand_size, $rand_angle, $x, $y, $color, "bellb.ttf", $captcha{$i});
	$x += $shift_x;
}

Картинка готова, теперь её надо передать на страницу, так как мы сгенерировал всё на лету обязательно нужно сообщить браузеру, что это изображение. Сделать это можно при помощи заголовков указав тип файла image/jpeg.

header("Content-Type: image/jpeg");

Для завершения работы вызываем функцию imageJPEG(), передав идентификатор и коэффициент сжатия. Второй параметр мы не будем использовать, так как в нём указывается путь до места сохранения файла.

imageJPEG($img, null, 60);

Проверка капчи

Выводить сгенерированную картинку мы будем при помощи HTML элемента img, указав в его атрибуте src путь до скрипта.

<img src="captcha.php" />

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

session_start();
if($_SERVER["REQUEST_METHOD"] == "POST"){
	if($_SESSION["captcha"] == $_POST["text"])
		$msg = "ок";
	else
		$msg = "ошибка";
}

После выводим сообщение в нужном месте.

<form action="" method="post">
	<img src="captcha.php" />
	<div>
		<label>Введите Капчу :</label>
		<input type="text" name="text" size="15" />
		<?php echo $msg; ?>
	</div>
	<input type="submit" value="OK" />
</form>

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

1em или 16px

31 октября 2015 Антон Кулешов

1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!

Подписываем фотографии

1 сентября 2015 Антон Кулешов

Фотографии на сайте делают его живым и интересным, порой бывает не лишним подписать места, события, а то и людей изображенных на фото. В свое время, опция отмечания друзей на снимках была невероятно популярно в социальных сетях. Если блог о путешествиях, кулинарный или любой другой, где изображений много и они собраны в галереи, то подписанные снимки будут выглядеть выигрышнее безымянных. Я же предлагаю для этих целей воспользоваться jQuery плагином taggd – скриптом, позволяющим сделать всплывающие подсказки для подписи фотографий.

О том, как запретить индексацию тегами и атрибутами

4 июля 2015 ti1schweiger

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