Image by Simon Steinberger from Pixabay

Tek Sayfada Çoklu Google reCAPTCHA Kullanımı

Birden fazla form içeren sayfalarda spam doğrulama için her zaman birden fazla reCAPTCHA gerekir. Google yeni reCAPTCHA kütüphanesi ile ”Ben bir robot değilim” ve Javascript parametresi ile bu çoklu doğrulamayı kolayca yapabilirsiniz.

Spam girişleri engellemek için kullandığımız güvenlik kodu uygulamalarında en popüler ve en güzeli herhalde Google'ın 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 "Admin Console" linkine tıklayıp giriş yapmadıysak Gmail/Google hesabınızla giriş yapıyorsunuz. Buradan siteniz için reCAPTCHA girişi yapıp kodları alın.

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

<div class="container">
 <div class="col-md-6">
 <form class="form-signin" role="form" action="form.php" method="POST">
 <div id="status">
 </div>
 <h2 class="form-signin-heading">Giriş</h2>
 <label for="inputEmail" class="sr-only">Email</label>
 <input type="email" id="inputEmail" class="form-control" placeholder="Email adresi" required autofocus>
 <label for="inputPassword" class="sr-only">Şifre</label>
 <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Şifre" required>
 <div id="recaptcha1"></div>
 <button class="btn btn-lg btn-primary btn-block" type="submit">Giriş</button>
 </form>
 </div>
 <div class="col-md-6">
 <form class="form-signin" role="form" action="form2.php" method="POST">
 <div id="status">
 </div>
 <h2 class="form-signin-heading">Kayıt</h2>
 <label for="inputEmail" class="sr-only">Email</label>
 <input type="email" id="inputEmail" class="form-control" placeholder="Email adresi" required autofocus>
 <label for="inputPassword" class="sr-only">Şifre</label>
 <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Şifre" required>
 <div id="recaptcha2"></div>
 <button class="btn btn-lg btn-primary btn-block" type="submit">Kayıt</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ı aşağıdaki indirme linkinden indireceğiniz örnek kodlardan görebilirsiniz. Bu alanları kendi formunuz için düzenleyin. Daha sonra örnekteki gibi Javascript kodunu sitenize ekleyin. Burada sitekey kısmını kendi sitekey değirinizle değiştirin.

 <script class="lazyload img-fullwidth" src="https://cdn.ogznet.com/assets/img/empty.webp" data-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' : 'XXX', //Replace this with your Site key
 'theme' : 'light'
 });
 
 //Render the recaptcha2 on the element with ID "recaptcha2"
 recaptcha2 = grecaptcha.render('recaptcha2', {
 'sitekey' : 'XXX', //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.

0
0
0
0
0
0
Yazıyı emoji ile değerlendir..

Yorumlar

    Bu yazıya henüz yorum yapılmamış. İlk yorumu yapan siz olun!
Yorum Yaz

Spam kodu:

Kapatmak için ESC tuşuna basın