Ajax İle Captcha Doğrulaması

doink · 1 14-06-2007, 13:22:55

Web siteleri ile uğraşan herkes Captcha'yı duymuştur sanırım. Spam botlardan korunmak için en etkili yollardan biri..
Ş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-Kodu:

<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- Kodu:

  <?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- Kodu:

  <?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

mehmet_can · 2 04-07-2009, 12:43:24

"......../captcha.php" grafik dosyası hatalı olduğu için gösterilemiyor.

KarGaMen · 3 04-05-2011, 13:07:57

konuyu hortlatıyorum ama uygulamayı yaptım ama kod doğru olsada olmasada benim login olabiliyorum.

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder