Selamlar,
Daha önceki yazımda Invisible reCAPTCHA mvc üzerinde nasıl kullanılacağını anlatmıştım. Bu yazımda ise Google tarafından 29 Ekim’de duyurulan reCAPTCHA v3 birlikte inceleyelim.
reCAPTCHA v3 tek seferlik doğrulamanın yeterli olmadığı, istediğimiz zaman çalıştırmamıza rağmen conversion kaybetmeden kullanılabilecek bir versiyon olarak karşımıza çıkıyor. “Bunu nasıl yapabiliriz” dediğinizi duyar gibiyim.
Önce tanıtım videosunu izleyelim
Video’da da bahsedildiği üzere reCAPTCHA v3 bunu kullanıcılarınıza 0.0 ile 1.0 arasında bir puan vererek sağlıyor. 0.0 genellikle bir bot, puan 1.0 yaklaştıkçada iyi bir kullanıcı anlamına geliyor.
Site üzerinde istediğiniz alanlarda reCAPTCHA v3 için gerekli script’leri çalıştırarak kullanıcınız için puanı öğrenip kullanım şeklinize göre aksiyon alabileceksiniz.
Google tarafından örneklenen kullanım senaryoları ise şu şekilde;
Kullanım yeri : Login sayfası
Kullanım tavsiyesi : Eğer giriş yapmaya çalışan kullanıcı düşük bir skora sahip ise Two Factor Authentication yada e-mail doğrulaması isteyebilirsiniz. Böylelikle credential stuffing attacks’dan korunabileceksiniz.
Kullanım yeri : E-Ticaret
Kullanım tavsiyesi : Sitenizde gerçekleştirelen siparişlerde kullanıcının skoruna bakarak spam olup olmadığı konusunda karar verebilmek için fraud kontrolü yapabilirsiniz.
reCAPTCHA v3 detaylıca değindikten sonra şimdi nasıl kullanabileceğimize bakabiliriz.
Öncelikle buradan reCAPTCHA v3 için geçerli key almamız gerekiyor
Sonrasında aşağıdaki kodu çalıştırarak .net core mvc projemizi oluşturabiliriz
Projemiz oluştuktan sonra _Layout.cshtml view içerisinde head tag’i kapatılmadan hemen öncesinde
satırını eklememiz gerekiyor. Bu satırdaki reCAPTCHA_site_key değerini google reCAPTCHA panelinden aldığımız değer ile değiştirmemiz gerekiyor
Sonrasında reCAPTCHA v3 deneyeceğimiz About view’i üzerine aşağıdaki satırları ekliyoruz
Bu kodlarda ki grecaptcha.ready jquery’de kullandığımız $(document).ready() ile aynı mantıkda çalışıyor. reCAPTCHA v3 scripti kullanıma hazır olduğunda tetikleniyor. Sonrasında grecaptcha.execute ile reCAPTCHA v3 ile ilgili action’ı bildiriyoruz.
Bir sayfa içerisinde farklı farklı birden fazla action için reCAPTCHA v3 çalıştırabilirsiniz.
grecaptcha.execute bize doğrulama işlemlerinde kullanmak üzere bir token veriyor. Bu token ile /Home/RecaptchaV3Vverify method’una istek atarak backend üzerinden reCAPTCHA apisi üzerinden kullanıcının skor bilgisini öğreneceğiz.
Yaptığımız isteğin sonucunda google bize döneceği response şu şekilde;
Bu response için kullanacağımız modeli Models klasörü altında TokenResponse olarak oluşturalım
.net Core projesi üzerinden HttpClient ile istek yapacağımız için Startup.cs > ConfigureServices methodu içerisine
satırını eklememiz gerekiyor. Bu değişiklik sonrasında Controller’ımızın Constructor’na IHttpClient geliyor olacak.
Burada tanımladığımız _googleVerifyAddress ve _googleRecaptchaSecret adında iki adet string değişkeni ise HomeController üzerinde Google reCAPTCHA servislerine istek atmak için kullanacağımız RecaptchaV3Vverify methodun’da kullanacağız.
_googleRecaptchaSecret için geçerli key’i reCAPTCHA admin paneli üzerinden Secret key bölümünden alabilirsiniz
Method ile reCAPTCHA doğrulama api istek atıp cevabı direk json olarak geri dönüyoruz.
Bu method üzerinden dönen cevabı ise test etmek açısından console yazıyoruz.
İşte bu kadar demo için reCAPTCHA v3 entegrasyonunu tamamlamış olduk.
Demo amaçlı olduğu için doğrulama kodunu ayrı bir method ile yaptım ama siz bu işlemi ihtiyacınız olan method içerisinde yapıp user için dönen skora göre akışı istediğiniz şekilde yönetebilirsiniz.
Görüşmek üzere!
Merhaba,
üstat anlatımınız için teşekkkürler günlerdir çözmeye çalıştığım bir konu fakat siz bir profosyonel anlayacak şekilde yazmışsınız. Bu şekilde sitenizden sadece gerekli bilgiye sahip kişiler faydalanabilir. Örnek : wordpress te entegrasyon için hangi php dosyalrının içerisine hangi koddan önce veya sonra google recaptcha v3 entegrasyon kodlarını ekleyeceğiz 🙂 açıklamalı yazarsanız seviniri benim gibi cahilerde sebeplenir diye düşünüyorum teşekürler şimdiden
Merhaba Murat,
Maalesef php konusunda çok deneyimim yok. Php ile birlikte kullanımı için bir iki adet örnek buldum umarım işinizi görür.
WordPress için eklenti ile kullanmak daha kolay olabilir aslında 🙂
Merhaba
Anlatım için teşekürler
dönen sonuca göre ne yapapabiliriz/ yapmalımıyz.
Merhaba Barış,
Dönen sonuca göre alabileceğiniz aksiyonların bir sınırı yok aslında. reCAPTCHA v3 ile birlikte asıl amaç kullanıcıların akışını bozmadan sistemi botlardan korunabilmesini sağlamak.
Aklıma gelen örnekler şu şekilde;
Eğer sormak istediğiniz sipesifik bir sektör/proje var ise iletişim sayfasından yazabilirsiniz 🙂
Hocam merhaba
Öncelikle bilgi için teşekkürler.
Local’de test için score değerini nasıl değiştirebiliriz. Sürekli score değerini 0.9 alıyorum. Bot olması durumunda nasıl bir durum olacağını test etmek istiyorum nasıl yapabilirim ?
Bir de action olarak login seçtiğimizde bot olduğu tespit edilirse “2-factor-authentication or email verification” işlemi recaptcha tarafından mı yapılacak yoksa bunu kendimiz mi düzenlememiz gerekiyor?
Merhaba Hüseyin,
Local’de yada diğer ortamlarda score değerini sabit alman çok normal. reCAPTCHA v3 sitendeki gerçek trafiği inceleyerek kullanıcıların davranışlarına göre puan verir. Prod. öncesinde ki ortamlarda farklı puanlar için test yapmak istiyorsan mock server kullanmalısın.
Action olarak uygulayacağın kuralların kodlaması tamamen sana ait. Google sadece kullanıcının bot olma ihtimalini söylüyor 🙂
Hello Sir, Thank you so much for this useful article. I am try to follow the same way you explained in this article. First of all, i created a Asp.Net Core MVC application and hosted it on local IIS server with “http://mysite.com:8080”. and then register it on Google captcha console window under domain section. and then try to run application. but Google API is returning me token as “Null”. what can be the problem?
grecaptcha.ready(function () {
debugger;
console.log(“grecapcta ready”);
grecaptcha.execute(‘my-site-key-here’, { action: ‘privacy’ })
.then(function (token) {
debugger;
console.log(“grecapcta executed ” + token);
$.getJSON(“/Home/Privacy?token=” + token, (data) => {
console.log(data);
});
});
});
Since token is null, so response under data property is –
{“success”:false,”score”:0,”action”:null,”challangeLoadTimestamp”:”0001-01-01T00:00:00″,”hostName”:null,”errorCodes”:[“missing-input-response”,”missing-input-secret”]}
Please help.
Hello Rahul,
First of all thank you for your good wishes.
Did you add the localhost domain via google captcha console? I think the problem is caused due to this reason
Thank you for quick response. Yes i had added localhost as well as mysite.com both to the admin console. now it solved. the problem was with implementation. but still i have one problem regarding data. I did multiple requests on page which have recaptcha, but there is no record captued inside admin console. Its showing –
Total Requests – 0
Suspicious Requests – 0
Can you please help on this?
Hi Rahul,
It’s normal because you make very few requests in your local environment. You need to publish the feature on production
Hello sir, I have one more question regarding multiple domain registration against one SiteKey. Suppose i have one domain e.g. mysite.com and multiple sub-domains (example – abc.mysite.com, xyz.mysite.com etc). and i will register only one domain i.e. mysite.com on Admin console window. so the same SiteKey will work for my all sub-domain sites? Please help
Hello Rahul,
Yes you are right. The same SiteKey works smoothly all sites.
Thank you sir for your answers. I have another question about “challenge_ts” (returned from Captcha API). What is this use for and what is mean of returning this?
Hello Rahul,
I think the date customer saw the captcha. by the way, I’m not sure