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

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

नहीं दिखने वाले reCAPTCHA को चालू करने के लिए, इनमें से कोई एक तरीका अपनाएं:

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

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

चैलेंज को अपने-आप बटन से बाइंड करने की अनुमति दें

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

<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 चैलेंज की तरह ही काम करता है.

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

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. जावास्क्रिप्ट विधि से grecaptcha.exe प्रक्रिया को कॉल करें.

    grecaptcha.execute();

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

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

JavaScript संसाधन (api.js) पैरामीटर

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

g-recaptcha टैग एट्रिब्यूट और grecaptcha.render पैरामीटर

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

JavaScript एपीआई

तरीका ब्यौरा
grecaptcha.रेंडर(
कंटेनर,
पैरामीटर,
इनहेरिट
) 		कंटेनर को reCAPTCHA विजेट के तौर पर रेंडर करता है और बनाए गए नए विजेट का आईडी दिखाता है.
कंटेनर
reCAPTCHA विजेट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर (स्ट्रिंग) का आईडी या खुद DOM एलिमेंट तय करें.
पैरामीटर
एक ऑब्जेक्ट, जिसमें कुंजी=वैल्यू पेयर के तौर पर पैरामीटर होते हैं. उदाहरण के लिए, {"sitekey": "your_site_key", "theme": "light"}. grecaptcha.render पैरामीटर देखें.
inherit
अगर संबंधित पैरामीटर के बारे में नहीं बताया गया है, तो एलिमेंट पर मौजूदा data-* एट्रिब्यूट का इस्तेमाल करें. पैरामीटर को एट्रिब्यूट पर प्राथमिकता दी जाएगी.
grecaptcha.execute(
opt_widget_id
) 		प्रोग्राम के हिसाब से reCAPTCHA की जांच करें. इसका इस्तेमाल तब किया जाता है, जब न दिखने वाला reCAPTCHA किसी बटन के बजाय किसी div पर होता है.
opt_widget_id
यह वैकल्पिक विजेट आईडी नहीं है. इसकी जानकारी न होने पर, डिफ़ॉल्ट रूप से पहले विजेट बनाया जाता है.
grecaptcha.reset(
)
opt_widget_id
) 		reCAPTCHA विजेट को रीसेट करता है.
opt_widget_id
यह वैकल्पिक विजेट आईडी नहीं है. इसकी जानकारी न होने पर, डिफ़ॉल्ट रूप से पहले विजेट बनाया जाता है.
grecaptcha.getResponse(
)
opt_widget_id
) 		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>