يناقش هذا المستند أفضل الممارسات لتحميل علامة النص البرمجي reCAPTCHA. تنطبق هذه المعلومات على كل من الإصدارين v2 وv3 من 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() لالتفاف طلبات البيانات من واجهة برمجة التطبيقات، أضِف مقتطف الرمز التالي لضمان إمكانية استدعاء 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>
بدلاً من ذلك، قد تجد المواقع التي تستخدم الإصدار 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 حتى يحدث إجراء محدّد محظور (على سبيل المثال، إرسال النموذج).