Сегодня разберём, как сделать собственную капчу на 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′ style=’color:blue;’>»image1″> td> td> img src = ‘image.php?2′ style=’color:blue;’>»image2″> td> td> img src = ‘image.php?3′ style=’color:blue;’>»image3″> td> tr> tr> td align=’center’> input type=»range» name=’r1′ min=»0″ max=»360″ step=»36″ value=»72″ style=’color:blue;’>»r1″> td> td align=’center’> input type=»range» name=’r2′ min=»0″ max=»360″ step=»36″ value=»72″ style=’color:blue;’>»r2″ > td> td align=’center’> input type=»range» name=’r3′ min=»0″ max=»360″ step=»36″ value=»72″ style=’color:blue;’>»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.
На этом всё! Теперь, думаю, вы без проблем сможете встроить на свой сайт эту красивую и интересную защиту от роботов. Скачать эту отличную капчу можете по ссылке ниже.
Источник: code-enjoy.ru
Как установить и настроить капчу?
Добрый день, друзья! В этой статье речь пойдёт о капчи (captcha). Я расскажу Вам, как «прикрутить» капчу практически к любой форме Вашего сайта. Как настроить капчу, изменить цвет фона, цвет символов, размеры капчи и т.д. Внимание, капча (captcha) работает на php.
После написания статьи: «форма обратной связи без перезагрузки страницы», к ней появилось огромное количество комментариев, большинство вопросов касалось темы капчи. В итоге эта статья будет своеобразным ответом для всех, кого интересует тема установки и настройки капчи (captcha) и продолжением статьи: «форма обратной связи без перезагрузки страницы».
Итак, начинаем работу! Для начала я покажу Вам, что у нас должно получиться. Внешний вид формы обратной связи с установленной капчей: 
Если посетитель Вашего сайта не заполнил поле формы «введите буквы» или ввёл некорректные данные, то появляется сообщение об ошибке.
Символы капчи при этом меняются на другие. 
Если же все поля были заполнены верно, буквы капчи, введённые посетителем, соответствуют буквам на картинке, то инфу из формы успешно отправляем на Ваш e-mail. Выводим посетителю сообщение об успешной отправке и меняем буквы капчи снова.
Думаю, теперь можно переходить непосредственно к коду. Я постараюсь максимально подробно и последовательно объяснять каждый шаг установки капчи на форму обратной связи. В корне Вашего сайта создайте каталог (папку) с названием «captcha», в нём будут находиться два файла: captcha.php – скрипт генерации капчи и verdana.ttf – файл шрифта капчи. Пишем php-код скрипта генерации капчи, файл captcha.php, в коде даны пояснения относительно настроек генерации картинок капчи.
session_start(); $string = «»; for ($i = 0; $i < 5; $i++) $string .= chr(rand(97, 118)); //или $string .= mt_rand(1, 9); если Вы хотите чтоб были цифры $_SESSION[‘rand’] = $string; $dir = «»; $image = imagecreatetruecolor(85, 25); //размер создаваемой картинки $color = imagecolorallocate($image, 137, 15, 200); //цвет букв или цифр картинки $white = imagecolorallocate($image, 246, 246, 246); //цвет фона картинки imagefilledrectangle($image,0,0,399,99,$white); imagettftext ($image, 17, 0, 10, 20, $color, $dir.»verdana.ttf», $_SESSION[‘rand’]); header(«Content-type: image/png»); imagepng($image);
Теперь переходим к html-коду нашей формы. Нам необходимо после поля «Ваш e-mail» вставить html-код изображения и поля для ввода данных нашей капчи. Вот этот код:
Введите буквы:
А теперь html-код формы обратной связи с установленной капчей целиком:
Задать новый вопрос:
А сейчас, давайте, добавим css-стили для изображения и поля ввода нашей капчи, чтобы они выглядели аккуратно:
/* CSS стили длякапчи */ .input_capT < width: 98px; height: 20px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; >.input_capT input
Их мы добавляем в конец общей таблицы стилей для формы обратной связи файла style.css, приводить весь код здесь я не вижу смысла. С html-кодом мы разобрались, css-стили для капчи добавили, переходим к файлу js-form.js. Сначала разберём js-код, отвечающий за обновление символов капчи после каждого нажатия кнопки «отправить»:
var var captSRC = «captcha/captcha.php?id text-align: justify;»> Смысл здесь в том, что мы создаём переменную «id» и после каждого нажатия кнопки «отправить» присваиваем ей произвольное число. Во второй строчке создаём переменную «captSRC», куда заносим полный путь до файла генерации капчи captcha.php, а также передаём идентификатор «id» методом GET.
Далее создаём переменную «captcha» и присваиваем ей данные, которые ввёл посетитель:
var captcha = $(«#captcha»).val();
Сейчас нам необходимо обновить строку, отвечающую за отправку данных в обработчик send.php:
data: ,
И в конце скрипта js-form.js нам необходимо добавить строчку, отвечающую за обновление символов капчи, в не зависимости от полученных из обработчика данных.
$(«#capT»).attr(‘src’,captSRC);
Теперь полный JavaScript код выглядит так:
$(document).ready(function() < // Форма обратной связи с установленной капчей../ var regVr22 ; $(«#send»).click(function()< var var captSRC = «captcha/captcha.php?id=»+id; $(«#loadBar»).html(regVr22).show(); var posName = $(«#posName»).val(); var posEmail = $(«#posEmail»).val(); var posText = $(«#posText»).val(); var captcha = $(«#captcha»).val(); $.ajax(< type: «POST», url: «../send.php», data: , cache: false, success: function(response) < var messageResp ; var resultStat ; var oll = (messageResp + posName + resultStat); if(response == 1)< $(«#loadBar»).html(oll).fadeIn(3000); $(«#posName»).val(«»); $(«#posEmail»).val(«»); $(«#posText»).val(«»); $(«#captcha»).val(«»); $(«#capT»).attr(‘src’,captSRC); >else < $(«#loadBar»).html(response).fadeIn(3000); $(«#capT»).attr(‘src’,captSRC); >> >); return false; >); >);
Большая часть нашей работы закончена, мы можем смело перейти к изменению php-обработчика — файл send.php. Сейчас, давайте, поднимемся вверх по странице и ещё раз посмотрим на код файла captcha.php, в самом верху находится функция запуска сессии:
session_start();
Добавляем эту функцию в самый верх нашего обработчика файл send.php, капча работает на сессиях, поэтому их запуск сейчас нам необходим. Далее нам нужно обезопасить себя от вредоносного кода и проверить содержимое переменной $captcha специальными экранирующими функциями:
$captcha = addslashes($_POST[‘captcha’]); $captcha = htmlspecialchars($captcha); $captcha = stripslashes($captcha); $captcha = trim($captcha);
И осталось последнее изменение: выполнить проверку на правильность введённых символов капчи посетителем:
//Проверка правильности капчи! if ($captcha != $_SESSION[‘rand’])
Теперь полный php-код файла send.php с учётом всех изменений выглядит так:
Поздравляю, капча установлена на форму обратной связи. По такому же принципу эту капчу можно установить на любую другую форму Вашего сайта. Ниже, в конце этой статьи Вы можете скачать архив. В архиве Вы найдёте две папки, в одной находятся только файлы капчи, в другой файлы формы обратной связи без перезагрузки страницы с уже установленной капчей.
Теперь пару слов по настройкам капчи, по тому, что заранее предвижу вопросы в комментариях типа: — Как настроить Вашу капчу на моём сайте? Прошу Вас ещё раз внимательно посмотреть на код файла captcha.php, в нём даны комментарии к различным функциям скрипта. Внимание, цвет фона и символов капчи устанавливается в формате RGB. Где взять код цвета в RGB формате?
Я обычно использую для этого программу Adobe Photoshop. Вот, в принципе, и всё, мы с Вами установили капчу к форме обратной связи, а по настройкам капчи в общем-то ничего сложного нет. Если у Вас будут вопросы, пожалуйста, задавайте их в комментариях. В рубрику «Мотивация – путь к успеху» я выбрал такую картинку: Как Вам статья?
Надеюсь, тема: «как установить и настроить капчу?» была Вам интересна, и Вы нашли здесь для себя что-то полезное. Не забудьте подписаться на обновление моего сайта по e-mail.
Внимание! Всех приглашаю в свою группу Вконтакте ! Давайте делиться анонсами своих статей на стене этой группы! Думаю, она станет неплохим источником трафика для каждого блоггера!
Скачать бесплатно!
На этом всё. С уважением, Павел Макаров.
P.S. Буду рад комментариям к этому посту.
Источник: pavelmakarov.ru
Простейшая капча на PHP и GD
В этой статье, мы займемся внедрением капчи (случайно генерируемых изображений для проверки на то, кем является посетитель: человеком или роботом). Капча это необходимое зло, и в данной статье я научу вас как её можно сделать.
Замечу, что есть много сторонних, более мощных и автоматизированных решений, как например ReCaptcha , но данный урок нацелен исключительно на то, чтобы объяснить и продемонстрировать, как на самом деле работает данная технология.