Zaman zaman bir çok web sitesinde karşımıza çıkan ben robot değilim. reCAPTCHA uygulamasını web sitenize uygulamanız için basit bir örnek hazırladım. İlk örneğimiz ben robot değilim ile checkbox uygulamalı bundan sonraki yazımda Gizli reCAPTCHA uygulamasını anlatacağım.
Öncelikle bu reCAPTCHA ne işe yarar?
Basit bir dille anlatmak gerekirse, reCAPTCHA uygulaması kötü niyetli kullanıcılar tarafından gelecek olan SPAM, BOT saldırısı veya bir login formunuza olabilecek kaba kuvvet saldırılarını engeller. Böylece güvende olursunuz.
reCAPTCHA oldukça kullanımı basit ve pratik bir araç bir de size gelen atakların raporlarını sunan bir Analytics ekranı sunuyor. Herhangi bir atak durumunda ilgili kişileri bilgilendiriyor gibi bir çok özelliğe sahip.
Bu özet bilgilerden sonra reCAPTCHA kurulumuna başlayalım.
Öncelikle bu işlem için bir Google hesabınızın olması gerekli,
1. Web sitesini kayıt etme https://www.google.com/recaptcha adresine giriş yapın sağ üst köşeden “Admin console” butonuna tıklayın.
2. Yeni Site Kaydı yapma formuna geleceksiniz. Basitçe buradaki bilgileri aşağıda sizler için sıraladım.
– Etiket : Projenizin / web sitenizin adını veya adresini yazabilirsiniz.
– reCAPTCHA türü : Farklı sürümleri içinde barındırmakta v1 geçtiğimiz süre içinde tamamen kapatıldı. v2 ve v3 olarak devam etmekte örnekte anlatacağım Ben robot değilim uygulaması için v2’yi seçin.
– Alan adları : Buraya kullanmak istediğiniz domain adreslerini
– Sahipler : Atak durumlarında bilgilendirme yapılmasını istediğiniz e-posta adresleri
3. Bu adımları geçtiğinizde size iki tane anahtar değeri verecek bunları hemen bir yere kaydedebilir veya daha sonra ayarlardanda ulaşabilirsiniz.
4. Analytics’e Git diyerek dashboard ekranımıza geçelim. Bu alan özet bir raporlama ekranı zaman içinde veriler biriktiğinde daha dolu olarak görebileceksiniz.
5. Öncelikle basit bir HTML form hazırlayalım. Genelde blogumda bootstrap ile çalışmalar yapmaktaydım ama bir süredir UIKit kullanıyor ve sizlerede tavsiye ediyorum oldukça başarılı bir kütüphane. Form ile formu karşılamamızı aynı yerde tuttum siz isterseniz ayrı bir action, form gibi başka bir dosyada da yazıp kullanabilirsiniz.
<?php
function postCaptcha($response){
$fieldsArray = array(
'secret' => '__SECRET__KEY__',
'response' => $response
);
$postFields = http_build_query($fieldsArray);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
curl_setopt($ch, CURLOPT_POST, count($fieldsArray));
curl_setopt($ch, CURLOPT_POSTFIELDS, $postFields);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
return json_decode($result,true);
}
if($_POST):
$result = postCaptcha($_POST['g-recaptcha-response']);
if ($result['success']):
$resultMessage = 'Doğrulama tamamlandı.';
else:
$resultMessage = 'Bir hata oluştu.<br>';
$resultMessage .= 'Hata Kodu: '.$result['error-codes'][0];
endif;
endif;
?>
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit-icons.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<?php if($_POST): ?>
<section class="uk-flex uk-flex-middle" uk-height-viewport>
<div class="uk-container">
<div class="uk-grid">
<div class="uk-card uk-card-default uk-card-body uk-width-large">
<div class="uk-alert uk-alert-primary uk-text-center">
<span uk-icon="icon: info; ratio: 2"></span>
<p><?=$resultMessage?></p>
</div>
</div>
</div>
</div>
</section>
<?php else: ?>
<section class="uk-flex uk-flex-middle" uk-height-viewport>
<div class="uk-container">
<div class="uk-grid">
<div class="uk-card uk-card-default uk-card-body uk-width-large">
<h3 class="uk-card-title">Giriş Formu</h3>
<form method="post">
<fieldset class="uk-fieldset">
<div class="uk-margin">
<div class="uk-inline uk-width-expand">
<span class="uk-form-icon" uk-icon="icon: mail"></span>
<input type="text" class="uk-input uk-form-large" name="email" placeholder="E-Posta" required />
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-expand">
<span class="uk-form-icon" uk-icon="icon: lock"></span>
<input type="password" class="uk-input uk-form-large" name="password" placeholder="Şifre" required />
</div>
</div>
<div class="uk-margin uk-flex uk-flex-center">
<div class="g-recaptcha" data-sitekey="__SITE__KEY__"></div>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-primary uk-width-expand uk-button-large">GİRİŞ</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<?php endif; ?>
</body>
</html>
6. Sonuç olarak doğrulama yapıldı ve form başarıyla gönderildi. Ataklarda birden fazla post edildiği durumlarda direkt olarak engelleme ile doğrulamaya zorlanmakta ve böylece botların saldırıların önüne geçilmektedir.
3 Yorum
kırmızı bir hata çıktı denile şu => “Site sahibinin görmesi gereken HATA: Geçersiz site anahtarı” diye onay checkbox ı çıkmadı yardımcı labilirmisiniz Acillll !!!!
site anahtarı bölümünde bize verilen kodu nereye yapıştırcaz hocam lütfen yardım edin
üstad php kendi formumuza entegre etmek istesek hangi bolumleri gerekli kodun? butonlar vs zaten var halihazırda elimizde ,(isminiz,telefonunuz,mesajınız seklinde irtibat formumuz var yani sonuna koymak istiyorum sizin kodu)
Bu yazı yorumlara kapalı.