Tek Sayfada Çoklu Google reCAPTCHA Kullanmak

Tek Sayfada Çoklu Google reCAPTCHA Kullanmak

/ Okuma süresi: 3 dk, 55 sn / Yorum (0)
A A A

Web sitelerimizde artık çokça kullanmaya başladığımız Google reCAPTCHA'nın tek sayfada birden çok formda nasıl kullanabileceğinizi anlatacağım bu yazımda.

Spam girişleri engellemek için kullandığımız güvenlik kodu uygulamalarında en popüler ve en güzeli herhalde Google amcanın bize sunduğu reCAPTCHA uygulamasıdır. Eğer sayfanızda tek bir reCAPTCHA uygulaması kullanıyorsanız diğer tek sayfadaki farklı formlara nasıl iki veya daha fazla reCAPTCHA ekleyeceğinizi anlatmaya çalışacağım.

Bunun için öncelikle buradan Google sayfasına giriş yapıp sitekey ve secret key diye iki adet kod almamız gerekiyor. Bunun için sitenin üst sağ köşesindeki "Get reCAPTCHA" butonuna tıklayıp giriş yapmadıysak Gmail/Google hesabınızla giriş yapıyorsunuz. Gerekli bilgileri girdikten sonra "Register" butonuna tıklayıp kayıt işini bitirip sitekey ve secret kodlarımızı alıyoruz.

Şimdi sıra geldi bu anahtarları kullanarak sitemize reCAPTCHA uygulamasını eklemeye.

Multple reCAPTCHA loaded on same Page
 
Örnek Html Form Kodları ve reCAPTCHA'lar;
 
<div class="container"> <div class="col-md-6"> <form class="form-signin" role="form" action="validateform.php" method="POST"> <div id="status"> </div> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required> <div id="recaptcha1"></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <div class="col-md-6"> <form class="form-signin" role="form" action="validateform.php" method="POST"> <div id="status"> </div> <h2 class="form-signin-heading">Sign Up Form</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required> <div id="recaptcha2"></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </div> <!-- /container -->

Gördüğünüz gibi div taglarının içinde id'lerde recaptcha1 ve recaptcha2 olarak adlandırılan alanlar var. Bunlar reCAPTCHA kodlarının gözükeceği alanlar. Bunları direkt olarak alıp sitenizdeki forma yapıştırın. Geri kalanları kendi formunuz için düzenleyin. Daha sonra aşağıdaki Javascript kodunu alıp sitenize yapıştırın. Burada sitekey kısmını kendi sitekey değirinizle değiştirin.

Javscript Kodu

 <script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script> <script> var recaptcha1; var recaptcha2; var myCallBack = function() { //Render the recaptcha1 on the element with ID "recaptcha1" recaptcha1 = grecaptcha.render('recaptcha1', { 'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key 'theme' : 'light' }); //Render the recaptcha2 on the element with ID "recaptcha2" recaptcha2 = grecaptcha.render('recaptcha2', { 'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key 'theme' : 'dark' }); }; </script>

Hepsi bu kadar artık sitenizde tek sayfada birden fazla reCAPTCHA kullanabilirsiniz. İndirme linkinden örneği inceleyerek bu formu nasıl işleyeceğinizi yani doğrulamayı nasıl yapacağınızı görebilirsiniz.

Makalenin orjinal metnine buradan ulaşabilirsiniz.

Bu yazıyı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 1955 kez okundu.
Yazıya ait etiketler
Ogznet.com

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

" Tek Sayfada Çoklu Google reCAPTCHA Kullanmak konulu makalemizde Ogznet.com olarak sizlere Tek Sayfada Çoklu Google reCAPTCHA Kullanmak ile ilgili bilgiler aktarmak istedik. Hemen yukarıda Tek Sayfada Çoklu Google reCAPTCHA Kullanmak ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

Adblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
Firefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
Ghostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.