इस दस्तावेज़ में, reCAPTCHA स्क्रिप्ट टैग को लोड करने के सबसे सही तरीकों के बारे में बताया गया है. यह जानकारी reCAPTCHA के वर्शन 2 और 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() का इस्तेमाल किया जा रहा है, तो यह पक्का करने के लिए नीचे दिया गया कोड स्निपेट जोड़ें कि 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>
विकल्प के तौर पर, v2 एपीआई का इस्तेमाल करने वाली साइटों को
onload कॉलबैक; reCAPTCHA की प्रोसेस पूरी होने पर, onload कॉलबैक लागू होता है
लोड हो रहा है. reCAPTCHA स्क्रिप्ट लोड करने से पहले, onload कॉलबैक तय किया जाना चाहिए.
<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 लोड होने का इंतज़ार किया जाए.