Asp .Net Mvc Invisible reCaptcha Ekleme

Merhabalar, bu yazımda Asp .Net Mvc de Invisible reCaptcha uygulamasına bir örnek yapacağız. Hemen başlayalım.

Bir mvc projesinin içine form olan bir view ekliyoruz ve submit butonuna Invisible reCaptcha eklentisi uygulayacağız. İlk olarak bir keyleri almamız gerekiyor. Aşağıdaki linkten bunları alıyoruz.

https://www.google.com/recaptcha/admin/create

Linkte giriş yaptıktan sonra ilk olarak keylerinize genel bir isim veriyorsunuz. Sonra reCAPTCHA s2 türünü seçiyoruz. Ardından Görünmez reCAPTCHA rozeti checkbox ını seçiyoruz. Daha sonra site alan adını giriyoruz. Alan adınız varsa onu girin. Localde çalışıyorsanız Localhost şeklinde ekleyin. Sonra geri kalan işlemleri yapıp oluşturun.

Kayıttan sonra size verdiği Site Anahtarını ve Gizli Anahtarı bir yere kaydedin.

Şimdi oluşturduğunuz view in içine geliyoruz. Aşağıdaki scripti ekliyoruz.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Form başlangıcının içine aşağıdaki eklentiyi yapıyorsunuz.

 @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "registerForm" }))

Sonra submit butonunu aşağıdaki değişikliklere göre değiştiriyoruz.

Eski hali

<input type="submit" class="btn btn-success" value="Login" />

Yeni hali

<input type="submit" class="btn btn-success g-recaptcha" data-sitekey="KaydettiğinizSiteAnahtarınıYazın" onclick="validate();" data-callback='onSubmit' value="Login" />

Sonra reCaptcha adında bir javascript (js) dosyası oluşturup içine aşağıdakileri ekliyoruz.

function onSubmit(token) {
    $("#registerForm").submit();
}

function validate() {
    if (grecaptcha.getResponse() != "") {
        $("#registerForm").submit();
    }
}

Sonra view içine yazdığımız scripti de ekliyoruz.

<script src="~/Scripts/reCaptcha.js" type="text/javascript"></script>

Şimdi back-end tarafına geçebiliriz. Models klasörüne ReCaptchaResult adlı bir class ekliyoruz. İçini dolduruyoruz verilen şekilde.

public class ReCaptchaResult
    {
        [JsonProperty("success")]
        public bool Success { get; set; }

        [JsonProperty("error-codes")]
        public List<string> ErrorCodes { get; set; }
    }

Sonra controllerdan Login Actionuna geliyoruz ve şu kod bloğunu ekliyoruz.

try
                {
                    using (WebClient client = new WebClient())
                    {
                        var response =
                            client.DownloadString(
                                string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}",
         "KaydettiğinizGizliAnahtarınıYazın", Request.Params["g-Recaptcha-Response"]));

                        ReCaptchaResult reCaptchaResult = JsonConvert.DeserializeObject<ReCaptchaResult>(response);

                        if (!reCaptchaResult.Success)
                        {
                            ModelState.AddModelError("reCaptcha", "Bot olmadığınızı kanıtlayın.");
                            return View(model);
                        }
                    }
                }
                catch (Exception exception)
                {
                    ModelState.AddModelError("reCaptcha", exception);
                    return View(model);
                }

Genel olarak login action yapısı bu şekilde olacak.

 [HttpPost]
        public ActionResult Login(LoginVM model)
        {
            if (ModelState.IsValid)
            {           
                try
                {
                    using (WebClient client = new WebClient())
                    {
                        var response =
                            client.DownloadString(
                                string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}",
         "KaydettiğinizGizliAnahtarınıYazın", Request.Params["g-Recaptcha-Response"]));

                        ReCaptchaResult reCaptchaResult = JsonConvert.DeserializeObject<ReCaptchaResult>(response);

                        if (!reCaptchaResult.Success)
                        {
                            ModelState.AddModelError("reCaptcha", "Bot olmadığınızı kanıtlayın.");
                            return View(model);
                        }
                    }
                }
                catch (Exception exception)
                {
                    ModelState.AddModelError("reCaptcha", exception);
                    return View(model);
                }

               //Login işlemlerini gerçekleştiriyoruz
            }
        }

Evet her şey bu kadar. Projeyi derleyip çalıştırabilirsiniz.


Bu yazımın sonuna geldik. Bir sonraki yazımda görüşmek üzere. Sağlıcakla kalın.

Bir cevap yazın