W tym dokumencie omawiamy sprawdzone metody ładowania tagu skryptu reCAPTCHA. Te informacje dotyczą zarówno reCAPTCHA v2, jak i v3.
Ładowanie reCAPTCHA asynchronicznie
Wszystkie wersje reCAPTCHA można wczytywać asynchronicznie. Wczytuję reCAPTCHA asynchronicznie nie wpływa na możliwość rozpoznawania podejrzanego ruchu. Termin z korzyściami związanymi z wydajnością skryptów asynchronicznych, wczytanie reCAPTCHA asynchronicznie.
<script async src="https://www.google.com/recaptcha/api.js">
Podczas ładowania reCAPTCHA asynchronicznie pamiętaj, że nie można go używać, dopóki nie zostanie w pełni załadowany. Na przykład poniższy kod byłby prawdopodobnie przerwa:
<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>
W niektórych sytuacjach do uniknięcia warunków wyścigu wystarczy zmiana kolejności skryptów. Możesz też zapobiec wystąpieniu warunków wyścigu, umieszczając na stronach, na których wczytuje się reCAPTCHA, następujący fragment kodu. Jeśli używasz
grecaptcha.ready(), aby opakowywać wywołania interfejsu API, dodaj ten fragment kodu, aby mieć pewność,
który można w każdej chwili wywołać.
<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>
Alternatywnie witryny korzystające z interfejsu API w wersji 2 mogą używać interfejsu API w wersji 2
wywołanie zwrotne onload; po zakończeniu reCAPTCHA wykonywane jest wywołanie zwrotne onload
wczytuję. Przed wczytaniem reCAPTCHA należy zdefiniować wywołanie zwrotne onload
skrypt.
<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>
Jeśli wczytywanie reCAPTCHA asynchronicznie nie jest możliwe, zdecydowanie zalecamy uwzględnienie preconnectwskazówek dotyczących zasobów reCAPTCHA. Pozwoli to zminimalizować czas, przez jaki pobieranie skryptu blokuje parsowanie.
Korzystanie ze wskazówek dotyczących zasobów
Uwzględnienie tych wskazówek dotyczących zasobów w <head> dokumentu pozwoli skrócić czas dostarczania zasobów używanych przez reCAPTCHA. Wskazówka dotycząca zasobu preconnect instruuje przeglądarkę, aby ustanowiła
wcześniejszego połączenia z innym źródłem.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Leniwe ładowanie
Ogólnie rzecz biorąc, im więcej informacji o stronie ma reCAPTCHA, tym lepiej może określić, czy działania użytkownika są uzasadnione. To jest zwłaszcza w przypadku korzystania z wersji reCAPTCHA, które nie wymagają od użytkownika, . Dlatego oczekiwanie na wczytanie reCAPTCHA do określonego ograniczonego działania (np. przesłanie formularza) zwykle nie jest zalecane.