reCAPTCHA s2

Bu sayfada, web sayfanızda reCAPTCHA v2 widget'ın nasıl görüntüleneceği ve özelleştirileceği açıklanmaktadır.

Widget'ı görüntülemek için aşağıdakilerden birini yapabilirsiniz:

Widget'ınızı nasıl özelleştireceğinizi öğrenmek için Yapılandırmalar bölümüne bakın. Örneğin, widget'ın dilini veya temasını belirtmek isteyebilirsiniz.

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 başlıklı makaleye bakın.

reCAPTCHA widget'ını otomatik olarak oluşturma

Sayfanızda reCAPTCHA widget'ını oluşturmanın en kolay yolu, gerekli JavaScript kaynağını ve g-recaptcha etiketini eklemektir. g-recaptcha etiketi, g-recaptcha sınıf adına ve site anahtarınızın data-sitekey özelliğinde yer alan bir DIV öğesidir:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Komut dosyası, HTTPS protokolü kullanılarak yüklenmeli ve sayfanın herhangi bir yerine kısıtlama olmadan dahil edilebilir.

reCAPTCHA widget'ını açıkça oluşturun

Oluşturmayı ertelemek, geri yükleme işlevinizi belirterek ve JavaScript kaynağına parametreler ekleyerek yapılabilir.

  1. onload geri çağırma işlevinizi belirtin. Bu işlev, tüm bağımlılar yüklendiğinde çağrılır.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. JavaScript kaynağını ekleyin, onload parametresini onupload geri çağırma işlevinizin adı ve render parametresini explicit olarak ayarlayın.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

    Geri çağırma işlemi yürütüldüğünde grecaptcha.render yöntemini JavaScript API'den çağırabilirsiniz.

Yapılandırma

JavaScript kaynak (api.js) parametreleri

Parametre Değer Açıklama
yükleme İsteğe bağlı. Tüm bağımlılar yüklendikten sonra yürütülecek geri çağırma işlevinizin adı.
oluştur uygunsuz
yükleme		 İsteğe bağlı. Widget'ın açıkça oluşturulup oluşturulmayacağı. Varsayılan olarak açık yükleme seçeneği bulunur. Bu, widget'ı bulduğu ilk g-recaptcha etiketinde oluşturulur.
hl Dil kodlarını inceleyin. İsteğe bağlı. Widget'ı belirli bir dilde oluşturmaya zorlar. Belirtilmemesi halinde kullanıcının dilini otomatik olarak algılar.

g-recaptcha etiket özellikleri ve grecaptcha.render parametreleri

g-recaptcha etiketi özelliği grecaptcha.render parametresi Değer Varsayılan Açıklama
veri-siteanahtari siteanahtarı Site anahtarınız.
veri teması tema koyu ışık ışık İsteğe bağlı. Widget'ın renk teması.
veri boyutu boy kompakt normal normal İsteğe bağlı. Widget'ın boyutu.
veri-sekmesi dizini sekme dizini 0 İsteğe bağlı. Widget'ın ve meydan okumanın sekme dizini. Sayfanızdaki diğer öğeler sekme dizini kullanıyorsa, kullanıcı tarafından gezinmeyi kolaylaştırmak için ayarlanmalıdır.
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 iletilir.
verilerin süresi doluyor süresi dolmuş geri arama İsteğe bağlı. reCAPTCHA yanıtının süresi dolduğunda ve kullanıcının yeniden doğrulaması gerektiğinde yürütülen geri çağırma işlevinizin adı.
veri-hata-geri çağırma geri çağırma hatası İsteğe bağlı. reCAPTCHA bir hatayla (genellikle ağ bağlantısıyla) karşılaştığında ve bağlantı yeniden kurulana kadar devam edebilen geri çağırma işlevinizin adı. Burada bir işlev belirtirseniz kullanıcıya yeniden deneme yapması gerektiğini bildirmek sizin sorumluluğunuzdadır.

JavaScript API

Yöntem Açıklama
grecaptcha.render(
kapsayıcı,
Parametreler
) 		Kapsayıcıyı bir reCAPTCHA widget'ı olarak oluşturur ve yeni oluşturulan widget'ın kimliğini döndürür.
container
reCAPTCHA widget'ını oluşturacak HTML öğesi. Kapsayıcının kimliğini (dize) veya DOM öğesinin kendisini belirtin.
parameters
Anahtar=değer çifti olarak parametre içeren bir nesne, örneğin, {"sitekey": "siteniz_anahtarı", "tema": "hafif"}. grecaptcha.render parametrelerine bakın.
grecaptcha.sıfırlama(
opt_widget_id
) 		reCAPTCHA widget'ını sıfırlar.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmemişse varsayılan olarak oluşturulan ilk widget'a ayarlanır.
grecaptcha.getResponse(
)
opt_widget_id
) 		reCAPTCHA widget'ının yanıtını alır.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmemişse varsayılan olarak oluşturulan ilk widget'a ayarlanır.

Örnekler

Bir geri yükleme çağrısından sonra açık oluşturma

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

Birden fazla widget için açık oluşturma

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>