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.
Asp.NET MVC'de reCAPTCHA Entegrasyonu
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.

Asp.NET MVC'de reCAPTCHA Entegrasyonu

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.
Asp.NET MVC'de reCAPTCHA Entegrasyonu

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.
Asp.NET MVC'de reCAPTCHA Entegrasyonu

Ş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.

Asp.NET MVC'de reCAPTCHA Entegrasyonu

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…

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Erhan dedi ki:

    Çok işime yarayacak sağolun.

  2. Onur dedi ki:

    Teşekkürler.

Bir cevap yazın

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

*