במסמך הזה מפורטות שיטות מומלצות לטעינת תג הסקריפט של reCAPTCHA. המידע הזה רלוונטי גם לגרסה 2 וגם לגרסה 3 של reCAPTCHA.
reCAPTCHA באופן אסינכרוני בטעינה
ניתן לטעון את כל הגרסאות של ה-reCAPTCHA באופן אסינכרוני. המערכת טוענת את reCAPTCHA לא משפיעה באופן אסינכרוני על היכולת לזהות תנועה חשודה. לתשלום ליתרונות הביצועים של סקריפטים אסינכרוניים, טעינת reCAPTCHA באופן אסינכרוני מומלץ בדרך כלל.
<script async src="https://www.google.com/recaptcha/api.js">
כשטוענים reCAPTCHA באופן אסינכרוני, חשוב לזכור שלא ניתן להפעיל את reCAPTCHA בשימוש עד לסיום הטעינה. לדוגמה, סביר להניח שהקוד הבא break:
<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>
במצבים מסוימים, שינוי הסדר של הסקריפט עשוי להספיק כדי למנוע מרוץ תהליכים.
את התנאים וההגבלות. לחלופין, ניתן למנוע מרוץ תהליכים על-ידי הוספת
את קטע הקוד הבא בדפים שטוענים את reCAPTCHA. אם משתמשים
grecaptcha.ready() כדי לארוז קריאות ל-API, צריך להוסיף את קטע הקוד הבא כדי לוודא
שאפשר לקרוא ל-reCAPTCHA בכל שלב.
<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>
במקום זאת, באתרים שמשתמשים ב-API v2 יכולים להיעזר ב-
הקריאה החוזרת של onload; הקריאה החוזרת של onload תתבצע בסיום ה-reCAPTCHA
בטעינה. יש להגדיר את הקריאה החוזרת (callback) של onload לפני טעינת ה-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>
אם אין אפשרות לטעון reCAPTCHA באופן אסינכרוני, כולל preconnect
מומלץ מאוד להשתמש ברמזים של משאבים ל-reCAPTCHA. הפעולה הזו תצמצם את
משך הזמן שבו הורדת הסקריפט תחסום את המנתח.
שימוש ברמזים של משאבים
אם כוללים את הרמזים הבאים לגבי המשאבים ב<head> של המסמך,
להפחית את משך הזמן שנדרש לאספקת המשאבים.
reCAPTCHA. הרמז של המשאב preconnect מורה לדפדפן ליצור
קשר מוקדם עם מקור של צד שלישי.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
טעינה מושהית
באופן כללי, ככל שיש יותר הקשר לגבי דף מסוים ב-reCAPTCHA, כך עדיף היא כדי לקבוע אם פעולות משתמש הן לגיטימיות. הדבר במיוחד נכון כשמשתמשים בגרסאות של reCAPTCHA שלא מסתמכות על משתמשים לאתגרים. לכן, בהמתנה לטעינת reCAPTCHA עד לביצוע פעולה מוגבלת ספציפית. (לדוגמה, שליחת טופס) בדרך כלל לא מומלץ.