Google reCAPTCHA v2 invisible entegrasyonu
1 yıl önce#makalelerMerhaba. Bugün yazımızda sitelerimizde istenmeyen spam mesajlarla ve formlar üzerinde oluşan güvenlik ihlalleriyle nasıl başa çıkabileceğimiz konusunu ele alacağız. Bu güvenli ortamı bize sağlaması için Google'ın bir servisi olan reCAPTCHA hizmetini nasıl formlarımıza entegre edebileceğimizi öğreneceğiz.
Anlatıma başladan önce kısaca reCAPTCHA hizmetinden bahsetmek gerekirse web sayfalarımızın ağ güvenliğini sağlayan, yapılan işlem hızına göre formları gönderen kişilerin insan ya da robot olma olasılığını değerlendiren ve buna göre bir algoritma sunan ücretsiz bir Google servisi.
Biz bugün bu yazıda yukarıdaki görselin aksine sitemizdeki tasarım estetiğini bozmamak için gizli, sitedeki adıyla invisible reCAPTCHA kullanacağız. Yani sadece gerekli olduğu durumlarda kullanıcıya görünecek. Örneğin sitenize ilk defa giren birisi form göndermeye çalıştığında "Ben robot değilim" butonunu görmeyecek fakat hızlı bir aralıkla formu göndermeye çalışırsa bu buton kendini gösterecek.
Başlangıç aşaması
Google reCAPTHCA bağlantısınagiderek web sitemiz için reCAPTHCA v2 görünmez oluşturalım. Etiket kısmına sitenizin adını girebilirsiniz. reCAPTCHA türünü reCAPTCHA s2 yapıyoruz, altında açılan seçeneceklerden Görünmez reCAPTCHA rozeti olanı seçiyoruz. Alan adları kısmına domain adımızı girdikten sonra hizmet sözleşmesini kabul ederek Gönder butonuna basıyoruz. Artık kullanmak için hazırız. Oluşturduğumuz reCAPTCHA hizmetine giriyoruz, bize sitemizin front-end ve back-end kısmında kullanmak üzere 2 adet anahtar vericek. Bunları kenara kaydedelim, birazdan kullanacağız.
İkinci aşama
Front-end kısmının entegrasyonunu göstermek adına bir deneme formu oluşturacağım. Head etiketleri arasına reCAPTCHA hizmetinin uzak dosyalarını çağırdıktan sonra input butonumuza tanımlama yapıyoruz. Hizmeti input submit yerine doğrudan button olarak çalıştırmak için Head etiketi arasına ufak bir JavaScript uygulaması yaptım.
Örnek derlenmiş front-end tarafı aşağıdaki şekilde. Değiştirmeniz gereken tek kısım data-sitekey kısmı içerisindeki 6LeIzfQbxxxxxxxxxxxxxxxxxx değeri. Bu kısıma size verilen site anahtarını girmeniz gerekiyor.
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById('reCaptchaForm').submit();}
</script>
</head>
<body>
<form action="gonder.php" id="reCaptchaForm" method="post" autocomplete="off">
<input type="text" id="fname" value="Furkan">
<button class="g-recaptcha" data-sitekey="6LeIzfQbxxxxxxxxxxxxxxxxxx" data-callback='onSubmit'>Gönder</button>
</form>
</body>Üçüncü aşama
Son aşama olarak doğrulamayı sağlamak için back-end tarafına da bir işlem uygulaması yapmamız gerekmekte. Back-end kısmının PHP olarak derlenmiş halini aşağıya bırakıyorum. Değiştirmeniz gereken değer $secretKey içerisinde yer alan kısım. Bu alana size verilen gizli anahtarı girmeniz gerekiyor.
<?php if(isset($_POST['g-recaptcha-response'])) {
$secretKey = '6LfUlmIdAAAAAMbO4ykjtBV-xxxxxxxxxx';
$response = $_POST['g-recaptcha-response'];
$remoteIp = $_SERVER['REMOTE_ADDR'];
$reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
$result = json_decode($reCaptchaValidationUrl, TRUE);
if($result['success'] == 0) {
echo "Hatalı işlem";
}else{
echo "Başarılı";
}
}
?>Evet artık reCAPTHCA v2 invisible korumamız aktif oldu. Sitenize yapılan spam mesajların ve form ihlallerinin önüne çok rahatlıkla geçecektir. Umarım anlatım faydalı olmuştur. Eğer kodları bir dosya içerisine derlemekle uğraşmamak istiyorsanız buraya tıklayarak derlenmiş halini indirebilirsiniz.