JavaScript • PHP

Google reCaptcha/noCaptcha uygulaması (Ben robot değilim.)

2 sene önce
by Hakan Karataş
11 Yorumlar
Google reCaptcha Ben Robot Değilim Yapımı
Yazan Hakan Karataş

CAPTCHA (güvenlik doğrulama) doğrulamaları belkide web üzerindeki tüm sinir bozucu başa gelen olayların içerisinde en sık görülenidir.  Görme bozukluğu yada herhangi bir göz kusuru olan birisinin web erişimi için bu tür ekran okuyucular gibi yardımcı teknojilere güveni bırakın, kullanıcıların büyük çoğunluğu için yeterince sorun olan bir durumdur. Ancak ne yazık ki CAPTCHA’lar spama karşı mücadelede hayati önem taşımaktadır. Yani güvenlik için rahatımızdan biraz vazgeçmemiz gerekiyor-du. 🙂 Google’ın güncel reCAPTCHA uygulaması hem kolay, hem hızlı hem de güvenli şekilde güvenlik doğrulamasını sağlıyor.

resim1

İronik bir şekilde garip olsa da insanların okumaları için geleneksel karıştırılmış metin şeklinde olan captcha’lar  karışık bulunmaktadır. Modern yapay zeka teknolojisinin bunları çözmesinde günümüzde sorun yaşanmamaktadır. Örneğin Google, Google Street View yerleri onaylarken ev numaralarını ve yol işaretlerini okumak için benzer bir teknoloji kullanıyor

resim2

Google’ın geliştiricileri 2014 yılının sonlarına doğru şimdiye kadar görülmüş en iyi Captcha çözümünü geliştirdiler. NoCAPTCHA / reCAPTCHA bir parmak dokunuşu, bir tıklama yada boşluk tuşuna basarak klavyeden iletilecek girdiden daha fazlasını gerektirmiyor. Hem kolay, hem hızlı hem de güvenliği sağlıyor.

nocaptcha

Çoğu durumda yukarıdaki gibi basittir ama eğer Google’ın risk analizi hala insan olduğunuzdan emin olamazsa bu sebepten dolayı ikinci bir doğrulama isteyecektir. (Örn; karşımıza çıkan görseller arasından istenilen görselleri seçmemiz gibi, ya da metni yazmak gibi.)

resim3

No CAPTCHA reCAPTCHA uygulamasının yapımı

No CAPTCHA nasıl yapacağımıza gelelim. Projelerimizde kullanmak faydalı olacaktır.

Aşama 1

Öncelikle, Bize bir API anahtarı gerekiyor. Bu linke gidin: https://www.google.com/recaptcha/admin. Bu sayfaya erişmek için bir Google hesabınıza giriş yapmış olmanız gerekmektedir. Sizden ReCaptcha ‘yi kullanacağınız internet sayfasını kaydetmenizi isteyecektir. Kaydınızı yapın. Birkaç domaini aynı anda girebilirsiniz . Subdomainler otomatik olarak dikkate alınmaktadır.

resim4

Aşama 2

Bu işlem tamamladığında karşınıza bir “Site Key” ve bir de “Secret Key” çıkacaktır. 

resim5

Aşama 3

Anahtarların altında web sitemizde reCAPTCHA ‘yi dahil etmek üzere gerekli bazı kod parçalaır görürüz.

İlk olarak JavaScript kodu:

<script src='https://www.google.com/recaptcha/api.js'></script>

Ayrıca desteklenen dilleri tanımlayabiliriz. Kod parçasına (dillerin kısaltılmış değeri Ör: tr, az, en) bir parametre ekleyerek kullanılmaktadır. Burada bize reCAPTCHA’ın Türkçe dilini verecek tr dizesini ekliyoruz: 

<script src='https://www.google.com/recaptcha/api.js?hl=tr'></script>

Sayfanızın uygun bir yerine script tagını yerleştirin.

Aşama 4

Şimdi reCAPTCHA görünmesini istediğimiz yere form kodunu eklemeliyiz.

<div class="g-recaptcha"data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

Note: data-sitekey özelliği bizim anahtarımızın değerini düzenleyecek, bu taklit edilemez bir değer olacak.

Bu noktada reCAPTCHA işlevselliğini ve görünümünü özelleştirmek için düzenlemeler ekleyebilirsiniz.Örneğin, div'e kullanıcı arayüzü(user interface) daha uygun olabilecek koyu versiyonu kullanmak için data-theme="dark" eklemek gibi.

resim6

reCAPTCHA yapılandırılmasıyla ilgili daha fazla ayrıntılara buradan bakabilirsiniz.


reCaptcha’yi son hali ile kullanma

Şimdi tüm çalışmayı bir araya getirip, kullanalım.

Aşama 1

Basit bir form içine script etiketi ve div ‘i ekleyelim. :

<!DOCTYPE html><html lang="en">  <head>    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title></head>  <body>    <form action=""method="post">      <label for="name">Name:</label>      <input name="name"required><br />      <label for="email">Email:</label>      <input name="email"type="email"required><br />      <div class="g-recaptcha"data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>      <input type="submit"value="Submit"/>    </form>    <!--js-->    <script src='https://www.google.com/recaptcha/api.js'></script>  </body></html>

Burada isim girdisi, email girdisi ve gönderme butonu içeren bir form ile bare-bones(temel html yapısı) sayfa yapısını kullandık. Şu an herhangi sitil vermedik.

 

Barebones sayfa yapısı içeren bir örnek
<html>
<head>
<title> En basit HTML örneği
</title>
</head>
<body>
<h1> Bu bir HTML sayfasıdır. </h1>
</body>
</html>

 

resim7

reCAPTCHA testinin çalışması ve bizi sonraki adıma taşıması için bazı sunucu taraflı denetimleri çalıştırmak gerekmektedir. Biz bunu PHP ile yapacağız. index.php adıyla yeni bir projeye bu dosyayı kaydedin.

Aşama 2

Formun metodunun post olduğunu farkedeceksiniz, bu yüzden biz form verilerini gönderdiğimiz zaman bir dizi değişkeni içinde bu sayfaya geri dönecektir. Biz bu geriye dönenleri döngü ile değişkenlerin çıktısını alabiliriz, yani sayfanızın bir yerine aşağıdakileri ekleyin.

<?php 
  foreach($_POSTas$key=> $value) {
    echo'<p><strong>'. $key.':</strong> '.$value.'</p>';
  }
?>

$_POST dizisindeki mevcut her anahtar/değer çiftini ve biçimlendirmelerin çıktısını alıyoruz. Formu gönderdiğimiz zaman aşağıdaki gibi bir çıktı görmeliyiz:

resim8

İsim ve e-postası için döndürülen değeri ayrıca g-recaptcha-response için de karışık bir değeri göreceğiz. CAPTCHA testini tamamlama işleminde başarısız olursak, bu değer boş olacaktır. Eğer “Ben bir robot değilim” kutusuna işaretleme yaptıysak, karakterlerden oluşan büyük bir string göreceğiz. 
Bu bizim Google’a göndermemiz için gerekli olan değerdir, böylece doğrulanabilir olur.

Aşama 3

Ne mutlu ki, Google geliştirici ekibi burada bizim için en zor işi yapmış. Github üzerinden ReCAPTCHA projesine gidin ve recaptchalib.php kütüphanesinin bir kopyasını indirin. Projenize yerleştirelim ve daha sonra index.php dosyasının en üstünde çalıştıralım.

<?php 
  foreach($_POSTas$key=> $value) {
    echo'<p><strong>'. $key.':</strong> '.$value.'</p>';
  }
?>

Aşama 4

Bu kütüphane bir HTTP isteği aracılığıyla Google’a g-recaptcha-response(gizli anahtarımız ile) gönderen fonksiyonlar grubu içerir. CAPTCHA’nin başarılı olup olmadığını kontrol eder daha sonra yanıt verir. Bunu kullanmak için öncelikle PHP kapatma etiketinden önce değişkenler ile aşağıdaki işlemi yapmalıyız.

// gizli 
key$secret= "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";
// boş yanıt
$response= null;
// gizli anahtar kontrolü
$reCaptcha= newReCaptcha($secret);


ReCaptcha() bizim gizli anahtarımızın mevcut olup olmadığını görmek için kontrol eder. Eğer kesemez ise, süreci ve tavsiyeleri bizim için gider ve bir tane alır. Daha sonra aşağıdakiler aracılığıyla bilgilerinizi çalıştırır.

// gönderilen onay yanıtı ise
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

Aşama 5

Gönderilen formumuzun tümünün çok iyi olduğunu varsayarak, $response değişkeni “başarılı” şeklinde geri rapor verecektir ve biz form verilerinin işlemlerini sürdürebiliriz.

İşte nasıl göründüklerine dair:  form içinde bir döngüye girelim...

<?php
  if ($response != null && $response->success) {
    echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
  } else {
?>

Son olarak, formdan sonra bir kapanış PHP etiketi ekleyin:

<?php } ?>


Başarıyla gönderildiği sürece küçük bir teşekkür bildirisi görüntülenir.

 

Sizler için CodePen üzerinde uyguladık test edebilirsiniz.

Bir sonraki yazıda görüşmek dileğiyle arkadaşlar. Esen kalın 🙂


Bunları da beğenebilirsin

Yazar hakkında

Hakan Karataş

Back-End Developer @Webmaster.Kitchen.

Ağırlıklı olarak Back-end tarafında bilgi, birikim ve yeni öğrendiğim bilgiler ile mutfakta yer almaktayım. Görüş, düşünce ve tecrübelerinizi bizlerle paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Tümünü gör

Yorumlar

11 Yorumlar

Bir yorum yaz 

google-recaptcha-nocaptcha-uygulamas-ben-robot-deilim