नहीं दिखने वाला reCAPTCHA

इस पेज पर, आपके वेबपेज पर न दिखने वाले reCAPTCHA को चालू करने और उसे पसंद के मुताबिक बनाने का तरीका बताया गया है.

न दिखने वाले reCAPTCHA को शुरू करने के लिए, इनमें से कोई एक काम करें:

नहीं दिखने वाले reCAPTCHA को पसंद के मुताबिक बनाने का तरीका जानने के लिए, कॉन्फ़िगरेशन देखें. उदाहरण के लिए, हो सकता है कि आप भाषा या बैज की जगह तय करना चाहें.

यह देखने के लिए कि उपयोगकर्ता ने कैप्चा हल किया है या नहीं, उपयोगकर्ता के जवाब की पुष्टि करना देखें.

इस चुनौती को किसी बटन से अपने-आप बाइंड करें

अपने पेज पर नहीं दिखने वाले reCAPTCHA विजेट को इस्तेमाल करने का सबसे आसान तरीका यह है कि आप ज़रूरी JavaScript रिसॉर्स को शामिल करें और अपने एचटीएमएल बटन में कुछ एट्रिब्यूट जोड़ें. ज़रूरी एट्रिब्यूट एक क्लास नाम 'g-recaptcha', data-sitekey एट्रिब्यूट में आपकी साइट कुंजी, और एक JavaScript कॉलबैक का नाम है, जो data-callback एट्रिब्यूट में कैप्चा पूरा होता है.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

स्क्रिप्ट को एचटीटीपीएस प्रोटोकॉल का इस्तेमाल करके लोड किया जाना चाहिए. साथ ही, इसे पेज पर बिना किसी पाबंदी के किसी भी समय शामिल किया जा सकता है.

प्रोग्राम के हिसाब से, किसी बटन का इस्तेमाल करें या चैलेंज शुरू करें.

बाइंडिंग को कुछ देर के लिए रोकने के लिए, आपके ओवरलोड कॉलबैक फ़ंक्शन को तय किया जा सकता है और JavaScript संसाधन में पैरामीटर जोड़े जा सकते हैं. यह सामान्य reCAPTCHA चैलेंज की तरह ही काम करता है.

प्रोग्राम की मदद से, चैलेंज को शुरू करें.

प्रोग्राम के ज़रिए, data-size="invisible" कोड की मदद से और एक प्रोग्राम में एक कॉल करके, पुष्टि करने का प्रोग्राम शुरू किया जा सकता है. यह चुनौती किसी प्रोग्राम में दी जा सकती है.

  1. data-size="invisible" की मदद से एक डिव बनाएं.

    <div class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible">
    </div>
    
  2. किसी JavaScript तरीके से grecap.execute को कॉल करें.

    grecaptcha.execute();
    

    आपका कॉलबैक लागू होने पर, आप JavaScript API से grecaptcha.render तरीके को कॉल कर सकते हैं.

कॉन्फ़िगरेशन

JavaScript रिसॉर्स (api.js) के पैरामीटर

पैरामीटर वैल्यू ब्यौरा
onload ज़रूरी नहीं. सभी डिपेंडेंसी लोड होने के बाद, लागू होने वाले कॉलबैक फ़ंक्शन का नाम.
रेंडर करें एक्सप्लिसिट
ऑनलोड
ज़रूरी नहीं. विजेट को साफ़ तौर पर रेंडर करना है या नहीं. डिफ़ॉल्ट रूप से, ओवरलोड होता है, जो मिलने वाले पहले g-recaptcha टैग में विजेट को रेंडर करता है.
hl भाषा कोड देखें ज़रूरी नहीं. विजेट को किसी खास भाषा में रेंडर करने के लिए बाध्य करता है. तय न होने पर, उपयोगकर्ता अपने-आप उसकी भाषा का पता लगा लेता है.

g-recap टैग एट्रिब्यूट और grecap.ender पैरामीटर

g-recap टैग एट्रिब्यूट grecap.रेंडर पैरामीटर वैल्यू डिफ़ॉल्ट ब्यौरा
डेटा-साइट की साइटकी आपकी साइट की कुंजी.
डेटा-बैज बैज सबसे नीचे दाईं ओर इनलाइन नीचे दाईं ओर ज़रूरी नहीं. reCAPTCHA बैज की जगह बदलें. 'इनलाइन' आपको सीएसएस के साथ इसे रखने देता है.
डेटा का साइज़ साइज़ नहीं दिख रहा है ज़रूरी नहीं. इसका इस्तेमाल, div से जुड़े और प्रोग्राम के हिसाब से, एक न दिखने वाले विजेट को बनाने के लिए किया जाता है.
data-tabindex Tabindex 0 ज़रूरी नहीं. चैलेंज का Tabindex. अगर आपके पेज के दूसरे एलिमेंट में Tabindex का इस्तेमाल होता है, तो इसे उपयोगकर्ता नेविगेशन को आसान बनाने के लिए सेट करना चाहिए.
डेटा-कॉलबैक कॉलबैक ज़रूरी नहीं. आपके कॉलबैक फ़ंक्शन का नाम, जिसे तब इस्तेमाल किया जाता है, जब उपयोगकर्ता सही जवाब सबमिट करता है. g-recaptcha-response टोकन आपके कॉलबैक को पास किया जाता है.
डेटा की समयसीमा खत्म होने का कॉलबैक समय सीमा खत्म हो चुकी है ज़रूरी नहीं. reCAPTCHA में मिले जवाब के खत्म होने और उपयोगकर्ता की फिर से पुष्टि करने पर, आपके कॉलबैक फ़ंक्शन का नाम लागू किया जाता है.
डेटा-गड़बड़ी-कॉलबैक गड़बड़ी-कॉलबैक ज़रूरी नहीं. आपके कॉलबैक फ़ंक्शन का नाम, जब reCAPTCHA को किसी गड़बड़ी (आम तौर पर नेटवर्क कनेक्टिविटी) का सामना करना पड़ता है और उसके कनेक्ट होने तक वह जारी नहीं रह सकता. अगर आप यहां कोई फ़ंक्शन तय करते हैं, तो उपयोगकर्ता को यह बताने की ज़िम्मेदारी आपकी है कि उन्हें फिर से कोशिश करनी चाहिए.
आइसोलेटेड false ज़रूरी नहीं. प्लग इन के मालिकों के लिए, किसी पेज पर पहले से मौजूद reCAPTCHA को इंस्टॉल करने में रुकावट न डालें. अगर सही है, तो यह reCAPTCHA इंस्टेंस किसी अलग आईडी स्पेस का हिस्सा होगा.

JavaScript एपीआई

तरीका ब्यौरा
grecta.रेंडर(
)
कंटेनर,
पैरामीटर,
इनहेरिट
)
कंटेनर को reCAPTCHA विजेट के तौर पर रेंडर करता है. साथ ही, बनाए गए नए विजेट का आईडी भी दिखाता है.
कंटेनर
reCAPTCHA एलिमेंट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर (आईडी) का आईडी या डीओएम एलिमेंट के बारे में बताएं.
पैरामीटर
की/वैल्यू पेयर के तौर पर पैरामीटर वाला कोई ऑब्जेक्ट, जैसे कि {"sitekey": "your_site_key", "theme": "light"}. grecap.render पैरामीटर देखें.
इनहेरिट करें
अगर संबंधित पैरामीटर तय नहीं किया गया है, तो एलिमेंट पर मौजूदा data-* एट्रिब्यूट का इस्तेमाल करें. पैरामीटर को एट्रिब्यूट पर प्राथमिकता दी जाएगी.
ग्रीककैप्चा.एक्ज़ीक्यूट करें(
)
ऑप्ट_विजेट_आईडी
)
प्रोग्राम के तौर पर reCAPTCHA जांच शुरू करें. इसका इस्तेमाल तब किया जाता है, जब बटन के बजाय, न दिखने वाला reCAPTCHA किसी div पर मौजूद हो.
opt_widget_id
वैकल्पिक विजेट आईडी, डिफ़ॉल्ट तौर पर बनाए गए पहले विजेट को डिफ़ॉल्ट के तौर पर सेट करता है.
ग्रीककैप्चा.रीसेट करें(
)
ऑप्ट_विजेट_आईडी
)
इससे reCAPTCHA विजेट रीसेट हो जाता है.
opt_widget_id
वैकल्पिक विजेट आईडी, डिफ़ॉल्ट तौर पर बनाए गए पहले विजेट को डिफ़ॉल्ट के तौर पर सेट करता है.
grecta.getResponse(
)
ऑप्ट_विजेट_आईडी
)
reCAPTCHA विजेट के लिए रिस्पॉन्स पाएं.
opt_widget_id
वैकल्पिक विजेट आईडी, डिफ़ॉल्ट तौर पर बनाए गए पहले विजेट को डिफ़ॉल्ट के तौर पर सेट करता है.

उदाहरण

ओवरलोड होने पर कॉलबैक को साफ़ तौर पर रेंडर करना

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

क्लाइंट-साइड की पुष्टि करने के बाद, दिखाई न देने वाले reCAPTCHA चैलेंज को शुरू करना.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>