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.
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>
onload
parametresini onload geri çağırma işlevinizin adına verender
parametresiniexplicit
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>