Asp.net Mvc 5’te reCaptcha Kullanımı

Captcha, web sitelerinin insanların kötü kullanımlarından korumak için geliştirilen bir sistem. Pek çoğumuz internetten bilgi girişi yaparken, captcha dediğimiz bu sistemi kullanmak durumunda kalmışızdır. İngilizce açılımı, CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart). Türkçesi insanlarla, bilgisayarların (otomatik çalışan scriptler, programlar) birbirinden ayrılması anlamına gelmektedir.

Fakat captchaların kullanımı, son kullanıcılar için bazen çok sıkıcı olmaktadır. Resimlerde yazan yazıları, sayıları girmek bir süre sonra insanlar için yorucu ve bıktırıcı olmaktadır.

Bu tür problemler düşünülerek, reCAPTCHA sistemi geliştirildi.

Bu blogda google tarafından geliştirilmiş reCAPTCHA servisini bir asp.net mvc projesinde nasıl kullanabileceğimizi inceleyeceğiz.

Bu proje için Visual Studio 2015 community edition’u kullanacağız.

recaptchavisual2015

recaptchamvcprojectselect2

Change Authentication butonuna tıklayarak, no authentication seçebilirsiniz.

Projemiz oluştuktan sonra, artık model sınıfımızı oluşturabiliriz. Solution Explorer’da, Model klasörüne sağ tıklayarak ‘Add Class’ diyerek Kisi sınıfını oluşturabiliriz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace recaptchadeneme.Models
{
    public class Kisi 
    {
        public string Ad { get; set; }
        public string Soyad { get; set; }
    }
}

Artık index.cshtml dosyasını güncellemeye başlayabiliriz (Views\Home\Index.cshtml):

@model recaptchadeneme.Models.Kisi
@{
    ViewBag.Title = "Home Page";
}


@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Yeni hesap oluştur</h4>
    <hr />

    <p class="text-info">@ViewBag.Message</p>

    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Ad, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Ad, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Soyad, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Soyad, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Kaydet" />
        </div>
    </div>
}

HomeController dosyasını da değiştirelim:

using recaptchadeneme.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace recaptchadeneme.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Kisi kisi)
        {
            ViewBag.Message = "Kayıt Başarılı.";
            return View();
        }


        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Bu şekilde run ettiğimiz zaman, aşağıdaki sayfa açılacak:

recaptchailkacilis

Ad ve soyad alanlarını doldurup kaydete tıklarsak bize kayıt başarılı mesajını dönecektir.

Şimdi form girişimizi botlardan korumak için reCaptchayı nasıl kullanacağımıza bakalım. Öncelikle google recaptcha sitesine giderek Get reCaptcha diyerek recaptcha servisini kullanacağımız siteyi kaydediyoruz. Bunun için gmail hesabınızla  giriş yapmanız gerekiyor.

Kaydettiğimiz zaman bize iki tane key veriyor, Site key ve Secret key. Bu keyleri güvenli bir yere kaydetmemiz gerekiyor.

Daha sonra aşağıdaki script referansını layout head kısmına ekleriz

<script src='https://www.google.com/recaptcha/api.js'></script>

Index.html deki formun sonuna da aşağıdaki ifadeyi koymamız gerekiyor.

<div class="g-recaptcha" data-sitekey="sizinsitekeyiniz"></div>

Değişiklikleri yaptığımızda _Layout.cshtml’in son hali:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml’in son hali:

@model recaptchadeneme.Models.Kisi
@{
    ViewBag.Title = "Home Page";
}


@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Yeni hesap oluştur</h4>
    <hr />

    <p class="text-info">@ViewBag.Message</p>

    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Ad, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Ad, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Soyad, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Soyad, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="g-recaptcha" style="margin-left: 200px;" data-sitekey="sizinsitekeyinizle degistiriniz"></div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Kaydet" />
        </div>
    </div>

}

Bu şekilde yapıp kaydettikten sonra, ekranımız aşağıdaki gibi çıkacaktır:

recaptchailkaciliswithrecapt

Recaptcha localde çalıştığı için kırmızı bir uyarı yazısı veriyor. Bu normal.

Fakat bu recaptcha işlevini görmesi için server side tarafında da kod yazılması gerekiyor. HomeController.cs dosyasını aşağıdaki gibi değiştirelim. Google recaptcha servisinden gelen sonucu aktarmak için, yeni bir sınıf ekledim: CaptchaResult.

using Newtonsoft.Json;
using recaptchadeneme.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace recaptchadeneme.Controllers
{
    public class CaptchaResult
    {
        [JsonProperty("success")]
        public bool Success { get; set; }
        [JsonProperty("error-codes")]
        public List<string> ErrorCodes { get; set; }
    }

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Kisi kisi)
        {
            var captcha = Request.Form["g-recaptcha-response"];

            const string secret = "sizinsecretkeyiniz";

            var restUrl = string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, captcha);

            WebRequest req = WebRequest.Create(restUrl);
            HttpWebResponse resp = req.GetResponse() as HttpWebResponse;

            JsonSerializer serializer = new JsonSerializer();

            CaptchaResult result = null;

            using (var reader = new StreamReader(resp.GetResponseStream()))
            {
                string resultObject = reader.ReadToEnd();
                result = JsonConvert.DeserializeObject<CaptchaResult>(resultObject);
            }

            if (!result.Success)
            {
                ModelState.AddModelError("", "captcha mesajınız hatalı");
                if (result.ErrorCodes != null)
                {
                    ModelState.AddModelError("", result.ErrorCodes[0]);
                }
            } else
            {
                ViewBag.Message = "Kayıt Başarılı.";
            }

            return View();
        }


        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Bu şekilde HomeController’i değiştirince, artık recaptchayı kullanarak sitemizi koruma yönünde etkili bir adım atmış oluyoruz.

 

 

 

 

 

 

 

 

 

 

 

2 thoughts on “Asp.net Mvc 5’te reCaptcha Kullanımı”

    1. Sen daha kısasını yazsaydın saim. Adam zaman ayırıp bilgi paylaşımında bulunmuş.. Herkes senin seviyende değil o yüzden bu şekilde düşünmemelisin bence.

Yorum bırakın

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

Scroll to Top