Bildiğiniz gibi Google amcanın web sitenize gelen spam saldırılarını önlemek amacıyla biz developer’lara sunmuş olduğu bir hizmeti var. Google ReCAPTCHA. Google ReCAPTCHA, web sitenizde bulunan isteklerin kötüye kullanıma karşı korunmasını sağlamak için tasarlanmıştır.
Bu yazıda size web sitenize nasıl entegre edileceğini göstereceğim.
Adım 1: Başlangıç
Buradan web sitenizi kaydedin ve Secret Key alın.
Yapmanız gereken ilk şey, bu tıklamayı yapmak için web sitenizi Google şifrelemek üzere kaydettirmektir. Google hesabınıza giriş yapın ve ilgili formu google’a gönderin.
Kayıt işlemini tamamladıktan sonra google bize kullanmamız gereken 2 kod veriyor. Site Key ve Secret Key.
Adım 2: Google ReCAPTCHA’yı web sitemize entegre edelim
Web sitenize entegre etmek için Sunucu tarafında olduğu gibi istemci tarafına ilgili eklemeleri yapmamız gerekir. İstemci HTML sayfasında, aşağıdaki satırı <HEAD> etiketinden önce eklememiz gerekli.
1 | <script src='https://www.google.com/recaptcha/api.js'></script> |
Ve google üzerinden bize dönen widget’ı (recaptcha) sayfamızda göstermek için, aşağıdaki kodu iletişim formu, yorum formu yada nerede kullanacaksak oraya koymamız gerekir.
1 | <div class="g-recaptcha" data-sitekey="== Site Key =="></div> |
İlgili form sunucuya gönderildiğinde, chapcha formun içersinde POST verileri olarak ‘g-recaptcha-response’ adında gönderir. Kullanıcının Captcha’yi başarılı şekilde geçip geçmediğini görmek için doğrulamalısınız.
Adım 3: Herşey bu kadar! Şimdi örnek zamanı.
Açıklama kutusu ve gönderme düğmesi bulunan basit form oluşturdum. Bu formun gönderilmesiyle birlikte Google’ın reCAPTCHA doğrulamasını yapmak için back-end’de PHP‘yi kullanacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Google recapcha demo - Fatihsoysal.com</title> <script src='https://www.google.com/recaptcha/api.js'></script> </head> <body> <h1>Google reCAPTHA Testi</h1> <form id="comment_form" action="form.php" method="post"> <input type="email" placeholder="Type your email" size="40"><br><br> <textarea name="comment" rows="8" cols="39"></textarea><br><br> <input type="submit" name="submit" value="Gönder"><br><br> <div class="g-recaptcha" data-sitekey="=== Site key ==="></div> </form> </body> </html> |
Sunucu tarafında PHP kullanıyorum. Form gönderme isteğinde POST değişkenini kontrol edeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php $email;$comment;$captcha; if(isset($_POST['email'])){ $email=$_POST['email']; }if(isset($_POST['comment'])){ $email=$_POST['comment']; }if(isset($_POST['g-recaptcha-response'])){ $captcha=$_POST['g-recaptcha-response']; } if(!$captcha){ echo '<h2>Lütfen captcha bölümünü kontrol ediniz!</h2>'; exit; } $secretKey = "Google amcadan aldığımız secret key buraya gelecek"; $ip = $_SERVER['REMOTE_ADDR']; $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip); $responseKeys = json_decode($response,true); if(intval($responseKeys["success"]) !== 1) { echo '<h2>Spam? ! Tekrar kontrol etmelisin.</h2>'; } else { echo '<h2>Gönderiniz için teşekkür ederiz.</h2>'; } ?> |
Görüldüğü üzere kullanıcının reCAPTCHA gönderip göndermediğini, fiziksel manada insan olup olmadığını yakalayabildik 🙂 Ve işlemlerimizi buna göre yaptırdık. Siz de örnek üzerinden denemelerinizi yapabilirsiniz.
Kolaylıklar dilerim.
Allahım senden razı olsun güüzel insan senin gibi paylaşım yapıp yardımcı olan birini bulamadım senin sayende saatlerdir uğraştığım şeyi çözdüm.