Pazartesi 23 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. Google reCaptcha/noCaptcha Uygulaması (Ben robot değilim.)
 Google reCaptcha/noCaptcha Uygulaması (Ben robot değilim.)
Google reCaptcha Ben Robot Değilim Yapımı
JavaScript PHP

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

Yazar : Hakan Karataş 10 Ekim 2016 17 Comments

İçindekiler

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

    • Aşama 1

    • Aşama 2

    • Aşama 3

    • Aşama 4

  • reCaptcha’yi son hali ile kullanma

    • Aşama 1

    • Aşama 2

    • Aşama 3

    • Aşama 4

    • Aşama 5

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.

<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 🙂
Etiketler: ben robot değilim Captcha nasıl yapılır captcha nedir captcha yapımı form doğrulama kodu Google ben robot değilim güvenlik doğrulama noCaptcha php captcha uygulaması reCaptcha üyelik formu doğrulama
Önceki Yazı
Sonraki Yazı

Hakan Karataş

author

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.

17 Yorumlar

  • Ali says:
    1 Mart 2017 at 23:07

    Eline sağlık,

    WP ADMİN PANELİ için eklentili yada eklentisiz nasıl olur?

    Reply
    • Bilal UÇAR says:
      2 Mart 2017 at 03:30

      WordPress için captcha eklentileri mevcuttur. Örnek olması açısından google-captcha

      Reply
  • instagram takipçi says:
    24 Nisan 2017 at 16:27

    çok işime yaradi bayi girişine koydum )

    Reply
  • Gokhan says:
    26 Nisan 2017 at 17:21

    peki recaptchayı koyunca ben robot değilim uygulamasını tamamlamadan giriş yapılıyormu
    yani kullanıcı adı ve şifre yi yazdım fakat recaptchayı yapmadım giriş yapabilirmiyim.
    aşmanın bi yolu varmı güvenli mi

    Reply
    • Furkan Baycan says:
      27 Nisan 2017 at 11:21

      Merhaba, Captcha uygulaması daha çok spam engellemek ve arkalı saldırı ihtimalinin ortadan kaldırılması için tasarlanmış bir sistemdir. Elbette asla aşılamaz denmez ancak her geçen gün bir çözme algoritması geliştiriliyor ve daha sonraki günlerde bu algoritmanın açığı kapatılıyor. Sorunu ilettiğin için teşekkür ediyoruz, bu konu hakkında bir makaleyi ilerleyen günlerde ele alacağız. 🙂

      Reply
  • hlsbhr says:
    29 Nisan 2017 at 10:59

    Çok uzun bir yazı olmasına ragmen işe yarar teşekkürler”

    Reply
  • ThugLifeBro's Life says:
    15 Haziran 2017 at 17:36

    Bu robot değilim olayı zamanızdan çalıyor!(Acil 30 saniyelik bir işimiz olsa yandık demektir!!)

    Reply
  • Barış Demir says:
    8 Temmuz 2017 at 11:59

    Çok faydalı bir anlatım olmuş eline sağlık

    Reply
  • Seyit Çağdaş says:
    26 Aralık 2017 at 19:20

    10 Numara

    Reply
  • Seyit Çağdaş says:
    26 Aralık 2017 at 19:22

    2018’e girmeden yaptım

    Reply
  • tahir says:
    23 Şubat 2018 at 22:14

    beyler ben bi siteye girmek için bu ben robot değilimi yapmam lazım fakat ben robot değilim işareti gelmiyor başka sitelerede giridm baktım oralarada üye olamıyorum doğrulayın diyor fakat doğrulama gelmiyor nasıl düzeltirim yardım lütfen

    Reply
  • Su Tesisatçısı says:
    4 Temmuz 2018 at 12:08

    çok teşekkürler, yararlı bir paylaşım olmuş. İstanbul kameralı su tesisat sitelerim için kullanacağım.

    Reply
  • semkar1 says:
    15 Kasım 2018 at 23:27

    slm bazı sitelerde örneğin her zaman girdiğim anket sitesinde bir süredir captcha kutucuğuna tıklayınca devamlı dönüyor ve durmuyor. bu nedenle siteye giremiyorum. bu neden oluyor ve nasıl çözüm bulabilirim. diğer sitelerde olmuyor

    Reply
  • fatih says:
    10 Aralık 2018 at 10:58

    arkadaş resmen şu google’ın -recaptcha’sı sapıttı…recaptcha onayının ardından foruma giriyorsun , topike post atıyorsun recaptcha’dan onay alıyorsun , sonra tekrardan karşında ,recaptcha ,yani sürekli bir döngü …bundan nasıl kurtulacağız ?
    teşekkürler.

    Reply
  • fikret says:
    24 Haziran 2019 at 10:18

    ya beyler benim robot musun kutucugu giti ne yapmam gerekiyor

    Reply
  • Aze pubgmobile says:
    22 Mayıs 2020 at 06:25

    Abi be ne yapsam bu bana bidaha gelmez

    Reply
  • MiroKarto73 says:
    8 Nisan 2021 at 14:16

    recaptcha ben robot değilim

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.