Bu belgede, reCAPTCHA komut dosyası etiketini yüklemeyle ilgili en iyi uygulamalar açıklanmaktadır. Bu bilgiler hem reCAPTCHA v2 hem de v3 için geçerlidir.
reCAPTCHA'yı eşzamansız olarak yükleme
Tüm reCAPTCHA sürümleri eşzamansız olarak yüklenebilir. reCAPTCHA'nın eşzamansız olarak yüklenmesi, şüpheli trafiği tespit etme özelliğini etkilemez. Eşzamansız komut dosyalarının performans avantajları nedeniyle, reCAPTCHA'nın genelde eşzamansız olarak yüklenmesi önerilir.
<script async src="https://www.google.com/recaptcha/api.js">
reCAPTCHA'yı eşzamansız olarak yüklerken reCAPTCHA'nın otomatik olarak yükleme bitene kadar kullanılır. Örneğin, aşağıdaki kod büyük olasılıkla ara:
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Bazı durumlarda, komut dosyası sıralamasını ayarlamak yarış koşullarını önlemek için yeterli olabilir. Alternatif olarak,
veya reCAPTCHA'yı yükleyen sayfalarda kod snippet'ini izler. Şunu kullanıyorsanız:
API çağrılarını sarmalamak için grecaptcha.ready() kodunu ekleyin. Aşağıdaki kod snippet'ini
istediğiniz zaman çağrılabilir.
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Alternatif olarak, v2 API kullanan siteler
onload geri çağırması; reCAPTCHA tamamlandığında onload geri çağırması yürütülür
yükleniyor. onload geri çağırma işlevi, reCAPTCHA komut dosyası yüklenmeden önce tanımlanmalıdır.
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
preconnect dahil reCAPTCHA'yı eşzamansız olarak yüklemek mümkün değilse
reCAPTCHA için kaynak ipuçlarının kullanılması önemle tavsiye edilir. Bu, komut dosyası indirme işleminin ayrıştırıcıyı engellediği süreyi en aza indirir.
Kaynak ipuçlarını kullanma
Dokümanın <head> bölümüne aşağıdaki kaynak ipuçları eklendiğinde,
kullanılan kaynakları teslim etmek için gereken süreyi
reCAPTCHA'yı tıklayın. preconnect kaynak ipucu, tarayıcıya bir
üçüncü taraf kaynaklı erken bağlantı.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Geç yükleme
Genel olarak, reCAPTCHA'nın bir sayfayla ilgili bağlamı ne kadar fazlaysa kullanıcı işlemlerinin meşru olup olmadığını belirleme konusunda o kadar bilgili olur. Bu durum, özellikle reCAPTCHA'nın kullanıcı istemlerine dayanmayan sürümleri kullanıldığında geçerlidir. Bu nedenle, belirli bir kısıtlanmış işleme kadar reCAPTCHA'nın yüklenmesini beklemek gerçekleşen (örneğin, form gönderme) genellikle önerilmez.