Merhaba Arkadaşlar.

Bu yazımızda sizlere gelişmiş (arkaplan renginin rastgele, her harf/sayı farklı renk ve fontta) güvenlik kodu (captha) yapımını ve kullanımını anlatacağım.

Özellikleri:
- Her rakam rastgele fonttan seçilir ve rastgele bir renkte olur.
- Arka fon rastgele renkte olur.
- Javascript ile sayfa yenilemeden güvenlik kodunun yenilenmesi.
- Basit bir form ile güvenlik kodu kontrolu ile giriş yapılması.
- Uygulama örneğini indirebilme imkanı.

Uygulamadan görüntü:


Örnek captha(Sayfa her açılışında değişir):


Aşağıdaki kodları guvenlik_kodu.php olarak kaydedelim.
Kodların yanında açıklamalar yazmaktadır.

<?php   // kodlamaya başlıyoruz

 
     session_start(); //oturum başlangıcı

     

     # Dosyayı resim haline getirelim

     header ("Content-type: image/png"); //bu dosya artık png resim dosyası 

  

     #Bazı tanımlamalar

     define("DS", DIRECTORY_SEPARATOR); // windowsta -> \  , linuxta -> / | DS dedikmi kendi hangisi olduğunu seçiyor

  

     # Guvenlik kodu oluştur

     $kod   = substr(rand(),0,5); //rastgele 5 rakamlı güvenlik kodu

     $_SESSION["guven_kod"] = $kod; // güvenlik kodunu oturuma kaydet| Ben guven_kod diye kullandım istediğini yazabilirsiniz

 
     # Fontlar

     $fontk = "fontlar"; //fontların klasorunu yazınız

     $font  = array( //buraya rastgele seçilecek olan fontları diziyoruz

     "1.ttf",

     "2.ttf",

     "3.ttf",

     "4.ttf",

     "5.ttf" //en son fonttan sonra virgül koymuyoruz

     );

     

     # Resmı hazırla

     $resim = @imagecreate((strlen($kod)*20)+20,50); //kodun uzunluğuna göre resim alanı oluşturuyoruz 

         $a=rand(0, 150);  //arkaplan renk kodlarını ratgele seçtiriyoruz

         $b=rand(0, 180);  // Koyu renkler olması için bu şekilde ayarladım

         $c=rand(0, 94);   // 0-255 arasında istediğiniz değerleri verebilirsiniz

     imagefill($resim,0,0,ImageColorAllocate($resim, $a, $b, $c));   //resim alanını rastgele bir renge boyuyoruz

 
     # Güvenlik Kodunu Resme Yazdır

     for($i=0; $i < strlen($kod); $i++){ //güvenlik kodunu oluşturmak için döngü başlatıyoruz.

     shuffle($font); //fontları karıştırıyoruz

         $_a=rand(150, 255);   //metin renk kodlarını ratgele seçtiriyoruz

         $_b=rand(180, 255);   // açık renkler olması için bu şekilde ayarladım

         $_c=rand(94, 255);    // 0-255 arasında istediğiniz değerleri verebilirsiniz

     imagettftext($resim, 20, 0, 10+($i*20),35, ImageColorAllocate($resim, $_a, $_b, $_c), $fontk.DS.current($font),$kod[$i]);

     }

 
     # Resmi Ekrana Yazdır

     imagepng($resim);

     imagedestroy($resim);

?>
Aşağıdaki kodları index.php içine kaydedelim.

<? session_start(); //oturum ?>

<html>

 
<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Gelişmiş Güvenlik Kodu | R10.NET </title>

</head>

 
<body>

<?

if ($_GET['kont']=='rol') { //eğer kodu doğrulama sayfası çağrılmışsa

 
    $pass=$_SESSION["guven_kod"]; // guvenlik_kodu.php de oturuma kaydettiğimiz güvenlik kodu

    $kod=$_REQUEST['kod']; // forma girilen güvenlik kodu

    

    if ($kod==$pass) { ?>

    

    Tebrikler ! Güvenlik sınamasından geçtiniz !

    

    <?     }

    else {

    echo "> Tekrar Deneyiniz.. <";

    }

    } else { //normal index başlangıcı ?>

<font face="Tahoma"><span style="font-size: 14px">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script language="javascript">

    function degis(){

        var yenikod= "<p align='center'><font face='Tahoma'><span style='font-size: 14px'><img src='./guvenlik_kodu.php' /></span></font>";

        $("#kod").html(yenikod);

        return false;

    }

</script>

</span></font>

<form method="POST" action="index.php?kont=rol">

<div id="kod">

    <p align="center"><font face="Tahoma"><span style="font-size: 14px"><img src="./guvenlik_kodu.php" /></span></font></div>

<p align="center"><font face="Tahoma"><a href="javascript:;" onclick="degis();">

<span style="font-size: 14px">kodu değiştir</span></a></font><span style="font-size: 14px"><font face="Tahoma"><br/>

<font size="3">

<input style="width:170px;height:23px" name="kod" onfocus="this.value=''" value="    Resimdeki Kodu giriniz" /></font><br/>

<font size="3">

<input type="submit" name="submit"value="İstatistikleri Getir"></font>

</font></span></p>

</form>

<p align="center"><font face="Tahoma"><span style="font-size: 14px">

</span></font></p>

<? } //normal index bitişi ?>

</body>
</html>
Uygulama örneğine buraya tıklayak gidebilirsiniz.