Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

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


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


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


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


HTML картинок:

У картинок прописываем в значении 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 скрипт, создающий случайную картинку повёрнутую на случайный угол, для нашей капчи готов!



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


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


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

 
 

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


$(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





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

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

Передача массива через сессии

Задача: Пусть есть массив $arr, определённый на странице 1.php. Отобра...

Категория: PHP  Подкатегория: Задачи
Дата: 15-01-2018 в 16:47:34 1



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота. Расположите картинки горизонтально:


Последние
видео:



Шейкер-сортировка (С#)
ОГЭ по информатике. Задание 18


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy


Препод напал на тебя как вампир? Не бойся! Студланс защитит этот мир!