Tài liệu này thảo luận các phương pháp hay nhất để tải thẻ tập lệnh reCAPTCHA. Thông tin này áp dụng cho cả reCAPTCHA v2 và 3.
Tải reCAPTCHA không đồng bộ
Bạn có thể tải không đồng bộ tất cả các phiên bản của reCAPTCHA. Đang tải reCAPTCHA không ảnh hưởng đến khả năng xác định lưu lượng truy cập đáng ngờ. Hạn vào các lợi ích về hiệu suất của tập lệnh không đồng bộ, tải reCAPTCHA thường được đề xuất không đồng bộ.
<script async src="https://www.google.com/recaptcha/api.js">
Khi tải reCAPTCHA không đồng bộ, hãy lưu ý rằng bạn không thể tải reCAPTCHA được sử dụng cho đến khi tải xong. Ví dụ: mã sau đây có thể ngắt:
<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>
Trong một số trường hợp, việc điều chỉnh thứ tự của tập lệnh có thể là đủ để ngăn chặn tình huống tương tranh
. Ngoài ra, bạn có thể ngăn các tình huống tương tranh bằng cách bao gồm
đoạn mã sau đây trên các trang tải reCAPTCHA. Nếu bạn đang sử dụng
grecaptcha.ready() để gói các lệnh gọi API, hãy thêm đoạn mã sau đây để đảm bảo
reCAPTCHA có thể được gọi bất cứ lúc nào.
<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>
Ngoài ra, các trang web sử dụng API v2 có thể thấy hữu ích khi sử dụng
lệnh gọi lại onload; lệnh gọi lại onload được thực thi khi reCAPTCHA kết thúc
đang tải. Bạn phải xác định lệnh gọi lại onload trước khi tải reCAPTCHA
tập lệnh.
<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>
Nếu bạn không thể tải reCAPTCHA không đồng bộ, bao gồm cả preconnect
bạn nên sử dụng gợi ý tài nguyên cho reCAPTCHA. Việc này sẽ giảm thiểu
khoảng thời gian mà tập lệnh tải xuống sẽ chặn trình phân tích cú pháp.
Sử dụng gợi ý về tài nguyên
Việc đưa các gợi ý tài nguyên sau đây vào <head> của tài liệu sẽ
giảm lượng thời gian cần thiết để phân phối tài nguyên mà
reCAPTCHA. Gợi ý về tài nguyên preconnect hướng dẫn trình duyệt thiết lập
kết nối sớm với nguồn gốc của bên thứ ba.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Tải từng phần
Nói chung, reCAPTCHA có càng nhiều ngữ cảnh về một trang thì càng tốt là xác định xem hành động của người dùng có hợp pháp hay không. Đây là đặc biệt đúng khi sử dụng các phiên bản reCAPTCHA không phụ thuộc vào người dùng thách thức. Do đó, chờ tải reCAPTCHA cho đến khi có một hành động bị hạn chế cụ thể xảy ra (ví dụ: gửi biểu mẫu).