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'ı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ı yanıtını doğrulama bölümüne bakın.

reCAPTCHA widget'ını otomatik olarak oluşturma

reCAPTCHA widget'ını sayfanızda oluşturmanın en kolay yolu, gerekli JavaScript kaynağını ve bir g-recaptcha etiketini eklemektir. g-recaptcha etiketi, sınıf adı g-recaptcha ve data-sitekey özelliğinde site anahtarınızı içeren 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 sayfadaki herhangi bir noktadan kısıtlama olmadan dahil edilebilir.

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

Oluşturma işlemini ertelemek için onload geri çağırma işlevinizi belirtmeniz gerekir JavaScript kaynağına parametre eklemektir.

  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 ada ayarlayarak JavaScript kaynağını ekleyin onload geri çağırma işlevinizin 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şleviniz 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ı.
render explicit
onload		 İsteğe bağlı. Widget'ın açık bir şekilde oluşturulup oluşturulmayacağı. Varsayılan olarak onload değerini alır. Bu durumda widget, bulduğu ilk g-recaptcha etiketinde oluşturulur.
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
data-sitekey sitekey Site anahtarınız.
data-theme theme dark light light İsteğe bağlı. Widget'ın renk teması.
data-size size compact normal normal İsteğe bağlı. Widget'ın boyutu.
data-tabindex tabindex 0 İsteğe bağlı. Widget'ın ve zorluğun sekme dizini. Sayfanızdaki diğer öğeler sekme dizini kullanıyorsa bu öğe, kullanıcıların gezinmesini kolaylaştıracak şekilde ayarlanmalıdır.
data-callback callback İ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 aramanıza iletilir.
data-expired-callback expired-callback İ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ı.
data-error-callback error-callback İ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 yeniden denemesi gerektiğini bildirme sorumluluğu size aittir.

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 kimliğini belirtin.
. parametreler
Anahtar=değer çiftleri olarak parametreler içeren bir nesne (ör. {"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ğidir. Belirtilmemişse varsayılan olarak oluşturulan ilk widget'ı kullanı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>