reCAPTCHA वर्शन 2

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

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

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

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

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

अपने पेज पर reCAPTCHA विजेट रेंडर करने का सबसे आसान तरीका, ज़रूरी JavaScript संसाधन और एक g-recaptcha टैग शामिल करना है. g-recaptcha टैग, g-recaptcha नाम वाला DIV एलिमेंट है और 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 रिसॉर्स में पैरामीटर जोड़ें.

  1. onload का कॉलबैक फ़ंक्शन तय करें. सभी डिपेंडेंसी लोड होने पर, यह फ़ंक्शन कॉल होगा.

    <script type="text/javascript">
      var onloadCallback = function() {
        alert("grecaptcha is ready!");
      };
    </script>
    
  2. JavaScript पैरामीटर डालें, जिसमें onload पैरामीटर को अपने ऑनलोड कॉलबैक फ़ंक्शन के नाम और render पैरामीटर को explicit पर सेट करें.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
    

    आपका कॉलबैक एक्ज़ीक्यूट होने के बाद, grecaptcha.render मैथड को JavaScript एपीआई से कॉल किया जा सकता है.

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

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

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

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

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

JavaScript एपीआई

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