Bu sayfada, web sayfanızdaki görünmez reCAPTCHA'yı nasıl etkinleştireceğiniz ve özelleştireceğiniz açıklanmaktadır.
Görünmez reCAPTCHA'yı çağırmak için aşağıdakilerden birini yapabilirsiniz:
- Sorguyu bir düğmeye otomatik olarak bağla veya
- Sorguyu programlı bir şekilde bir düğmeye bağlama veya
- Sorguyu programatik olarak çağırma
Görünmez reCAPTCHA'yı nasıl özelleştireceğinizi öğrenmek için Yapılandırmalar bölümüne bakın. Örneğin, dili veya rozet konumunu belirtebilirsiniz.
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 bölümüne bakın.
Sorguyu bir düğmeye otomatik olarak bağla
Sayfanızda görünmez reCAPTCHA widget'ını kullanmanın en kolay yöntemi, gerekli JavaScript kaynağını eklemek ve html düğmenize birkaç özellik eklemektir. Gerekli özellikler: "g-recaptcha
" sınıf adı, data-sitekey
özelliğindeki site anahtarınız ve data-callback
özelliğindeki captcha'nın tamamlanması için bir JavaScript geri çağırma işleminin adıdır.
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
<form id="demo-form" action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
<br/>
</form>
</body>
</html>
Komut dosyası, HTTPS protokolü kullanılarak yüklenmelidir ve herhangi bir kısıtlama olmaksızın sayfadaki herhangi bir noktadan eklenebilir.
Sorgulamayı programlı bir şekilde bir düğmeye bağlayın veya sorgulamayı çağırın.
Bağlamayı erteleme, onload geri çağırma işlevinizi belirterek ve JavaScript kaynağına parametreler ekleyerek yapılabilir. Bu işlem, normal reCAPTCHA sorgulaması ile aynı şekilde çalışır.
Sorguyu programatik olarak çağırın.
reCAPTCHA doğrulamasını programatik olarak çağırmak, sorgulamayı data-size="invisible"
özelliğiyle bir div içinde oluşturup programatik olarak yürütülme yöntemini çağırarak gerçekleştirilebilir.
data-size="invisible"
ile bir div oluşturun.<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
Bir JavaScript yönteminden grecaptcha.execute çağrısı yapın.
grecaptcha.execute();
Geri çağırmanız yürütüldüğünde, JavaScript API'sından
grecaptcha.render
yöntemini çağırabilirsiniz.
Yapılandırma
JavaScript kaynak (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 değerine ayarlanır. Bu ayar, widget'ı bulduğu ilk g-recaptcha etiketinde oluşturur. |
hl | Dil kodlarını inceleyin | İsteğe bağlı. Widget'ı belirli bir dilde oluşturulmaya zorlar. Belirtilmemişse 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-rozeti | rozet | sağ alt sol alt satır içi | sağ alt | İsteğe bağlı. reCAPTCHA rozetini yeniden yerleştirin. "inline" (satır içi), CSS ile konumlandırabilmenizi sağlar. |
data-size | boy | görünmez | İsteğe bağlı. Bir div öğesine bağlı ve programlı olarak yürütülen görünmez bir widget oluşturmak için kullanılır. | |
veri-sekmedeksi | sekme dizini | 0 | İsteğe bağlı. Meydan okumanın sekme dizini. Sayfanızdaki diğer öğeler tabindex kullanıyorsa bu, kullanıcının daha kolay gezinmesini sağlayacak şekilde 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 aktarılır. |
||
verilerin süresi dolan-geri arama | süresi doldu geri arama | İ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 çağırma | hata geri arama | İsteğe bağlı. reCAPTCHA bir hatayla (genellikle ağ bağlantısı) karşılaştığında yürütülen ve bağlantı yeniden kurulana kadar devam edemediğinde yürütülen geri çağırma işlevinizin adı. Burada bir işlev belirtirseniz kullanıcıya yeniden denemesi gerektiğini bildirmek sizin sorumluluğunuzdadır. | ||
yer yer | false | İsteğe bağlı. Eklenti sahiplerinin sayfadaki mevcut reCAPTCHA kurulumlarına müdahale etmemeleri için. Yanıt doğruysa bu reCAPTCHA örneği ayrı bir kimlik alanının parçası olur. |
JavaScript API
Yöntem | Açıklama |
---|---|
grecaptcha.render( ) kapsayıcı,
parametreler,
devral
)
|
Kapsayıcıyı 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 (dize) kimliğini veya DOM öğesinin kendisini belirtin. parametreler Anahtar=değer çiftleri olarak parametreler içeren bir nesne. Örneğin, {"sitekey": "your_site_key", "theme": "light"}. grecaptcha.render parametrelerine bakın. devral İlgili parametre belirtilmezse öğede mevcut data-* özelliklerini kullanın. Parametreler, özelliklere göre öncelikli olur. |
grecaptcha.execute( opt_widget_id
)
|
reCAPTCHA kontrolünü programatik olarak çağırın. Görünmez reCAPTCHA bir düğme yerine bir div öğesindeyse kullanılır. opt_widget_id İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır. |
grecaptcha.reset( opt_widget_id
)
|
reCAPTCHA widget'ını sıfırlar. opt_widget_id İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır. |
grecaptcha.getResponse( opt_widget_id
)
|
reCAPTCHA widget'ıyla ilgili yanıtı alır. opt_widget_id İsteğe bağlı widget kimliği, belirtilmezse varsayılan olarak oluşturulan ilk widget'tır. |
Örnekler
Onload geri çağırmasından sonra açık oluşturma
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : 'your_site_key',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
İstemci tarafı doğrulamasından sonra görünmez reCAPTCHA sorgulaması çağrılır.
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha" class="g-recaptcha"
data-sitekey="_your_site_key_"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>