इस पेज पर बताया गया है कि अपने वेबपेज पर, न दिखने वाले 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 में रेंडर करें और प्रोग्राम बनाकर एक्ज़ीक्यूट करें.
data-size="invisible"
के साथ एक div बनाएं.<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
JavaScript तरीके से gre कैप्चा.execut को कॉल करें.
grecaptcha.execute();
कॉलबैक के एक्ज़ीक्यूट होने के बाद, JavaScript API से
grecaptcha.render
तरीके को कॉल किया जा सकता है.
कॉन्फ़िगरेशन
JavaScript संसाधन (api.js) पैरामीटर
पैरामीटर | मान | ब्यौरा |
---|---|---|
onload | ज़रूरी नहीं. सभी डिपेंडेंसी लोड होने के बाद, आपके कॉलबैक फ़ंक्शन का नाम. | |
रेंडर करें | explicit onload |
ज़रूरी नहीं. चुनें कि विजेट को साफ़ तौर पर रेंडर करना है या नहीं. डिफ़ॉल्ट रूप से ऑनलोड होता है. इससे बैज, मिलने वाले पहले g-recaptcha टैग में रेंडर हो जाएगा. |
hl | भाषा के कोड देखें | ज़रूरी नहीं. इससे विजेट को किसी खास भाषा में रेंडर किया जाता है. उपयोगकर्ता की भाषा के बारे में अपने-आप पता चलता है. |
g-re कैप्चा टैग एट्रिब्यूट और gre कैप्चा.render पैरामीटर
g-re कैप्चा टैग एट्रिब्यूट | gre कैप्चा.render पैरामीटर | मान | डिफ़ॉल्ट | ब्यौरा |
---|---|---|---|---|
data-sitekey | साइट कुंजी | आपकी साइट कुंजी. | ||
डेटा-बैज | बैज | बॉटमराइट बॉटमलेफ़्ट इनलाइन | बॉटम राइट | ज़रूरी नहीं. reCAPTCHA बैज की जगह बदलें. 'इनलाइन' की मदद से उसे सीएसएस के साथ पोज़िशन किया जा सकता है. |
डेटा-साइज़ | साइज़ | नहीं दिख रहा है | ज़रूरी नहीं. इसका इस्तेमाल किसी div से जुड़े और प्रोग्राम के हिसाब से लागू होने वाला ऐसा विजेट बनाने के लिए किया जाता है जो न दिखे. | |
data-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 विजेट के तौर पर रेंडर करता है और नए विजेट का आईडी दिखाता है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है कंटेनर reCAPTCHA विजेट को रेंडर करने के लिए एचटीएमएल एलिमेंट. कंटेनर का आईडी (स्ट्रिंग) या डीओएम एलिमेंट बताएं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है पैरामीटर एक ऑब्जेक्ट जिसमें key=value पेयर के तौर पर पैरामीटर मौजूद हों. उदाहरण के लिए, {"sitekey": "your_site_key", "theme": "light"}. gre कैप्चा.render पैरामीटर देखें. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इनहेरिट करें अगर इससे जुड़ा पैरामीटर नहीं बताया गया है, तो एलिमेंट पर मौजूदा 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>