Asp.NET MVC’de reCAPTCHA Entegrasyonu
Merhaba,
Yazılım dendiği zaman benim aklıma bilgiyi güvenli şekilde işleyen bir sistem gelmektedir. Aslında bunca zahmet, bunca dert bir bilgiyi dün ve bugünden daha güvenli bir ortamda nasıl işleyebiliriz sorunsalı üzerinedir. Hatta yazılımlarda güvenlik o derece ciddiyet gerektiren bir husustur ki, günümüzün devleri tarafından desteklenmekte ve üzerine dünyanın kullanabileceği teknolojiler üretilmektedir. İşte bunlardan biriside Google tarafından piyasaya sürülen reCAPTCHA teknolojisidir.
Google internette sözü geçen bir güç olması açısından interneti; öznel içerik ve doğru bilgi barındıran, güvenilir bir patform haline getirmek uğraşıyla birlikte biryandan da internet sitelerinin güvenirliliğinide destekleyen bir vizyona sahiptir. Bu gayesi reCAPTCHA şirketini yıllar önce satın almasından dolayı net bir şekilde görülebilmektedir.
reCAPTCHA teknolojisi ilk zamanlar bir bot tarafından okunması neredeyse imkansız metinleri kullanıcılara doğrulattırırken, günümüzde belli başlı sorular neticesinde resimsel işlemlerle doğrulatma mantığı gütmektedir. Hatasız kul olmaz mantığıyla olayı değerlendiren reCAPTCHA belli bir oranta hata payınada göz yummakta ve doğrulamayı geçerli görmektedir.
reCAPTCHA hakkında bu kadar genel kültür sanırım yeterlidir. Şimdi bir yazılımcı gözüyle konuyu değerlendirelim ve Asp.NET MVC mimarisinde reCAPTCHA entegrasyonunun nasıl yapıldığını adım adım ele alalım.
Öncelikle boş bir Asp.NET MVC projesi açalım ve ardından aşağıdaki talimatları sırasıyla uygulayalım.
Google reCAPTCHA’yı projenize entegre etmek istiyorsanız öncelikle projenizle ilgili bilgi vereceğiniz ve reCAPTCHA API’sine ulaşabileceğiniz adrese buradan erişebilirsiniz.
İlgili sitenin sağ üst köşesindeki “Get reCAPTCHA” adresine tıklayın.
Tabi ki de reCAPTCHA platformuna erişebilmek için Google oturumunu açmanız gerekecektir. Bu kısımları yaptığınızı varsayıyorum.
Açılan sayfada karşınıza “Register a new site” alanı gelecektir. Bu alandaki gerekli form, reCAPTCHA entegrasyonu için gerekli proje bilgisini almaktadır.
Yukarıdaki ekran görüntüsünde de gördüğünüz üzere; “Label” kısmı o an oluşturduğumuz reCAPTCHA uygulamasına isim vermemizi sağlamakta, “Choose the type of reCAPTCHA” kısmı ise kullanacağımız reCAPTCHA’nın tipini belirlemektedir. “Domains” kısmında ise bu uygulamanın hangi sitede kullanılacağını belirtiyoruz. Dikkat ederseniz biz şimdilik localde örneklendirme yaptığımız için “localhost” değerini belirtmiş bulunmaktayız. Projeyi publish ettikten sonra bu kısma gelip ilgili kısmı doğru web adresiyle değiştirebilirsiniz.
Velhasıl ilgili alanı doğru bir şekilde doldurduktan sonra “Register” butonuna basınız.
Bu aşamadan sonra karşımıza gelecek ekranda birçok bilginin yanında aşağıdaki ekran görüntüsünde olduğu gibi asıl bizi ilgilendiren alanlarda gelecektir.
Dikkat ederseniz “Site key” ve “Secret key” verileri birazdan programatik kısımda kullanacağımız ve bizim programımızla reCAPTCHA uygulaması arasında bağıntıyı kuracak verilerdir. “Client side integration” kısmı ise reCAPTCHA API’sinin yolunu ve uygulamayı getirecek html kodlarını bizlere sunmaktadır.
Artık reCAPTCHA uygulamasının ayarlarını yapmış bulunmaktayız. Şimdi sıra Asp.NET MVC projemizde inşaya gelmiştir.
Öncelikle yapmamız gereken Layout sayfamızda aşağıdaki API adresini <head>…</head> tagları arasına eklemektir.
<script src="https://www.google.com/recaptcha/api.js"></script>
Ardından reCAPTCHA uygulamasını getirecek olan aşağıdaki kodu ilgili alana ekleyiniz.
@using (Html.BeginForm("Post", "Home", FormMethod.Post))
{
<!--Kendi Site keyinizle değiştirin.-->
<div class="g-recaptcha" data-sitekey="6LeKKSMUAAAAANH-PmFcaKPBm5E79aZGX85RI4l2"></div>
<input type="submit" value="Post Et" />
<br />
@TempData["Message"]
}
Dikkat ederseniz bir form içerisinde reCAPTCHA kodu eklenmiştir. Birazdan butonu tetikleyeceğiz ve reCAPTCHA’yı doğrulayacağız.
Evet… Şuana kadar yapmış olduğumuz işlemler neticesinde projemizi derleyip çalıştırdığımız zaman reCAPTCHA’yı görebilmekteyiz.
Şimdide sıra programatik çalışmaya geldi.
Öncelikle projemizde JSON işlemleri yapılacağından ve bu işlemleri Newtonsoft kütüphanesiyle icra edeceğimizden dolayı ilk iş olarak aşağıdaki gibi Nuget’tan Newtonsoft kütüphanesini projenize entegre ediniz.
Ardından yapılacak Response’u karşılayacak aşağıdaki modeli oluşturun.
public class CaptchaResponse
{
[JsonProperty("success")]
public bool Success { get; set; }
[JsonProperty("error-codes")]
public List<string> ErrorCodes { get; set; }
}
Bu işlemden sonra “Home(Controller).cs” isimli controller sınıfımız içerisindeki “Post” action metodunun içinde aşağıdaki işlemleri yapın.(Bu metotta çalışmamızın sebebi, reCAPTCHA’nın bulunduğu formun bu metoda post edilmesidir.)
[HttpPost]
public ActionResult Post()
{
var response = Request["g-recaptcha-response"];
const string secret = "6LeKKSMUAAAAAC4s-mflMky8XggtaatxKcx-cQ1y";
//Kendi Secret keyinizle değiştirin.
var client = new WebClient();
var reply =
client.DownloadString(
string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));
var captchaResponse = JsonConvert.DeserializeObject<CaptchaResponse>(reply);
if (!captchaResponse.Success)
TempData["Message"] = "Lütfen güvenliği doğrulayınız.";
else
TempData["Message"] = "Güvenlik başarıyla doğrulanmıştır.";
return RedirectToAction("Index");
}
Bu işlemlerden sonra projenizi derleyip çalıştırdığınız vakit reCAPTCHA’nın çalıştığını göreceksiniz.
Umarım bol bol faydalanırsınız…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…
Çok işime yarayacak sağolun.
Teşekkürler.
Hocam merhaba, emeğiniz için teşekkürler. Örnek teki gibi kodları yapmış olmama rağmen gönder butonuna basıldığı zaman formu gönderiyor sonrasında doğrulama yapmadınız diyor. Doğrulama yapılmamış olmasına rağmen formu mail olarak gönderiyor. Konu hakkında yardımlarınızı rica ederim. Nerde hata yapıyorum acaba?
emeğine sağlık, teşekkür ederim paylaşımın için. nadir güzel insanlardansın.
Merhabalar sayın hocam,
Öncelikle derslerinizi ve yazılarınızı ilgileyle takip ediyorum. Yalnız burada son görselde verdiğiniz Request[“google-recaptcha-response”] bölümünde
“Cannot apply indexing with []to an expression of type ‘HttpRequest'” hatası alıyorum bilginize
Merhaba,
Öncelikle bilgilendirdiğiniz için teşekkür ederim.
Bu içeriğimiz 5 buçuk yıl önce yayınlandığı için o günkü harici yapılanmaların konfigürasyonları doğal olarak değişiklik gösteriyor olabilir.
Kolaylıklar dilerim…
Merhabalar sayın hocam,
o kısmı HttpContext.Request.Form olarak değiştirerek arkadaşlar hatayı çözülebiliyor. Aynı hatayı alan diğer arkadaşlar için faydalı olacaktır diye düşünüyorum. İyi günler 🙂
Bu kadar basit miydi ya 🙂
Katkı için teşekkür ederiz.
şu anda bu yönetgeleri uyguladığımızda captcha’yi işaretlemeden de formu post ediyor, bu yüzden çalıştıramadım ben