Bu belgede, reCAPTCHA komut dosyası etiketini yüklemeyle ilgili en iyi uygulamalar anlatılmaktadır. Bu bilgiler hem reCAPTCHA v2 hem de v3 için geçerlidir.
reCAPTCHA eşzamansız olarak yükleniyor
Tüm reCAPTCHA sürümleri eşzamansız olarak yüklenebilir. reCAPTCHA yükleniyor Eşzamansız kullanımı, şüpheli trafiği tanımlama becerisini etkilemez. Teslim tarihi eşzamansız komut dosyalarının performans avantajları hakkında bilgi edinerek reCAPTCHA'yı yükleyebilirsiniz. genellikle eşzamansız olarak yapılması ö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, sıralamayı ayarlamak ırkı önlemek için yeterli olabilir.
koşullar. 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() kullanıyorsanız aşağıdaki kod snippet'ini ekleyerek
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 = {
ready: function(cb) {
// 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);
}
};
}
// 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. reCAPTCHA yüklenmeden önce onload geri çağırması tanımlanmalıdır
komut dosyası.
<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. Böylece,
komut dosyası indirme işleminin ayrıştırıcıyı engellediği süre.
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. 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>
Tembel Yükleme
Genel anlamda, reCAPTCHA'nın bir sayfa hakkında ne kadar fazla bağlamı olursa o kadar iyi olur. kullanıcı işlemlerinin meşru olup olmadığını belirlemek için bilgilendirildiğini belirtiyor. Bu özellikle de reCAPTCHA'nın kullanıcılara dayalı olmayan, meydan okumalara değineceğiz. 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.