Nis
15

Asp.Net’de Ajax kullanılarak CAPTCHA

captcha

CAPTCHA NEDİR?

Açılımı : Completely Automated Public Turing test to tell Computers and Humans Apart

Görüldüğü gibi bunu türkçeye çevirmek bile zor 🙂 Zaten çevirsek bile birçok insanın kafasını karıştıracağı kesin 😀

açıklaması biraz zor ama forumlarda vs lerde üye olurken size yukarıdaki resmi girin gibisinden şeyler isterler. İşin aslı biz buna güvenlik kodu (captcha) diyoruz. Bunun amacı ise son derece basittir. Siteye herhangi bir bot gelip sınırsız sayıda ilgili formu submit edebilir. Bu gibi durumlara engellemek için captcha kullanırız.

Bu işi güzel bir örnekle açıklayalım : Bir site yaptığınızı varsayalım. Siteniz üyelik kabul etsin. Eğer siz üyelik formuna captcha  koymaz iseniz. Bir bot gelip üyelik formunu binlerce kez doldurup o sayıda kullanıcı ekleyebilir. (Aslında çok hoş olurdu öle binlerce üye ama maksat sizin veritabanınızı şişirmek) :D.

Şimdi size güzel bir captcha kodunu anlatmaya çalışacağım…

sayfamıza eklememiz gereken ilk şey, captha yapacak olan sayfamızı ilgili sayfada referans göstermek;

<%@ Reference Page="~/SecureImg.aspx" %>

Bundan sonra yapacağımız ise  captcha resmini oluşturacağımız img tagini ve sayfa üzerinde javascript koduyla yenisini üretecek butonu oluşturmak;


<asp:Image ID="imgKod" runat="server" />
<input type="button" onclick="Kod()" value="Yenile" />

Bundan sonraki işlemimiz ise javascript kodumuzu yazmak olacak. Burada dikkat etmemiz husus ise, bu oluşturacağımız javascript kodunu sayfamızın sonuna koymamız gerektiğidir. Yoksa sayfa ilk açıldığında capthca resmi gözükmeyecektir.


<script type="text/javascript" language="javascript">
function Kod ()
{
var i = document.getElementById ('imgKod');
i.src = '<%=ResolveUrl("~/SecureImg.aspx")%>?r=' + Math.random ();
}

if (document.getElementById ('imgKod') != null)
{
Kod ();
}
</script>

İşte bu kadar 🙂 İnşallah işinize yarayan bir yazı olmuştur.

İlgili örnek projeyi indirmek için tıklayın.

25 yorum bulunmaktadır - “Asp.Net’de Ajax kullanılarak CAPTCHA”

  • gökhan yavaş 09 Aralık 2010, 11:25

    öncelikle paylaştığın için teşekkür ederim arkadaşım .

    ben yapmaya çalışıorum bişeyler 🙂 fakaat bende CAPTCHA resim çıkmıyor bir türlü çok uğraştır bir sorun yok lakin kodlarımıda sürekli inceledim gözden geçirdim birde sen bak bakalım 🙂

    .style1
    {
    width: 76px;
    }
    .style2
    {
    width: 78px;
    }
    .style3
    {
    width: 120px;
    }
    .style4
    {
    width: 400px;
    }
    .iletisim
    {
    color: #000;
    text-decoration: none;
    font-family: Arial;
    font-size:12px;
    }

    Adı Soyadı

    *

    E-mail

    *

    Web

    http://
    *

    Mesaj

    *

    function Kod()
    {
    var i = document.getElementById(‘imgKod’);
    i.src = ‘?r=’ + Math.random();
    }

    if (document.getElementById(‘imgKod’) != null)
    {
    Kod();
    }

  • Enes Pekkaya 09 Aralık 2010, 13:30

    Sorun javascriptinde. Image’ın src sinden “/Captcha/SecureImg.aspx” bunu çıkarttığın için hata oluşmuş. (Eğer sen “SecureImg.aspx” sayfasının yeri “Captcha” klaösürü değilse, ona göre yer belirtmen lazım)

    Olması gereken javascript aşağıdadır.

    function Kod ()
    {
    var i = document.getElementById (‘imgKod’);
    i.src = ‘/Captcha/SecureImg.aspx?r=’ + Math.random ();
    }

    if (document.getElementById (‘imgKod’) != null)
    {
    Kod ();
    }

  • gökhan yavaş 10 Aralık 2010, 13:58

    function Kod()
    {
    var i = document.getElementById(‘imgKod’);
    i.src = ‘?r=’ + Math.random();
    }

    if (document.getElementById(‘imgKod’) != null)
    {
    Kod();
    }

    kod bu şekilde bir değişiklik yapmadım ama bir türlü çalışmıyor yinede

  • gökhan yavaş 10 Aralık 2010, 13:59

    kod tam yazdığım şekilde çıkmıyor o yüzden anlaşamıyoruz 😀

    i.src = ‘?r=’ + Math.random();

  • Enes Pekkaya 10 Aralık 2010, 14:42

    🙂 tamam o zaman. Peki herhangi bir javascript hatası veriyor mu? Belki image taginin idsini (imgKod) yanlış yazıyor olabilirsin.

  • gökhan yavaş 13 Aralık 2010, 09:54

    herhangi bir hata gözükmüyor 😀 anlayamadım bir türlü 😀

  • enes 30 Mart 2011, 14:23

    merhabalar
    benim bi sorum olacaktı.
    ben bi iletişim formu hazırladım isim, mail ve mesaj kısımları var
    bu captcha kodunu kulladığımda istiyorumki güvenlik kodunu yanlış girerse kullaınıcı yollayacağı maili gelmesin.
    ben denedim.mesala güvenlik kodunu yanlış girince uyarı veriyor ama bana atılan mailde ageliyor
    bunu nasıl yapacağım.

  • Enes Pekkaya 30 Mart 2011, 14:49

    Eğer captcha yı kontrol ettiğin yerde fonksiyonu return; edersen aşağıdaki işleri yapmadan (Mail gönderme) o fonksiyondan çıkacaktır. Böylece sana mail gelmeyecektir. Yada if ile kontrol ettikten sonra eğer captcha yanlı ise hatayı bastır else ilede mail göndermesini sağlayabilirsin. Seçim senin 🙂

  • Nilay 12 Nisan 2011, 12:15

    Bende de resim görünmüyor 🙁 WEb sitesinin master page’ınde de form var server taraflı 1 form çalışabilie gibi bir uyarı geliyor. Onu silip çalıştırdığımda ise resimleri göremiyorum.

    function Kod() {
    var i = document.getElementById(‘imgKod’);
    i.src = ‘~/SecureImg.aspx?r=’+ Math.random();
    }

    function Kod() {
    var i = document.getElementById(‘imgKod’);
    i.src = ‘SecureImg.aspx?r=’+ Math.random();
    }

    her ikisini denedim ama sonuç alamadım 🙁 bu dosya ana dizinde.

  • Enes Pekkaya 12 Nisan 2011, 13:24

    Merhaba,

    SecureImg.aspx ana dizinde olduğundan emin iseniz image taginin idsinin “imgKod” olduğuna bakar mısınız? Eğer aynı değer değil ise güncellediğinizde captcha başarılı şekilde gözükmesi gerekmekte.

  • bener 28 Haziran 2011, 17:05

    merhaba. benim sorunum sizin yazdığınız kodlar ile alakalı değil farklı javascript kodları da denedim fakat bir türlü sorunumu halledemedim. sizin örneğiniz üzerinden anlatmam gerekirse

    document.getElementById(‘imgKod’) sürekli null geliyor.

    “Microsoft JScript çalışma hatası: ‘null’, null veya bir nesne değil” hatasını alıyorum. neden kaynaklanıyor olabilir?

  • bener 28 Haziran 2011, 20:04

    sayfam masterpage’e bağlı olduğu için contentplaceholder id’leri değiştiriyormuş. biraz geç de olsa farkettim. masterpage ile kullanacak arkadaş varsa

    document.getElementByID(”).src vesaire olarak kullanırsa sorun olmayacaktır.

  • Enes Pekkaya 28 Haziran 2011, 21:31

    Kendi cevabınızı kendiniz bulmuşsunuz 🙂

  • sd 09 Eylül 2011, 03:49

    framework 4.0 için bir çözüm yok mu acaba

  • Enes Pekkaya 09 Eylül 2011, 08:10

    Aslında captcha 4.0 içinde çalışmakta.

  • Semih Kırdinli 21 Mart 2012, 10:29

    Merhaba master page ile kullandığımda ben de resmi göremedim. Arkadaşın biri belirtmiş. src ile kullanılırsa sorun olmayacaktır diye. acaba tam olarak nasıl kullanabiliriz onu ? teşekkürler çok güzel bir uygulama olmuş.

  • Enes Pekkaya 21 Mart 2012, 20:42

    Semih hocam,

    büyük ihtimalle sorun imgKod isimli .net bileşenimizin ismini masterpage kendisine özgü bir id vermekte. Örn : content1_imgKod

    Siteni browserda açıp kaynağı görüntüle deyip ilgili image bileşeninin adını kontrol etmelisin. Aynı değil ise javascriptteki adını değiştirmen gerekmekte.

  • Semih Kırdinli 22 Mart 2012, 00:41

    Hocam çok teşekkürler ya eline sağlık. Oldu şimdi. Master Page img kontrolüne
    MainContent_imgKod olarak id veriyormuş. Javascript tarafında düzeltince sorun ortadan kalktı. Bloğunuzu bu günlerde takip ediyorum çok güzel ve yararlı içierikler var. Teşekkürler.

  • Enes Pekkaya 22 Mart 2012, 09:39

    Kolay gelsin 🙂

  • Cenk 14 Mayıs 2012, 07:56

    Merhaba Enes,

    Öncelikle böyle sade ve anlaşılır makale hazırladığın için teşekkür ederim.
    Uygulama örneğini ajax ile geliştirmiş olduğum bir kayıt formuna entegre etmeye çalışıyorum ama benim kayıt işlemim .aspx sayfa üzerinde javascript içerisinde gerçekleşiyor. Durum böyle olsunca session’a erişemiyorum ve if döngüsünü gerçekleştiremiyorum.

    Acaba bu sorunu nasıl aşabilirim bir fikrin var mı?

    Teşekkürler
    İyi çalışmalar
    Cenk

  • Enes Pekkaya 14 Mayıs 2012, 09:34

    Aslında captcha’nın mantığınıda ajax diyebiliriz. Sonuç itibariyle sayfanın sonuna eklenmiş olan javascript koduyla img taginin srcsine güvenlik kodunun gösterilmesini sağlıyoruz. Sessionda bu şekilde her seferinde değişmekte.

    Session oluşmadığından emin misiniz? Eğer güvenlik kodu ekranda görünmüyorsa session oluşmaz. Bir başka durum ise siz aynı session id’yle bir değeri set ediyor olabilirsiniz.

  • yenide 07 Haziran 2012, 23:45

    Bu zamana kadar bilgiyi kullanıp ta teşekkür ettiğim nadir insanlardansın.Teşekkürler 🙂
    Aslında diğerlerine de etmem lazım ama heralde gözümde çok fazla büyüttüğüm için kepçe konusunu :d

  • Yılmaz ÇAKIR 29 Ağustos 2012, 11:08

    Enes çok teşekkür ederim. Çok net bir şekilde güzel bir anlatım yapmışsın. Ama kendi siten için daha güzel bir captcha kullanmışsın bundan dolayıda sana teesüf ederim. 🙂

  • Solmaz 12 Kasım 2012, 11:08

    Enes Bey merhaba,

    bende sayfamda update panel ekledim ve bir dropdownlist postback yapıyor. Captcha kontrolüde update panel içerisinde. Bu dropdownlistin postback yapmasından sonra güvenlik resmi kayboluyor.

    codebehindde javascripti çalıştırmaya çalışıyorum oda olmuyor.

    Ne yapmam lazım??

  • Enes Pekkaya 15 Kasım 2012, 12:14

    Kodunuza bakmak gerekir fakat tahminimce ajaxcall yaptıktan sonra “Kod()” isimli js fonksiyonunu çağırdığınızda çalışması gerekmekte.

Yorum Yapın

 

Twitter'dan Takip Et! Twitter'dan Takip Et!

Etiketler

Son Yazılar

Son Yorumlar

Bağlantılar

Arşivler