Seo - Оптимизация на сайтове за търсачки
seo - оптимизация на сайтове за търсачки, статии

July 30th, 2007

Как се прави 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