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ğı ve g-recaptcha etiketi. g-recaptcha etiketi g-recaptcha sınıf adında bir DIV öğesi ve site anahtarınızı data-sitekey özelliği:

<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 geçerlidir.

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

Oluşturmayı ertelemek, onload geri çağırma işlevinizi belirterek gerçekleştirilebilir JavaScript kaynağına parametre eklemektir.

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

    <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şleminiz yürütüldüğünde grecaptcha.render yöntemini çağırabilirsiniz. JavaScript API'sinden.

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 explicit
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
data-sitekey site anahtarı Site anahtarınız.
data-theme tema koyu ışık açık İsteğe bağlı. Widget'ın renk teması.
veri boyutu beden kompakt normal normal İsteğe bağlı. Widget'ın boyutu.
data-tabindex 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.
data-callback 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.
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 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 (ö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ğ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>