इस पेज का अनुवाद Cloud Translation API से किया गया है.

reCAPTCHA वर्शन 2

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

विजेट देखने के लिए, इनमें से कोई एक तरीका अपनाएं:

विजेट अपने-आप रेंडर होने की सुविधा चालू करें या
विजेट को साफ़ तौर पर रेंडर करना

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

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

reCAPTCHA विजेट को अपने-आप रेंडर करें

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

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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

reCAPTCHA विजेट को साफ़ तौर पर रेंडर करें

रेंडर को टाला जा सकता है. इसके लिए, अपने ऑनलोड कॉलबैक फ़ंक्शन के बारे में बताएं और JavaScript संसाधन में पैरामीटर जोड़ें.

अपने onload कॉलबैक फ़ंक्शन के बारे में बताएं. सभी डिपेंडेंसी लोड होने पर यह फ़ंक्शन कॉल किया जाएगा.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
अपने ऑनलोड कॉलबैक फ़ंक्शन के नाम पर onload पैरामीटर और render पैरामीटर को explicit पर सेट करते हुए, JavaScript संसाधन डालें.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
कॉलबैक के चलने के बाद, JavaScript API से grecaptcha.render तरीके को कॉल किया जा सकता है.
reCAPTCHA API के लोड होने से पहले, यह ज़रूरी है कि आपका onload कॉलबैक फ़ंक्शन तय हो. यह पक्का करने के लिए कि रेस की कोई शर्तें न हों:
- अपनी स्क्रिप्ट को पहले कॉलबैक से ऑर्डर करें और फिर reCAPTCHA का इस्तेमाल करें
- `स्क्रिप्ट` टैग में async और defer पैरामीटर का इस्तेमाल करें

कॉन्फ़िगरेशन

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

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

g-re कैप्चा टैग एट्रिब्यूट और gre कैप्चा.render पैरामीटर

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

JavaScript API

तरीका	ब्यौरा
gre कैप्चा.रेंडर कंटेनर, पैरामीटर )	कंटेनर को reCAPTCHA विजेट के तौर पर रेंडर करता है और नए विजेट का आईडी दिखाता है. कंटेनर reCAPTCHA विजेट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर (स्ट्रिंग) का आईडी या DOM एलिमेंट में से किसी एक की जानकारी दें. पैरामीटर एक ऑब्जेक्ट जिसमें key=value पेयर के तौर पर पैरामीटर मौजूद हों. उदाहरण के लिए, {"sitekey": "your_site_key", "theme": "light"}. gre कैप्चा.render पैरामीटर देखें.
gre कैप्चा.रीसेट( opt_widget_id )	reCAPTCHA विजेट को रीसेट करता है. opt_widget_id वैकल्पिक विजेट आईडी, जानकारी न दिए जाने पर पहले बनाए गए विजेट पर डिफ़ॉल्ट रूप से लागू होता है.
gre कैप्चा.getResponse( opt_widget_id )	reCAPTCHA विजेट के लिए रिस्पॉन्स भेजता है. opt_widget_id वैकल्पिक विजेट आईडी, जानकारी न दिए जाने पर पहले बनाए गए विजेट पर डिफ़ॉल्ट रूप से लागू होता है.

उदाहरण

ऑनलोड कॉलबैक के बाद, अश्लील रेंडरिंग

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

एक से ज़्यादा विजेट के लिए एक्सप्लिसिट रेंडरिंग

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>