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 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 lợi ích về hiệu suất của tập lệnh không đồng bộ, nên tải reCAPTCHA không đồng bộ thường được đề xuất.
<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ể sử dụng reCAPTCHA cho đến khi tải xong. Ví dụ: mã sau đây có thể bị lỗi:
<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ể là đủ để ngăn chặn các tình huống tương tranh. Ngoài ra, bạn có thể ngăn chặn các tình huống tương tranh bằng cách đưa đoạn mã sau vào các trang tải reCAPTCHA. Nếu bạn đang dùng grecaptcha.ready() để bao bọc lệnh gọi API, hãy thêm đoạn mã sau đây để đảm bảo rằng có thể gọi reCAPTCHA 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>
Thay vào đó, các trang web sử dụng API v2 có thể 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 hoàn tất việc tải. Bạn phải xác định lệnh gọi lại onload trước khi tải tập lệnh reCAPTCHA.
<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 một cách không đồng bộ, bạn nên đưa các gợi ý về tài nguyên preconnect vào reCAPTCHA. Việc này sẽ giảm thiểu khoảng thời gian mà tập lệnh tải xuống 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 vào <head> của tài liệu sẽ giúp giảm thời gian cần thiết để phân phối tài nguyên mà
reCAPTCHA sử dụng. Gợi ý 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
Nhìn chung, reCAPTCHA có càng nhiều ngữ cảnh về một trang thì bạn càng có nhiều thông tin để xác định xem hành động của người dùng có hợp pháp hay không. Điều này đặc biệt đúng khi sử dụng các phiên bản reCAPTCHA không dựa vào thử thách của người dùng. Do đó, bạn không nên đợi reCAPTCHA tải cho đến khi xảy ra một hành động cụ thể bị hạn chế (ví dụ: gửi biểu mẫu).