Şimdi web sitelerimizin ziyaretçilerinin işini biraz kolaylaştırması açısından Ajax yardımı ile bir Captcha doğrulaması yapalım
Bu doğrulamada resimdeki karaktarlerin yanlış girilmesi durumunda form gönderilmeden önce bir uyarı çıkmasını sağlayacağız.
Örnek için : Ajax Captcha yı inceleyebilirsiniz. güvenlik kodunu yanlış girerek scriptin amacını görebilirsiniz.
Önce anasayfamızı yapalım;
<html>
<head>
<title>Ajax Captcha</title>
<script language="JavaScript">
var url = 'captcheck.php?code=';
var captchaOK = 2; // 2 - kontrol edilmedi, 1 - doğru, 0 - yanlış
function getHTTPObject()
{
try {
req = new XMLHttpRequest();
} catch (err1)
{
try {
req = new ActiveXObject("Msxml12.XMLHTTP");
} catch (err2)
{
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3)
{
req = false;
}
}
}
return req;
}
var http = getHTTPObject(); // HTTP objesini yarattık
function handleHttpResponse() {
if (http.readyState == 4) {
captchaOK = http.responseText;
if(captchaOK != 1) {
alert('Girdiğiniz kod yanlıştır. Tekrar deneyin');
document.myform.code.value='';
document.myform.code.focus();
return false;
}
document.myform.submit();
}
}
function checkcode(thecode) {
http.open("GET", url + escape(thecode), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function checkform() {
// İlk önce form doğrulaması
if(document.myform.req.value=='') {
alert('lütfen gerekli alanları doldurun');
document.myform.req.focus();
return false;
}
if(document.myform.code.value=='') {
alert('Lütfen resimdeki kodu girin');
document.myform.code.value='';
document.myform.code.focus();
return false;
}
// Ajax captcha doğrulaması
checkcode(document.myform.code.value);
return false;
}
</script>
</head>
<body>
<form action="landing.php" method="post" name="myform">
<table> <tr><td>Gerekli Alan:</td> <td><input type="text" name="req" value=""></td></tr> <tr><td>Opsiyonel
Alan:</td> <td><input type="text" name="opt" value=""></td></tr> <tr><td>Captcha
Resmi:</td> <td><img src="captcha.php" border="0"></td></tr> <tr><td>
Kod Doğrulama:</td> <td><input type="text" name="code" value=""></td></tr> <tr><td></td> <td>
<input type="submit" value="Formu Gönder" onclick="return checkform()"></td> </tr> </table> </form> </body> </html>Burada resim dosyamızın captcha.php tarafından yaratıldığını görebilirsiniz. Bu konuya birazdan değineceğim. Ancak şunu söylemeliyim ki captcha.php dosyası ile rasgele karakter ve sayıları bir arkaplan resmi üzerine yazdırabiliyoruz.Bu konu ile içli dışlı olanlar yukarıdaki kodların çoğunu biliyorlardır zaten.
Bu formda en önemli bölüm checkform() kısmıdır. checkform() ile form uygunluk işlemlerini (eksik alan) kontrol ettirebiliyoruz. Tüm bu kontrollerden sonra checkcode(). ile de resimdeki kodumuzun doğru olup olmadığına bakabiliyoruz.
Resimdeki kod
captcheck.php?code={resimdeki kod } ile captcheck.php adresine gönderiliyor ve kontrol ediliyor.
captcheck.php
<?php
// Session'ı başlatıyoruz
session_start();
// Kodun doğruluğunu kontrol ediyoruz
if(strtoupper($_GET['code']) != $_SESSION['secret_string'])
{
echo '0'; // Yanlış
} else {
echo '1'; // Tamam
}
?>Burada strtoupper() fonksiyonu ile kullanıcının kodunu alıyor ve session'daki değer ile karşılaştırıyoruz. Eğer yanlış ise "0" doğru ise "1" olarak belirtiyor. Captcha.php ile ilgili detaya girmeyeceğim. Aşağıda yer yer basit bir şekilde açıkladım. Buada ekteki dosyada bulunan captcha.png arkaplanını ve whisky.TTF fontunu kullandım.
<?php
//Captcha kodunu tutabilmek için session başlatıyoruz.
session_start();
// hangi karakterlerin olması gerektiğini belirliyoruz
// Captcha büyük harf küçük harf duyarlılığı olmayacak, ve bazı karakterlerden
// 'O' ve 'l' kaçınıyoruz.Bunlar kullanıcıların kafasını karıştırıyor
$charlist = '23456789ABCDEFGHJKMNPQRSTVWXYZ';
// Karakter sayısını belirliyoruz. Burada 5 kullandık
$chars = 5; $i = 0; while ($i < $chars) { $string .= substr($charlist, mt_rand(0, strlen($charlist)-1), 1); $i++; }
// Arkaplan resmimizden GD resmimizi oluşturuyoruz
$captcha = imagecreatefrompng('captcha.png');
// Rengini belirliyoruz
// Botlar tarafından okunması zor, ama
// insanlar tarafından basit olmalı
$col = imagecolorallocate($captcha, 240, 200, 240);
// TTF fontumuz ile yazdırıyoruz
imagettftext($captcha, 17, 0, 13, 22, $col, 'Whimsy.TTF', $string);
// Sessiona aktarıyoruz
$_SESSION['secret_string'] = $string;
// Sayfaya aktarıyoruz
header("Content-type: image/png");
imagepng($captcha);
?>Umarım işinize yarar
Kaynak : Tutorials, demos and projects in Ajax (XMLHTTPRequest) Programming
Ajax ile Captcha DoÄrulaması | Ucan.Gen.Tr
