MVC - Captcha Kütüphanesi Eklenmesi

Captcha, web uygulamalarında iletişim veya kayıt formlarında görebileceğimiz bir çeşit güvenlik yöntemidir. Kullanıcının gerçek olup olmadığını anlamamızı sağlarız ve spam oluşmasının da önüne geçmiş oluruz.

Captcha, rastgele belirtilen bir kodun kullanıcı tarafından girilerek doğrulama yapılmasını sağlayan bir işlemdir. Formda resim üzerinde harfler ve sayılardan oluşan bir kod düşünün ve yerleri karmaşık olsun. İnsanlar bu kodu görüp anlayabilirken özel programlar bunu anlayamazlar. 

Completely Automated Public Turing test to tell Computers and Humans Apart Captcha'nın açılımıdır.

CAPTCHA hakkında bu bilgilerden sonra MVC projemizde özel olarak oluşturulmuş Captcha kütüphanesini kullanalım. 

Öncelikle Visual Studio'da Boş bir MVC projesi ekleyelim. Sonra Nuget Package Manager'dan CaptchaMVC.MVC5 kütüphanemizi projemize dahil ediyoruz. Bu kütüphane bize captcha oluşturacak helper'ları içerir ve validasyonları yapmamızı sağlar.

 

Bu ekleme işlemlerini yaptıktan sonra uygulama yapabileceğimiz Controller, Model ve View'ları oluşturalım.
Bir iletişim formu yapacağız ve Model olarak ContactForm sınıfı oluşturalım.Bu sınıf Konu,Mail ve Icerik tutacak.

 public class ContactForm
    {
        [Required]
        public string Konu{ get; set; }
        [Required]
        public string Mail { get; set; }
        [Required]
        public string Icerik{ get; set; }
    }

Home Controller oluşturalım ve bu controller Index adında ActionResult döndüren bir metot kullansın. Index View'ini de oluşturalım.Modelimizi mutlaka belirtmeliyiz. Create ise iletişim formuna ait şablonumuzdur.

Index View'ı aşağıdaki gibi oluşacaktır. Bu view bizim iletişim formunun arayüzüdür. Model olarak ContactForm sınıfını aldı.

Captcha'ya ait Html Helper metodlarına erişebilmek için  @using CaptchaMvc.HtmlHelpers eklememiz gerekmektedir.

@model MVC_Captcha.Models.ContactForm

@{
    ViewBag.Title = "İletişim Formu";
}
@using CaptchaMvc.HtmlHelpers
<h2>İletişim Formu</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.Label("Konu", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Konu, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Konu, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("E-Mail", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Mail, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Mail, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("İçerik", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Icerik, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Icerik, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Cevabı Giriniz", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-5">
                @Html.Captcha(4)
                <br />
                <p class="text-danger">@ViewBag.ErrMessage</p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Home Controller'da captcha doğrulamasını yapacağımız Index Action'ı this.IsCaptchaValid() metodu ile doğrulama yapacağımız alandır.Eğer doğru ise kod bloğu içerisindeki kodlar çalışacakır. Senaryomuza göre iletişim formunda konu, içerik ve mail alınıp işlemler yapılabilir. Eğer doğrulama yapılmamışsa Kod Doğru Değil şeklinde uyarı verecektir. ViewBag ile Controller'dan View'a veri taşınmış olacaktır. CaptchaMvc.HtmlHelpers namespace'ni yukarıda tanımlamamız gerekir.

    public class HomeController : Controller
    {        
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(ContactForm c)
        {
            if (this.IsCaptchaValid("Doğrulama Kodunu Giriniz"))
            {
                ViewBag.ErrMessage = "Kod Doğru";
                return View();
            }
            ViewBag.ErrMessage = "Kod Doğru Değil";
            return View();
        }
    }

Uygulamızı çalıştırdıktan sonra Captcha'mız aşağıdaki gibi oluşacaktır.4 haneli bir karakter dizisinde oluşan captcha.

<div class="form-group">
            @Html.Label("Cevabı Giriniz", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-5">
                @Html.Captcha(4)
                <br />
                <p class="text-danger">@ViewBag.ErrMessage</p>
            </div>
</div>

@Html.Captcha(Karakter Sayısı) bu helper metodunda en az bir hane kullanarak oluşturacağımız karakter sayısını parametre olarak girebiliriz.Yukarıdaki captcha için 4 haneli bir dizi tanımladık ve
@Html.Captcha(4) dedik.

Matematik işlemi yaparak doğrulama yapabileceğimiz captcha

 <div class="form-group">
            @Html.Label("Cevabı Giriniz", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-5">
                @Html.MathCaptcha()
                <br />
                <p class="text-danger">@ViewBag.ErrMessage</p>
            </div>
</div>

@Html.MathCaptcha() helper metodu bizden matematik işleminin sonucunu bekler ve bize matematikte 4 işlemli bir soru sorar.

Özetle MVC projelerinde Captcha oluşturabilmek bu kadar kolaydır. Kütüphaneyi ekledikten sonra projemize entegre etmemiz gerekir. İki çeşit captcha gördük. MathCaptcha() ve Captcha()