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à v3.
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. Việc tải reCAPTCHA không đồng bộ không ảnh hưởng đến khả năng xác định lưu lượng truy cập đáng ngờ. Do các lợi ích về hiệu suất của tập lệnh không đồng bộ, bạn nên tải reCAPTCHA 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ự tập lệnh có thể đủ để ngăn chặn tình trạng tương tranh. Ngoài ra, bạn có thể ngăn tình trạng tương tranh bằng cách thêm đoạn mã sau vào 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 = {};
}
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>
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 không thể tải reCAPTCHA không đồng bộ, bạn nên thêm gợi ý tài nguyên preconnect cho reCAPTCHA. Điều này sẽ giảm thiểu thời gian tải tập lệnh xuống chặn trình phân tích cú pháp.
Sử dụng gợi ý 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 lệ 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 đó, bạn không nên đợi tải reCAPTCHA cho đến khi một hành động bị hạn chế cụ thể xảy ra (ví dụ: gửi biểu mẫu).