تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

جارٍ تحميل reCAPTCHA

يناقش هذا المستند أفضل الممارسات لتحميل علامة نص reCAPTCHA البرمجي. تنطبق هذه المعلومات على كل من الإصدارين 2 و3 من reCAPTCHA.

جارٍ تحميل 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() لإدراج طلبات البيانات من واجهة برمجة التطبيقات، يمكنك إضافة مقتطف الرمز التالي لضمان التي يمكن طلبها في أي وقت

<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>

وكبديل لذلك، قد تجد المواقع الإلكترونية التي تستخدم الإصدار 2 من واجهة برمجة التطبيقات أنّه من المفيد استخدامها. معاودة الاتصال onload؛ يتم تنفيذ استدعاء onload عند انتهاء reCAPTCHA قيد التحميل. يجب تحديد معاودة الاتصال 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 إلى أن يتم اتّخاذ إجراء محدّد. (مثل إرسال النموذج) بصورة عامة.