Делаем капчу на PHP

Сегодня разберём, как сделать собственную капчу на PHP и JavaScript своими силами. Данной теме посвящена и предыдущая статья. А сегодня рассмотрим исходный код данного модуля. Результат работы капчи, которую мы сегодня создадим, вы можете пронаблюдать после каждой статьи моего сайта Code-Enjoy.ru.

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

Шаг первый. Нам необходимо выбрать случайную картинку и расположить её под случайным углом.

<form method='POST'>
<div style='border:1px solid gray; padding:50px;'>
<table border="0">
	<tr>
	  <td>
		<img src = 'image.php?1' id="image1">
	  </td>
	  <td>
		<img src = 'image.php?2' id="image2">
	  </td>
	  <td>
		<img src = 'image.php?3' id="image3">
	  </td>
	</tr>
	<tr>
	  <td align='center'>
		<input type="range" name='r1' min="0" max="360" step="36" value="72" id="r1">
          </td>
          <td align='center'>
		<input type="range" name='r2' min="0" max="360" step="36" value="72" id="r2" >
          </td>
          <td align='center'>
		<input type="range" name='r3' min="0" max="360" step="36" value="72" id="r3" >
          </td>
       </tr>
</table>
</div>
<input type='submit' value="ок" >
</form>

У картинок прописываем в значении src путь к php скрипту image.php, попутно, передавая разные значения GET, чтобы скрипт мог отличить одну картинку от другой. Ползунки делаем c помощью тега input, прописав тип "range".

Значение данного тега будет угол поворота. Чтобы мы смогли полностью прокрутить картинку, устанавливаем атрибут min в 0, а атрибут max в 360. Шаг step устанавливаем 36 градусов - это на сколько поворачивается картинка при самом маленьком передвижении ползунка. Начальное значение 72, чтобы ползунок не был на самом краю.

Теперь переходим к скрипту image.php.

   header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");                   
   header("Last-Modified: " . gmdate("D, d M Y H:i:s", 10000) . " GMT");
   header("Cache-Control: no-store, no-cache, must-revalidate");         
   header("Cache-Control: post-check=0, pre-check=0", false);           
   header("Pragma: no-cache");                                           
   header("Content-Type:image/png"); 
   define("SECRET", "kldfjglkjhlsdfbd");
   
   $rand = mt_rand(1,310);
   $filename = 'icons/'.$rand.'.png';
	

    $rotang = 36 * mt_rand(1, 9); // Rotation angle
	
	if(isset($_GET['1'])) 
	{
		$cookie1 = md5(SECRET.$rotang.SECRET);
		$cookietime = time()+5000; // Можно указать любое другое время
		setcookie("captcha1", $cookie1, $cookietime);

	}
	
	if(isset($_GET['2'])) 
	{
		$cookie2 = md5(SECRET.$rotang.SECRET);
		$cookietime = time()+5000; // Можно указать любое другое время
		setcookie("captcha2", $cookie2, $cookietime);

	}
	
	if(isset($_GET['3'])) 
	{
		$cookie3 = md5(SECRET.$rotang.SECRET);
		$cookietime = time()+5000; // Можно указать любое другое время
		setcookie("captcha3", $cookie3, $cookietime);

	}
	
	
	
    $source = imagecreatefrompng($filename);
    imagealphablending($source, false);
    imagesavealpha($source, true);

    $rotation = imagerotate($source, $rotang, imageColorAllocateAlpha($source, 0, 0, 0, 127));
    imagealphablending($rotation, false);
    imagesavealpha($rotation, true);


    imagepng($rotation);
    imagedestroy($source);
    imagedestroy($rotation);

Первые 5 строчек запрещают кеширование картинки. Так же, в заголовках укажем Content-Type:image/png, это будет означать, что результатом работы скрипта будет картинка формата png.

Далее устанавливаем константу SECRET, которая будет участвовать при шифровании ответа (случайного угла, на который повернулась картинка).

Функция mt_rand(1, 310); выбирает случайную картинку из папки icons. В данной папке должны находится картинки пронумерованные по порядку в формате png. В моём случае в папке находятся 310 картинок.

Находим случайный угол поворота $rotang = 36 * mt_rand(1, 9).

Последующие строчки принимают параметры GET от каждой картинки, шифруют угол поворота и записывают его в куку. Для первой картинки - ответ будет записан в куку с именем "captcha1", для второй в "captcha2", для третьей в "captcha3" соответственно.

После того, как угол сгенерирован, зашифрован и записан в куку пользователя - поворачиваем (строки 41-47) эту картинку на этот угол и выводим с помощью функции imagepng(). PHP скрипт, создающий случайную картинку повёрнутую на случайный угол, для нашей капчи готов!

Шаг второй. Пишем JavaScript для капчи.

Необходимо подключить библиотеки jquery и jqueryrotate

<script type="text/javascript" src="jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="jqueryrotate.2.1.js"></script>

Теперь сам скрипт

$(document).ready(function() {
	
	$('#r1').on('input keyup', function(e) {
		var angle1 = 0;
		angle1 = 1 * $("#r1").val() - 72;

		$("#image1").rotate(angle1);
	}); 
	
	$('#r2').on('input keyup', function(e) {
		var angle2 = 0;
		angle2 = 1 * $("#r2").val() - 72;

		$("#image2").rotate(angle2);
	});
	
	$('#r3').on('input keyup', function(e) {
		var angle3 = 0;
		angle3 = 1 * $("#r3").val() - 72;

		$("#image3").rotate(angle3);
	});
});

Обрабатываем событие - нажатие клавиши, берём значение с тега input и поворачиваем картинку на этот угол. Т.к. у нас сразу было значение 72 градуса, то необходимо эту величину отнять, чтобы у нас вращалась картинка, как по маслу :) Вопрос на засыпку: зачем перед тем как присвоить в переменную угол, происходит умножение на 1 ? JavaScript нашей капчи готов!

Шаг третий. Проверка!

  define("SECRET", "kldfjglkjhlsdfbd");

	$capcha_true = 0;
	
	if(isset($_POST['r1'])) {	
		if($_POST['r1']-72 < 0)
		{
			$rg1 =  md5(SECRET.(360  + $_POST['r1'] - 72).SECRET) ;
		}
		else {
			$rg1 =  md5(SECRET.($_POST['r1'] - 72).SECRET) ;
		}
		
		if(isset($_COOKIE['captcha1'])) {
			if($_COOKIE['captcha1'] == $rg1) {
				$capcha_true++ ;	
			}		
		}	
	}
	
	if(isset($_POST['r2'])) {		
		if($_POST['r2']-72 < 0)
		{
			$rg2 =  md5(SECRET.(360  + $_POST['r2'] - 72).SECRET) ;
		}
		else {
			$rg2 =  md5(SECRET.($_POST['r2'] - 72).SECRET) ;
		}
		
		if(isset($_COOKIE['captcha2'])) {		
			if($_COOKIE['captcha2'] == $rg2) {
				$capcha_true++ ;	
			}		
		}		
	}
	
	if(isset($_POST['r3'])) {
		
		if($_POST['r3']-72 < 0)
		{
			$rg3 =  md5(SECRET.(360  + $_POST['r3'] - 72).SECRET) ;
		}
		else {
			$rg3 =  md5(SECRET.($_POST['r3'] - 72).SECRET) ;
		}
		
		if(isset($_COOKIE['captcha3'])) {		
			if($_COOKIE['captcha3'] == $rg3) {
				$capcha_true++ ;	
			}		
		}	
	}
	
	//echo $capcha_true;

Если пользователь расположил картинки верно, то в переменной $capcha_true будет значение 3.

На этом всё! Теперь, думаю, вы без проблем сможете встроить на свой сайт эту красивую и интересную защиту от роботов. Скачать эту отличную капчу можете по ссылке ниже.

Скачать капчу от Сode-Enjoy

Счастливого программирования!

01-10-2018 в 16:43:52

Поддержать сайт:

Похожая статья: