Как се прави Captcha с Javascript и PHP

Тук ще опиша как се прави Capcha скрипт. Captcha е ефикасна защита от спам ботове, която използва картинка за потвърждаване. Този начин който ще опиша е доста семпъл, но го използвам в един мой сайт и се държи добре. Скрипта включва user side Javascript генератор на случайна комбинация от числа и букви, и server side PHP скрипт, на който се изпраща тази случайна комбинация, а скрипта генерира картинка с този код. По долу е показан Javascript кода:

<script type=“text/javascript“>

function captcha() {

var symbols = ‘a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ‘;
var rand;
var tmp = symbols.split(‘ ‘);
var str = “;

for(i = 0; i < 6; i++) {

rand = Math.floor(Math.random( ) * (tmp.length ));
str += tmp[rand];
}

$(‘captcha’).src=“captcha.php?string=“+str;
$(‘compare’).value = str;

}
function $(id) {
return document.getElementById(id);
}
window.onload = captcha;

</script>

Така. Сега е необходимо в html формата, към която ще се слага captcha да имаме едно hidden поле и една картинка <img/>, чийто стойности са празни отначало. Картинката <img/> трябва да има id captcha – <img src=“" alt=“" id=“captcha“ /> ето така трябва да изглежда този таг. Hidden полето трябва има id ‘compare’ – <input type=“hidden“ name=“compare“ id=“compare“ value=“" />.

$(‘captcha’).src=“captcha.php?string=“+str; – този ред взима <img тага и зарежда картинката посредством captcha.php, който ще опишем след малко

$(‘compare’).value = str; – този ред зарежда стойност на hidden полето.

Забележете, че Javscripta се извиква при window.onload event – тоест след като всичко друго се е заредило

Ето го и captcha.php

<?php

$code = strip_tags(mysql_real_escape_string( $_GET['string']);

$im = imagecreate(100, 30);

// white background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);

// write the string at the top left
imagestring($im, 5, 20, 5, $code, $textcolor);

// output the image
header(„Content-type: image/png“);
imagepng($im);
exit;

?>

Тук по GET се предава като параметър стринга, който ще бъде в картинката, след това се създава картинката посредством този ред – $im = imagecreate(100, 30); задава се background и цвят на стринга в картинката, след това с този ред imagestring($im, 5, 20, 5, $code, $textcolor); се записва стринга в картинката.

Пускаме хедър който указва какъв тип ще бъде тази картинка – в случая PNG.

Във формата, която ще се събмитва, също трябва да има едно текстово поле за въвеждане на този код генериран от картинката. Задайте му name attribute – check. <input type=’text’ name=’check’ />

След това като събмитвате формата и проверявате за непопълнени полета ( валидация ) трябва да проверите дали $_POST['check'] ( текста който потребителя е въвел ) съвпада с $_POST['compare'] ( текста, който се инициализира от javascript-a ).

Реално приложение на този скрипт можете да видите на адрес: http://seolinks.unone.org/addurl.html  security code полето. Това е ! Можете да се радвате на новата си антиспам защита

P.S. Този скрипт не е много security, можете да си направите някой функция на Javascript, която да криптира кода който изпраща към captcha.php

Подобни статии:

5 thoughts on “Как се прави Captcha с Javascript и PHP

  1. Здравей,
    струва ми се имаш сериозен пропуск в разбирането и ползата на captcha.
    Ползата от captcha е, че няма начин бота да разбере какво е нарисувано на картинка. В твоя случай бота може да генерира една и съща картинка, подавайки един и същи string към captcha.php.
    В твоя вариант изобщо няма смисъл от употребата на server side scripting – можеш да правиш директна проверка при клиента, тъй като при него се генерира и кода ;)
    Не препоръчвам употребата на горния скрипт! По-добрия вариант е при server side генерация на кода и пазенето му в сесия!
    Поздрави
    П.С. Надявам се съм бил полезен
    П.П.С. Без лоши чувства!

  2. :) Използвал съм и двата начина този е по бърз и лесен за разбиране и е моя интерпретация. Бота освен ако няма JS не може да изпрати POST заявката. И работи доста добре, спира спам-а използвам го на http://seolinks.unone.org, но пропуска 1-2 спам-а от 30-40 явно ботовете им са хитри:) Може да пусна и версия с AJAX + PHP и да пази в сесия или бисквитка информацията. BTW доволем съм от akismet.com
    Бота и да подаде стринг към captcha.php, пак му трябва Javascript, защото през JS се ъпдейтва полето
    <input type=”hidden” name=”compare” id=”compare” value=”“ />
    Поздрави, Манол Трендафилов

  3. По сабжу где можно зарегать дешевых RU доменов или скажите где вы хоть регистрируете, но желательно только не у самих регистраторов, больно уж дорого.

  4. Пич интересна идея за Captcha с javascript, но мога да ти напиша script който ще го хакне за 10-15 минути. По добре да се ползва изцяло server-side captcha

  5. @Георги, заповядай, хакни го :)
    Ползвам го в http://izbrano.net
    Не е Secure, но като съм го писал, идеята ми беше, че спам ботовете не могат да четат JS.

    Разбира се, сега не го използвам, а ползвам сесия.

Вашият коментар

Вашият email адрес няма да бъде публикуван Задължителните полета са отбелязани с *

*

Можете да използвате тези HTML тагове и атрибути: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>