ASP.Net ReCaptcha kullanımı

Asp.Net  Flash Bilgiler  Mayıs 29, 2015

Merhaba, bu yazımda yakın bir zamanda kullandığım recaptcha apisinin nasıl kullanılacağını sizinle paylaşacağım.

İlk olarak bilmemiz gereken şey recaptcha apisi google tarafından sunulmaktadır. Googlenin bu hizmetinden yararlanmak için https://www.google.com/recaptcha/ adresinden doğrulama uygulaması için bir kayıt oluşturmanız gerek. Siteye girdiğinizde hemen sağ üst köşede bulunan “get recaptcha” butonunu görebilirsiniz. Bu ekrana girip gelen forma bir tanım ve altında ki alana kullanacağınız site(ler)in adresini girmeniz yeterli olacaktır. Formun altında ki register butonuna tıkladıktan sonra size bir kaç bilgi verecek.

Site key: Server tarafında ki kodda kullanılacak şifre
Secret key: Browser tarafında ki kodda kullanılacak şifre

Bu iki bilgi bizim için yeterli. Şimdi örnek çalışmamız üzerinden gidelim. Örnek çalışmayı https://github.com/halityurttas/dotnetrecaptcha adresinden indirmeniz mümkün. Projede hem mvc hem de web form kullanılacaktır.

Projenin orjinal halini bozmadan hemen bir controller ekleyelim. Bunun için Controllers klasörüne sağ tıklayıp “Add Controller” yapıyoruz ve gelen ekrandan “MVC 5 Controller – Empty” seçiyoruz. TestController adını verip onaylıyoruz. Bu aşamada ilk olarak controller üzerinde çalışmıyoruz direk view üzerinde işleme başlıyoruz. Index actionımıza bir view ekleyelim ve viewdan içeriğine erişelim. Form kontrollerini koymayacağım amaç sadece recaptcha onayını almak aldıktan sonra forma istediğiniz şeyi yapabilirsiniz.

Sayfada captcha’nın görünmesini istediğiniz yere şu kodu yapıştırın, bunu nereden mi buldum tabi ki captcha kodu aldığımız yerde var 🙂 Unutmadan aşağıda belirttiğim yere sitedeki site keyi yazmanız şart. Benim secret keyim sizin domain de çalışmayacaktır 🙂

<div class="g-recaptcha" data-sitekey="GOOGLEDEKI SITE KEY BURAYA"></div>
<script src='https://www.google.com/recaptcha/api.js'></script>

2015-05-29 18_13_54-DotNetReCaptcha - Microsoft Visual Studio

Bu oldukça açıklayıcı oldu sanırım. Peki ekranda nasıl görünüyor hemen çalıştırıp bakalım.

2015-05-29 18_15_28-Index - My ASP.NET Application

Evet sayfaya ben robot değilim diyen bir kutu eklendi. V2 de olay çok daha güçlenmiş bunu belirteyim. Ah unuttuk formu nasıl post edeceğiz! Hemen form taglarını da ekleyelim view’a.

2015-05-29 18_18_36-DotNetReCaptcha - Microsoft Visual Studio

Evet artık viewimiz bu şekilde yani sayfada bir dene butonu da var. Şimdi server taraflı koda geldik. Controllerimize bir HttpPost annotation’lı Index action daha ekliyoruz. Şuna benziyor olması gerek

2015-05-29 18_21_26-DotNetReCaptcha - Microsoft Visual Studio

Şimdi bütün iş bundan sonra başlıyor. Ama öncelikle mvc ve web formda ortak kullanabileceğimiz bir yardımcı sınıf geliştirmekte fayda var sizde örnek projeyi indirip faydalanabilirsiniz de. Projemize sağ tıklayıp bir klasör oluşturalım Helpers adında ve bu klasörede sağ tıklayıp CaptchaHelper adında bir sınıf ekleyelim.

2015-05-29 18_25_12-DotNetReCaptcha - Microsoft Visual Studio

Sınıfımızda artık hazır hemen içeriğine bir oluşturucu ekleyip httpcontext nesnesini isteyelim.

private System.Web.HttpContextBase ctx;
 public CaptchaHelper(System.Web.HttpContextBase httpContext)
{
 ctx = httpContext;
}

Bu aşamada class içerisinde contextimizi de almış olduk. Bu ne işimize yarayacak tabi request nesnesine erişime yarayacak 🙂 Hemen bool döndüren bir Validate fonksiyonu oluşturalım. Burada doğrulama olayını gerçekleştireceğiz.

Fonksiyonumuzun ilk satırına formdan recaptchanın gönderdiği değeri alıyoruz.

string posted = ctx.Request.Form["g-recaptcha-response"];

Burada gönderilen form bileşenin adı google tarafından belirlenmiş. Bu aşamdan sonra bir request açıp gelen değeri göndermemiz gerek ki onaya sokalım. Ardına bu satırı da ekleyerek yapabiliriz. Unutmayın kendi secret keyinizi kullanmanız gerek, site keyle karıştırmayın.

System.Net.HttpWebRequest req = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(
 "https://www.google.com/recaptcha/api/siteverify?secret=6Lc8lwcTAAAAAIZI9aeiIQbJ0FXoElmYWemeGlgF&response=" + posted);

Bu aşamda da aldığımız değeri göndermeye hazır olduğumuzu ifade edelim. Yalnız şu anda göndermedik sadece ayarladık. Şimdi göndermek için request oluşturup responsuna bakmamız gerek.

System.Net.WebResponse response = req.GetResponse();

Evet bir webresponse miz var yani ordan gelen değeri okuyabiliriz. Requestle gönderdiğimiz değeri response ile alıyoruz. Direk okuma imkanımız yok çünkü response ve request nesneleri akış sağlar bu yüzden stram kullanmak gerek.

System.IO.StreamReader rdr = new System.IO.StreamReader(response.GetResponseStream());
string responseData = rdr.ReadToEnd();
rdr.Close();

Burada ilk olarak bir stream reader nesnesi ile response ın streamını aldık. Daha sonra gelen tüm veriyi bir stringe aktarmak için okuduk ve ardından streamı kapattık. Bu noktadan sonra streama ihtiyacımız yok işimiz google ile bitmiş oldu.

Gelen değer bir javascript dizesi olduğu için onu ayrıştırmamız gerekiyor. Hemen tanımı yüklenecek bir sınıf oluşturup işimize bakalım. Classın bittiği yere şu classı da ekliyoruz.

public class ResultTransfer
 {
 public string success { get; set; }
 }

success adında bir alan yeterli. Şimdi javascript serializer ile onu dönüştürmemiz gerek.

System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
string strSuccess = jss.Deserialize<ResultTransfer>(responseData).success;

Evet artık gelen değer elimizde hemen kontrol mekanizmasını kuruyoruz.

if (bool.Parse(strSuccess))
 {
 return true;
 }
 else
 {
 return false;
 }

Tamamdır artık bitti. Kodumuz şuna benzemeli.

2015-05-29 19_01_25-DotNetReCaptcha - Microsoft Visual Studio

Şimdi test etmenin zamanı geldi. Post olan actionu şu şekilde düzeltiyoruz.

2015-05-29 19_06_12-DotNetReCaptcha - Microsoft Visual Studio

Eğer capcamız doğru ise ekrana tamamdır yazsın değilse sayfayı tekrar getirsin. Nasıl fikir ama 🙂 tabiki siz doğru olduğunda işinize bakın 🙂 Bittimi olay? Hayır birde web form versiyonunu yapalım bakalım nasıl olacak.

Projenin ortasına bir test.aspx dosyası ekleyin. Bu arada unutmuşum mvc ile webform arasında bir context sıkıntısı var. Captcha helperimizi şu şekilde düzenliyoruz.

2015-05-29 19_21_21-DotNetReCaptcha - Microsoft Visual Studio

Şimdi sıra asp.net tarafına geldi. Oluşturduğumuz aspx sayfasının içine form taglarının arasına şunu ekliyoruz.

<div class="g-recaptcha" data-sitekey="6Lc8lwcTAAAAAC-Prj1Py8epgTnWbJhLJxnP3pkI"></div>
 <script src='https://www.google.com/recaptcha/api.js'></script>
 <asp:Button ID="btnsend" runat="server" Text="Gönder" OnClick="btnsend_Click" />
<asp:Label ID="lblResult" runat="server"></asp:Label>

Evet şimdi gelelim server tarafına. Hemen tasarım kısmına geçip butona çift tıklayın ve gelen fonksiyona şunu yazın.

Helpers.CaptchaHelper captha = new Helpers.CaptchaHelper(HttpContext.Current);
 if (captha.Validate())
 {
 lblResult.Text = "Tamamdır";
 }
 else
 {
 lblResult.Text = "Olmadı";
 }

Hemen test edelim.

2015-05-29 19_26_40-Mozilla Firefox

Evet çalıştı. Artık captcha olayını da çözmüş olduk. Şimdi proje örneğimizi edineceğiniz adresi yukarıda vermiştim. İsterseiz oradan projenin bir kopyasını indirerek ister helper sınıfı direk alıp kullanabilir isterseniz üzerinde çalışabilirsiniz.

Esenlikle kalın…

Bu yazı 52788 defa görüntülendi

“ASP.Net ReCaptcha kullanımı” için bir cevap

  1. Ekrem dedi ki:

    Teşekkürler, mvc mimarisi için güzel bir anlatım olmuş.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Yazar Hakkında

15 yıllık çalışma hayatında birçok proje geliştirmiş binlerce projeyi inceleme fırsatı bulmuş yazılım aşığıdır. İşini hobi olarak gören yazarımız iş hayatını profesyonelce zevkle sürdürmektedir.

Son Eklenenler