Ten dokument zawiera omówienie sprawdzonych metod wczytywania tagu skryptu reCAPTCHA. Ta informacja dotyczy zarówno reCAPTCHA v2, jak i v3.
Niesynchroniczne ładowanie reCAPTCHA
Wszystkie wersje reCAPTCHA mogą być wczytywane asynchronicznie. Asynchroniczne wczytywanie reCAPTCHA nie wpływa na jego zdolność do wykrywania podejrzanego ruchu. Ze względu na wydajność skryptów asynchronicznych zalecaną jest asynchroniczne wczytywanie reCAPTCHA.
<script async src="https://www.google.com/recaptcha/api.js">
Podczas wczytywania asynchronicznego pliku reCAPTCHA pamiętaj, że nie można go używać do momentu zakończenia ładowania. Na przykład taki kod powinien zostać uszkodzony:
<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 przypadkach zmiana kolejności skryptów może wystarczyć, aby zapobiec sytuacjom wyścigu. Aby uniknąć warunków wyścigu, możesz też umieścić ten fragment kodu na stronach, które wczytują reCAPTCHA. Jeśli do pakowania wywołań interfejsu API używasz grecaptcha.ready(), dodaj ten fragment kodu, by umożliwić wywołanie reCAPTCHA w dowolnym momencie.
<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>
Zamiast tego strony w interfejsie API w wersji 2 mogą używać wywołania zwrotnego onload. Wywołanie zwrotne onload jest wykonywane po zakończeniu wczytywania reCAPTCHA. Przed wczytaniem skryptu reCAPTCHA należy zdefiniować wywołanie zwrotne onload.
<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 nie jest możliwe ładowanie reCAPTCHA asynchronicznie, zalecamy dodanie preconnect wskazówek dotyczących zasobów dla reCAPTCHA. Spowoduje to zminimalizowanie czasu, przez który pobieranie skryptu zablokuje parser.
Korzystanie ze wskazówek dotyczących zasobów
Uwzględnienie wskazówek dotyczących zasobów w <head> dokumentu skróci czas potrzebny na dostarczenie zasobów używanych przez reCAPTCHA. Wskazówka dotycząca zasobów preconnect informuje przeglądarkę o konieczności nawiązania wcześniejszego połączenia z źródłem zewnętrznym.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Leniwe ładowanie
Ogólnie mówiąc, im większy kontekst strony mamy, tym lepiej wiemy, czy działania użytkowników są prawidłowe. Jest to szczególnie widoczne w przypadku wersji reCAPTCHA, które nie wykorzystują testów zabezpieczających logowanie na urządzeniach użytkowników. Z tego względu zwykle nie zalecamy oczekiwania na załadowanie reCAPTCHA do momentu wykonania określonego ograniczonego działania (na przykład przesłania formularza).