Görünmez reCAPTCHA

Bu sayfada, web sayfanızdaki görünmez reCAPTCHA'yı nasıl etkinleştireceğiniz ve özelleştireceğiniz açıklanmaktadır.

Görünmez reCAPTCHA'yı çağırmak için aşağıdakilerden birini yapabilirsiniz:

Görünmez reCAPTCHA'yı nasıl özelleştireceğinizi öğrenmek için Yapılandırmalar bölümüne bakın. Örneğin, dili veya rozet konumunu belirtebilirsiniz.

Kullanıcının CAPTCHA'yı başarıyla çözüp çözmediğini kontrol etmek için Kullanıcının yanıtını doğrulama bölümüne bakın.

Sorguyu bir düğmeye otomatik olarak bağla

Sayfanızda görünmez reCAPTCHA widget'ını kullanmanın en kolay yöntemi, gerekli JavaScript kaynağını eklemek ve html düğmenize birkaç özellik eklemektir. Gerekli özellikler: "g-recaptcha" sınıf adı, data-sitekey özelliğindeki site anahtarınız ve data-callback özelliğindeki captcha'nın tamamlanması için bir JavaScript geri çağırma işleminin adıdır.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Komut dosyası, HTTPS protokolü kullanılarak yüklenmelidir ve herhangi bir kısıtlama olmaksızın sayfadaki herhangi bir noktadan eklenebilir.

Sorgulamayı programlı bir şekilde bir düğmeye bağlayın veya sorgulamayı çağırın.

Bağlamayı erteleme, onload geri çağırma işlevinizi belirterek ve JavaScript kaynağına parametreler ekleyerek yapılabilir. Bu işlem, normal reCAPTCHA sorgulaması ile aynı şekilde çalışır.

Sorguyu programatik olarak çağırın.

reCAPTCHA doğrulamasını programatik olarak çağırmak, sorgulamayı data-size="invisible" özelliğiyle bir div içinde oluşturup programatik olarak yürütülme yöntemini çağırarak gerçekleştirilebilir.

  1. data-size="invisible" ile bir div oluşturun.

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Bir JavaScript yönteminden grecaptcha.execute çağrısı yapın.

    grecaptcha.execute();

    Geri çağırmanız yürütüldüğünde, JavaScript API'sından grecaptcha.render yöntemini çağırabilirsiniz.

Yapılandırma

JavaScript kaynak (api.js) parametreleri

Parametre Değer Açıklama
onload İsteğe bağlı. Tüm bağımlılıklar yüklendikten sonra yürütülecek geri çağırma işlevinizin adı.
oluşturmak açık
onload		 İsteğe bağlı. Widget'ın açık bir şekilde oluşturulup oluşturulmayacağı. Varsayılan olarak onload değerine ayarlanır. Bu ayar, widget'ı bulduğu ilk g-recaptcha etiketinde oluşturur.
hl Dil kodlarını inceleyin İsteğe bağlı. Widget'ı belirli bir dilde oluşturulmaya zorlar. Belirtilmemişse kullanıcının dilini otomatik olarak algılar.

g-recaptcha etiketi özellikleri ve grecaptcha.render parametreleri

g-recaptcha etiketi özelliği grecaptcha.render parametresi Değer Varsayılan Açıklama
veri-site anahtarı site anahtarı Site anahtarınız.
veri-rozeti rozet sağ alt sol alt satır içi sağ alt İsteğe bağlı. reCAPTCHA rozetini yeniden yerleştirin. "inline" (satır içi), CSS ile konumlandırabilmenizi sağlar.
data-size boy görünmez İsteğe bağlı. Bir div öğesine bağlı ve programlı olarak yürütülen görünmez bir widget oluşturmak için kullanılır.
veri-sekmedeksi sekme dizini 0 İsteğe bağlı. Meydan okumanın sekme dizini. Sayfanızdaki diğer öğeler tabindex kullanıyorsa bu, kullanıcının daha kolay gezinmesini sağlayacak şekilde ayarlanmalıdır.
veri geri çağırma geri çağırma İsteğe bağlı. Kullanıcı başarılı bir yanıt gönderdiğinde yürütülen geri çağırma işlevinizin adı. g-recaptcha-response jetonu, geri çağırmanıza aktarılır.
verilerin süresi dolan-geri arama süresi doldu geri arama İsteğe bağlı. reCAPTCHA yanıtının süresi dolduğunda ve kullanıcının yeniden doğrulama yapması gerektiğinde yürütülen geri çağırma işlevinizin adı.
veri hatası-geri çağırma hata geri arama İsteğe bağlı. reCAPTCHA bir hatayla (genellikle ağ bağlantısı) karşılaştığında yürütülen ve bağlantı yeniden kurulana kadar devam edemediğinde yürütülen geri çağırma işlevinizin adı. Burada bir işlev belirtirseniz kullanıcıya yeniden denemesi gerektiğini bildirmek sizin sorumluluğunuzdadır.
yer yer false İsteğe bağlı. Eklenti sahiplerinin sayfadaki mevcut reCAPTCHA kurulumlarına müdahale etmemeleri için. Yanıt doğruysa bu reCAPTCHA örneği ayrı bir kimlik alanının parçası olur.

JavaScript API

Yöntem Açıklama
grecaptcha.render(
)
kapsayıcı,
parametreler,
devral
) 		Kapsayıcıyı reCAPTCHA widget'ı olarak oluşturur ve yeni oluşturulan widget'ın kimliğini döndürür.
kapsayıcı
reCAPTCHA widget'ını oluşturacak HTML öğesi. Kapsayıcının (dize) kimliğini veya DOM öğesinin kendisini belirtin.
parametreler
Anahtar=değer çiftleri olarak parametreler içeren bir nesne. Örneğin, {"sitekey": "your_site_key", "theme": "light"}. grecaptcha.render parametrelerine bakın.
devral
İlgili parametre belirtilmezse öğede mevcut data-* özelliklerini kullanın. Parametreler, özelliklere göre öncelikli olur.
grecaptcha.execute(
opt_widget_id
) 		reCAPTCHA kontrolünü programatik olarak çağırın. Görünmez reCAPTCHA bir düğme yerine bir div öğesindeyse kullanılır.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır.
grecaptcha.reset(
opt_widget_id
) 		reCAPTCHA widget'ını sıfırlar.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır.
grecaptcha.getResponse(
opt_widget_id
) 		reCAPTCHA widget'ıyla ilgili yanıtı alır.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır.

Örnekler

Onload geri çağırmasından sonra açık oluşturma

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

İstemci tarafı doğrulamasından sonra görünmez reCAPTCHA sorgulaması çağrılır.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>