דף זה תורגם על ידי Cloud Translation API.

טעינת reCAPTCHA מתבצעת

במסמך הזה מפורטות שיטות מומלצות לטעינת תג הסקריפט של reCAPTCHA. המידע הזה רלוונטי גם ל-reCAPTCHA בגרסה 2 וגם ל-reCAPTCHA בגרסה 3.

reCAPTCHA באופן אסינכרוני בטעינה

אפשר לטעון את כל הגרסאות של reCAPTCHA באופן אסינכרוני. המערכת טוענת את reCAPTCHA אין לכך השפעה באופן אסינכרוני על היכולת שלו לזהות תנועה חשודה. לתשלום ליתרונות הביצועים של סקריפטים אסינכרוניים, טעינת reCAPTCHA באופן אסינכרוני מומלץ בדרך כלל.

<script async src="https://www.google.com/recaptcha/api.js">

כשאתם טוענים את reCAPTCHA באופן אסינכרוני, חשוב לזכור שלא תוכלו להשתמש ב-reCAPTCHA עד שהטעינה תסתיים. לדוגמה, סביר להניח שהקוד הבא יתקלקל:

<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 = {};
  }
  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>

במקום זאת, באתרים שמשתמשים ב-API מגרסה 2 יכול להיות שעדיף להשתמש הקריאה החוזרת של 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 עד שמתבצעת פעולה מוגבלת ספציפית (לדוגמה, שליחת טופס).