reCAPTCHA s2

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

Widget'ı görüntülemek için:

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

Kullanıcının CAPTCHA'yı başarıyla çözüp çözmediğini kontrol etmek için Kullanıcı 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 yöntemi, gerekli JavaScript kaynağını ve bir g-recaptcha etiketini eklemektir. g-recaptcha etiketi, sınıf adı g-recaptcha ve site anahtarınız data-sitekey özelliğinde olan 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üklenmelidir ve herhangi bir kısıtlama olmadan sayfadaki herhangi bir noktadan eklenebilir.

reCAPTCHA widget'ını açık bir şekilde oluşturma

Oluşturma işlemini ertelemek için onload geri çağırma işlevinizi belirtip JavaScript kaynağına parametreler ekleyebilirsiniz.

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

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

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

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

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

Yapılandırma

JavaScript kaynağı (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 seçeneği kullanılır. Bu işlem widget'ı bulduğu ilk g-recaptcha etikette oluşturur.
hl Dil kodlarına bakın İsteğe bağlı. Widget'ı belirli bir dilde oluşturmaya zorlar. Dil belirtilmezse 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-teması tema koyu ışık hafif İsteğe bağlı. Widget'ın renk teması.
data-size beden kompakt normal normal İsteğe bağlı. Widget'ın boyutu.
veri-sekme-dizini sekme dizini 0 İsteğe bağlı. Widget ve testin sekme dizini. Sayfanızdaki diğer öğeler tabindex kullanıyorsa, kullanıcının gezinmesini kolaylaştırmak için sekme dizini 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 iletilir.
veri-süresi dolan-geri-arama süresi dolmuş geri çağırma İ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-arama hata-geri-arama İsteğe bağlı. reCAPTCHA bir hatayla (genellikle ağ bağlantısı) karşılaştığında yürütülen geri çağırma işlevinizin adı ve bağlantı yeniden kurulana kadar devam edemez. Burada bir işlev belirtirseniz kullanıcıya tekrar denemesi 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.
kapsayıcı
reCAPTCHA widget'ını oluşturacak HTML öğesi. Kapsayıcının kimliğini (dize) veya DOM öğesinin kimliğini belirtin.
parametreler
Anahtar=değer çiftleri olarak parametreler içeren bir nesne. Örneğin, {"siteanahtarı": "sitenizin_anahtarı", "theme": "light"}. grecaptcha.render parametrelerine bakın.
grecaptcha.reset(
opt_widget_id
) 		reCAPTCHA widget'ını sıfırlar.
opt_widget_id
İsteğe bağlı widget kimliği, belirtilmediyse varsayılan olarak oluşturulan ilk widget'tı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, belirtilmediyse varsayılan olarak oluşturulan ilk widget'tır.

Örnekler

Bir onload geri çağırması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>