Eğer server tarafını rahatsız etmeden sadece ön yüzde bir Google ReCaptcha uygulaması yapmak mümkündür. Dökümantasyonunda detaylı anlayılmayan Google ReCaptcha ASP.Net MVC ile uyumludur. Google ReCaptcha kullanımı aslında oldukça basittir.
Öncelikle Google ReCaptcha Kütüphanesini dahil ediyoruz.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Bunun ardından bir Google ReCaptcha API anahtarına ihtiyacımız var.
https://www.google.com/recaptcha/intro/index.html adresinden mail adresinizle oturum açıp bir API anahtarı edinmemiz mümkün. Anahtarı oluşturduktan sonra dikkat etmemiz gereken birinci nokta eğer kendi bilgisayarınızda çalışıyorsanız API ayarlarına "localhost" ibaresini, değilse çalışacak olan domain adrersini, örneğin "karayeltasarim.com" ya da "aspmvcnet.com" şeklinde eklememiz gerekir.
Ardından ReCaptcha'nın görünmesini istediğimiz yere şu div'i ekliyoruz.
<div class="g-recaptcha" data-sitekey="api_anahtari" data-callback="enableBtn"></div>
Edindiğimiz API Anahtarını yukarıda "api_anahtari" yazan yere eklememiz zorunludur.
Unutmayın: Kullanıcı robot değil ise, yani ReCaptcha'da gelen doğrulama true olarak dönüyorsa, çalışacak olan javascript fonksiyonu, enableBtn fonksiyonudur.
Ardından, formumuzu göndermeye yarayan submit butonunu, disable ederek, yani pasif hale getirerek kullanıcının formu göndermesini engelliyoruz.
<input type="submit" value="Gönder" id="button1" disabled>
Son olarak doğrulama true döndüğü zaman butonu aktifleştirecek bir JavaScript koduna ihtiyacımız var. Aşağıdaki kod ise bu durumu kontrol eder. Böylece Google ReCaptcha soruglaması tamamlanmış olur.
function enableBtn() {
$("#guvenlik").val("guvenlik+Dogrulama");
}
$("#gonder").click(function () {
$("#form2").submit(function (event) {
if ($("#guvenlik").val() === "guvenlik+Dogrulama") {
$("#mesaj").text("Başarılı! Lütfen Bekleyiniz...").show();
$('#gonder').attr("disabled", true);
return;
}
$("#mesaj").text("Doğrulama Başarısız...").show().fadeOut(3000);
event.preventDefault();
});
});