इस पेज का अनुवाद 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 विजेट को साफ़ तौर पर रेंडर करना

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

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

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

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

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

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

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

JavaScript API

तरीका	ब्यौरा
`grecaptcha.render`( कंटेनर, पैरामीटर )	कंटेनर को reCAPTCHA विजेट के तौर पर रेंडर करता है और नए विजेट का आईडी दिखाता है. container reCAPTCHA विजेट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर (स्ट्रिंग) का आईडी या खुद DOM एलिमेंट बताएं. पैरामीटर की-वैल्यू पेयर के तौर पर पैरामीटर वाला ऑब्जेक्ट. उदाहरण के लिए, {"sitekey": "your_site_key", "theme": "light"}. grecaptcha.render पैरामीटर देखें.
`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 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>