Даша: Спасибо:3
31-05-2023
Читать статью
Санечка: я ничего не учила) но буду надеятся что ..
30-05-2023
Мейнер Сяо: Удачи всем сегодня на экзамене ;)..
Сегодня разберём, как сделать собственную капчу на 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.
На этом всё! Теперь, думаю, вы без проблем сможете встроить на свой сайт эту красивую и интересную защиту от роботов. Скачать эту отличную капчу можете по ссылке ниже.