Google Invisible ReCaptcha Entegrasyonu - .Net Core + jQuery Validator

Google reCaptcha servisininde "Ben Robot Değilim" yazısının görünmediği türü, Invisible - reCaptcha olarak adlandırılır. 

En sık bilinen reCaptcha'da kullanıcı ben robot değilim yazısına sürekli tıklayarak işkence haline gelebilir ya da bazı sayfalarda tasarımsal olarak kötü bir görüntüye yol açabilir.

Invisible versiyonunda, reCaptchayı gizleyerek kullanıcı deneyimini olumlu hale getirecek ve güvenlik önleminden ödün vermeyeceğiz.

Örneğimize geçmeden önce, Invisible Recaptcha Api Geliştirici dokümantasyonunu incelemenizi öneriririm, örneğimizde belli noktalarda bu linkten destek aldım. 

https://developers.google.com/recaptcha/docs/invisible

Konu ile ilgili .NET platformunda ve ajax post ile kısıtlı örnekler olduğu için bir örnek uygulama ile daha kolay anlaşılması amaçlanmaktadır. Proje Github Linki için tıklayınız. 

Örneğimizde;

NET Core Web uygulaması üzerinde basit bir kullanıcı giriş sayfası oluşturulup, bu formu ajax post ile submit edeceğiz. Post işlemi öncesi client-side doğrulamayı jQuery Validator kütüphanesi ile yapacağız ve zorunlu alanların doğrulanması sağlandıktan sonra ajax post ile önce recaptcha response değerini arka planda doğrulanmasını göreceğiz. 

Önce ASP.NET Core Web App seçerek web sitemizi oluşturacağız. 

Web projemizin ismi: GoogleInvisibleRecaptcha.Web olarak oluşturdum.

Ek bilgilere .Target Framework kısmında .NET 5.0 olarak verdiğimize emin olalım. Enable Razor runtime compilation seçmemizin sebebi.


Bu bilgilerden sonra web projemiz oluşturulmuştur. Recaptcha için iş katmanı ile model katmanını oluşturmamız gerekmektedir. Add New Project dedikten sonra, .Net Core Class Library seçip isimlerini ReCaptcha.Business ve ReCaptcha.Models katmanlarını sırası ile oluşturabiliriz. Target Framework kısmında .NET 5.0 olarak verdiğimize emin olalım.


Oluşturduğumuz bu iki proje sırası ile aşağıdaki işleri yapmaktadır. 

ReCaptcha.Business: reCaptcha doğrulama işleminin yapıldığı projedir. Projedeki ReCaptchaManager sınıfımızda doğrulama işlemi yapacak metot bulunmaktadır. 

ReCaptcha.Models: reCaptcha doğrulaması sonuç nesnesinin döndüren ReCaptchaResponse sınıfı bulunmaktadır. Bu sınıfta Success ve Message propertylerini web tarafında kullanacağız. 

GoogleInVisibleRecaptcha sınıfı ise appsettings.json dosyasındaki GoogleInVisibleRecaptcha kısmındaki SiteKey ve SecretKey değerlerini tutan propertylerini içeren sınıftır. Options Pattern tekniği kullanılmıştır. Options Pattern ile ilgili yazıma ulaşmak için tıklayınız. 

Oluşturduğumuz iki proje aşağıdaki gibi görünmektedir.

ReCaptchaManager sınıfında bulunan CheckInvisibleCaptchaValid metodu ile secretKey ve formdan gelen response değeri ile captcha doğrulaması yapılır ve ReCaptchaResponse türünde sonuç nesnesi döndürür. secretKey değeri değişken olduğu için web projemizdeki appsettings.json dosyasından okunması sağlanmıştır.



Google reCaptcha site kaydı ve Invisible reCaptcha keyi elde etmek için aşağıdaki linki kullanıp ekran görüntüsündeki alanları seçmelisiniz. 

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


Site ve gizli anahtarları appsettings.json dosyasında ilgili keylere eklenmeliyiz.

Recaptcha modüllerini tamamladıktan sonra web tarafında formumuzu ve script metotlarımızı oluşturalım.


Login.cshtml sayfasında en önemli dikkat edilecek kısım reCaptcha keyinin olduğu divdir. Aşağıdaki alanlar reCaptcha'nın invisible olmasını sağlayan attributelerdir.

data-sitekey: appsettings.json dosyasında tanımlanan ve ViewBag ile aldığımız site keyidir.
data-callback: g-recaptcha-response değerini alan kısımdır. Opsiyoneldir. response parametresi verirsek capthca response değeri otomatik olarak gelecektir.
data-size: invisible olmalıdır.

Submit butonunda ise onclick metodunu ekledik. validate metodu, jQuery Validator kütüphanesi kullanılarak form alanlarını doğrulamamızı sağlayacaktır.

jQuery Validator kütüphanesi için aşağıdaki script yollarını vermemiz gerekir. 

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Google Recaptcha için ise aşağıdaki script yolu kullanılacaktır.

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

validate metodu ile client-side validasyonu yaparız. $("#login-form").validate metodunda;

rules: Formdaki alanların zorunluluk durumunu belirtebiliriz. (Kullanıcı adı ve şifre alanları)
errorClass: Uyarı mesajlarının css classını veririz. Bu class bizim oluşturduğumuz css classı olabilir. 
messages: Uyarı mesajlarının bulunduğu nesnedir.
submitHandler: Submit işleminin olduğu kısımdır. Eğer alanların doğrulanması başarılı ise çalışacak kısımdır. (reCaptcha doğrulama ve form submit işlemleri)

grecaptcha.getResponse() ile captcha response değeri alınır ve "g-recaptcha-response" form değerine atanır. Eğer bir problem olduğunda ise aşağıdaki kodlar ile captcha yenilenir. 

grecaptcha.reset();
grecaptcha.execute();

jQuery Validator kütüphanesinin linkinden detaylı dokümantasyona ulaşabilirsiniz. jQuery validator eklentisi ile ilgili daha önceden yazdığım yazı için tıklayınız. 



Recaptcha Controllerda ise ajax post ile captcha doğrulanması arka planda yapılmaktadır.  HttpContext.Request.Form["g-recaptcha-response"] kodu ile g-recaptcha-response değeri ReCaptchaManager - CheckInvisibleCaptchaValid metoduna gönderilir ve Google reCaptcha apisi ile doğrulama işlemi gerçekleştirilir. 

Gelen sonuç nesnesinden Success değeri true ise diğer alanların submit işlemi başlatılabilir. Size ait senaryolarla da şekillendirilebilir. 

Formumuzun görüntüsü - Validasyon geçersizken


Formumuzun sağ alt köşesinde aşağıdaki simge görüntülenebilir. Invisible recaptcha olduğunu bu şekilde anlayabiliriz.


reCaptcha kontrolünde success değeri true iken




Login metodunda ViewBag.SiteKey nesnesi ile SiteKeyi Login viewinde eklemiş olduk.Post metodunda ise siz istediğiniz validasyon ve iş kurallarını ekleyebilirsiniz. 

Özet olarak Google Invisible Recaptcha servisinin .NET Core ve jQuery Validator eklentisi ile entegrasyonunu anlattım. Yazım uzun olmuş olabilir fakat adım adım anlatmaya çalıştım. Herhangi bir sorunuz olduğunda yorum üzerinden belirtebilirsiniz. 

Yorumlar

Yorum Gönder