नहीं दिखने वाला 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" एट्रिब्यूट वाले div में रेंडर करें और प्रोग्राम बनाकर एक्ज़ीक्यूट करें.

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

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. JavaScript तरीके से grecaptcha.execute को कॉल करें.

    grecaptcha.execute();

    कॉलबैक फ़ंक्शन लागू होने के बाद, JavaScript API से grecaptcha.render तरीके को कॉल किया जा सकता है.

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

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

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

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

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

JavaScript API

तरीका ब्यौरा
grecaptcha.render (
कंटेनर,
पैरामीटर,
इनहेरिट
) 		कंटेनर को reCAPTCHA विजेट के तौर पर रेंडर करता है और नए बनाए गए विजेट का आईडी दिखाता है.
container
  reCAPTCHA विजेट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर का आईडी (स्ट्रिंग) या डीओएम एलिमेंट बताएं.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है पैरामीटर
एक ऑब्जेक्ट, जिसमें key=value पेयर के तौर पर पैरामीटर शामिल हों. उदाहरण के लिए, {"sitekey": "your_site_key", "theme": "light"}. grecaptcha.render पैरामीटर देखें.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इनहेरिट करें
अगर इससे जुड़ा पैरामीटर नहीं बताया गया है, तो एलिमेंट पर मौजूदा data-* एट्रिब्यूट का इस्तेमाल करें. पैरामीटर को एट्रिब्यूट के मुकाबले प्राथमिकता दी जाएगी.
grecaptcha.execute(
opt_widget_id
) 		प्रोग्राम की मदद से reCAPTCHA की जांच शुरू करें. इसका इस्तेमाल तब किया जाता है, जब इनविज़िबल reCAPTCHA, बटन के बजाय किसी डायव पर हो.
opt_widget_id
  ज़रूरी नहीं है कि विजेट का आईडी डाला जाए. अगर आईडी नहीं डाला जाता है, तो डिफ़ॉल्ट रूप से पहले बनाए गए विजेट का आईडी लागू हो जाता है.
grecaptcha.reset(
opt_widget_id
) 		reCAPTCHA विजेट को रीसेट करता है.
opt_widget_id
  ज़रूरी नहीं है कि विजेट का आईडी डाला जाए. अगर आईडी नहीं डाला जाता है, तो डिफ़ॉल्ट रूप से पहले बनाए गए विजेट का आईडी लागू हो जाता है.
grecaptcha.getResponse(
opt_widget_id
) 		reCAPTCHA विजेट के लिए जवाब पाता है.
opt_widget_id
  ज़रूरी नहीं है कि विजेट का आईडी डाला जाए. अगर आईडी नहीं डाला जाता है, तो डिफ़ॉल्ट रूप से पहले बनाए गए विजेट का आईडी लागू हो जाता है.

उदाहरण

onload कॉलबैक के बाद एक्सपलीस रेंडरिंग

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