आपकी वेबसाइट में "No CAPTCHA reCAPTCHA" कैसे एकीकृत करें

() translation by (you can also view the original English article)

CAPTCHA inputs-कैप्चा इनपुट्स-कैप्चा को दर्ज करना इन्टरनेट के शायद सबसे आम निराशाजनक अनुभव है। वे ज्यादातर उपयोगकर्ताओं के लिए दुखद तो है ही, लेकिन दृश्य की खामी वाले व्यक्ति या कोई भी जो सहायक तकनीकों-आसिस्टिव टेक्नोलॉजीज, जैसे की इन्टरनेट को उपयोग करने के लिए स्क्रीन रीडर, पर निर्भर है उनके लिए ज्यादा परेशानीजनक है। हालांकि, खेद के साथ, CAPTCHAs-कैप्चा spam-स्पैम के विरुद्ध लड़ाई के लिए पूर्णरूप से महत्वपूर्ण है।

A necessary evil thanks spammers — एक जरुरी खराबी (spammers-स्पैमर्स की बदौलत)

विडंबना से, पारंपरिक “distorted text"-"डिस्टॉर्टेड टेक्स्ट"-"विरूपित पाठ" वाले CAPTCHAs मानव उपयोगकर्ताओं के लिए पढ़ने में तकलीफदायक होने के बावजूद, आधुनिक आर्टिफीसियल इंटेलिजेंस टेक्नोलॉजी-कृत्रिम बुद्धिमत्ता तकनीक के लिए उनका हल निकालना ज्यादा कठिन नहीं है। Google-गूगल भी Google Street View-गूगल स्ट्रीट व्यू के स्थानों की पुष्टि करने के लिए घरों के क्रमांक को और वाहनव्यव्हार के निशान को पढ़ने के लिए ऐसी ही तकनीक को प्रयोग में लेता है!

गूगल के रोबोट इन्हे सही तरीके से पढ़ सकते हैं

यह तर्कबद्ध ही लगता है क्योंकि गूगल के अपने ही डेवलपर,२०१४ के अंत की तरफ, अभी तक का श्रेष्ठ CAPTCHA का तरीका लेकर हाज़िर हो गए। No CAPTCHA reCAPTCHA-नो कैप्चा रिकैप्चा को एक ऊँगली का स्पर्श, एक माउस क्लिक, या आपके कीबोर्ड के माहिती दर्ज करने पर ध्यान देना और spacebar-स्पेसबार को दबाने के अलावा कुछ भी नहीं चाहिए।

ज्यादातर किस्सो में वह उतना आसान है, लेकिन अगर गूगल का रिस्क एनालिसिस-जोखिम के विश्लेषण की सुविधा अभी भी आपके मानव होने पर संदिग्ध नहीं है, तो वह दूसरी बार प्रयत्न करने के लिए अनुबोधन करेगा।

उसको काम करते हुए आप पुरे इन्टरनेट पर कबका देख सकते है, जैसे कि उदहारण के तौर पर, @materialup के submission page-सबमिशन पेज-दर्ज करने के पृष्ठ पे।

No CAPTCHA reCAPTCHA-नो कैप्चा रिकैप्चा को पाएं

चलिए हम मुद्दे पर आते हैं और हम No CAPTCHA-नो कैप्चा को सेटअप-सुस्थापित करने में लगते हैं।

चरण १

पहले, हमें एक API key-एपीआई की चाहिए, इसलिए https://www.google.com/recaptcha/admin पे पहुंचे। इस पृष्ठ में दाखिल होने की मंजूरी के लिए आपको गूगल के खाते में लॉग-इन करना पड़ेगा। आपको आपकी वेबसाइट को पंजीकृत करने के लिए कहा जाएगा, इसलिए उसको उचित नाम दें, उसके बाद domains-डोमैन्स की सूचि बनाएं (उदहारण के लिए tutsplus.com) जहा पे यह खास reCAPTCHA-रिकैप्चा प्रयोग में लिया जाएगा। Subdomain-सबडोमैन (जैसे कि webdesign.tutsplus.com और code.tutsplus.com) अपने आप ध्यान में लिए जाते हैं।

चरण २

उसको ख़त्म कर लेने के बाद आपको एक site key-साइट की-साइट कुंजी और उसकी साथी secret key-सीक्रेट की-गुप्त कुंजी दी जाएगी:

चरण ३

इन keys-कीस-कुंजियों के नीचे आप आपकी वेबसाइट पे reCAPTCHA-रिकैप्चा शामिल करने के लिए कुछ अंश-स्निपेट्स देखेंगे। सबसे पहले JavaScript-जावास्क्रिप्ट है:

1	<script src='https://www.google.com/recaptcha/api.js'></script>

आप, एक parameter-पैरामीटर-प्राचल को string-स्ट्रिंग में जोड़के, समर्थित ४० भाषाओँ में से कौन सी भाषा प्रयोग में ले रहे है उसको भी परिभाषित-डिफाइन कर सकते है। यहाँ पे हम es को शामिल कर रहें हैं जो हमें स्पेनिश भाषा में reCAPTCHA-रिकैप्चा देगा:

1	<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>

यह script tag-स्क्रिप्ट टैग को आपके पृष्ठ के अंत में (या आप अपने asset-आपूर्ति को कैसे load-लोड होने की प्राधान्यता दे रहें है उसके मुताबिक, उस form-फॉर्म-प्रपत्र के नीचे जहा पे reCAPTCHA दृश्यमान होगा) रखें।

चरण ४

उसके बाद है placeholder-प्लेसहोल्डर जिसको आपको आपके form markup-फॉर्म मार्कअप में, जहाँ पे आप reCAPTCHA को दिखाना चाहते है, वहाँ शामिल करना पड़ेगा:

1	<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

टिप्पणी: data-sitekey attribute-एट्रिब्यूट में आपकी key-की आएगी, यह बनावटी उदाहरण नहीं।

अपने reCAPTCHA के रूप और कार्यक्षमता को इच्छानुसार बदलने के लिए अन्य एट्रिब्यूट है जिनको आप अभी यहाँ पे शामिल कर सकते है। उदाहरण के लिए, इस div में data-theme="dark" आपको एक डार्क-गहरा संस्करण देगा, जो आपके UI-यूआई से बेहतर तरीके से मेल खाता हो सकता है:

reCAPTCHA को configure-कंफीगर-तैयार करने के संबंध में ज्यादा जानकारी के लिए developers.google.com को जांचे।

उसको साथ में मिलाके

अब हमारे पास शुरुआत करने के लिए सभी आपूर्तियाँ तैयार है, इसलिए अब उनको वास्तविक कार्य करने के वातावरण में लागू करने का समय है।

चरण १

चलिए हमारे script tag-स्क्रिप्ट टैग और placeholder-प्लेसहोल्डर को एक सरल फॉर्म में शामिल करते है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

      <input type="submit" value="Submit" />

    </form>

    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>

  </body>
</html>

यहाँ पे हमने एक barebones page structure-बेरबोन्स पृष्ठ के ढांचे का फॉर्म के साथ प्रयोग किया है जिसमे एक name इनपुट, एक email इनपुट और एक submit-सबमिट-दर्ज करें बटन शामिल हैं। यहाँ पे कोई भी styling-स्टाइलिंग नहीं है क्योंकि वास्तव में इस ट्यूटोरियल-स्वशिक्षण के लिए उसकी कोई आवश्यकता नहीं है।

our captcha form — आपके पास इसके जैसा दीखता हुआ कुछ होना चाहिए

reCAPTCHA का परीक्षण उत्तीर्ण हो चूका है यह प्रदर्शित करने के लिए, हमें कुछ server-सर्वर की तरफ की जांच करनी पड़ेगी। इस किस्से में हम वह PHP-पीएचपी से करेंगे, इस लिए यह फ़ाइल को नई परियोजना-प्रोजेक्ट में index.php के नाम से save-सेव-सुरक्षित करें।

चरण २

आप को ध्यान आएगा कि form-फॉर्म की method-मेथड post है, इसलिए जब हम फॉर्म की माहिती को सबमिट-दर्ज करेंगे, वह इस पृष्ठ पे एक variables-वेरिएबल्स-प्राचलों के array-ऐरे-सरणी में वापिस आएगी। हम उन वेरिएबल्स को उनके ऊपर looping-लूपिंग करके output-आउटपुट के तौर पर दिखा सकते है, इसलिए निम्नलिखित को आपके पृष्ठ में कहीं पे शामिल करें:

    <?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

यह हमारे $_POST array-ऐरे में हर key/value-की/वैल्यू-कुंजी/मूल्य की जोड़ लेता है और उनको थोड़े formatting-फॉर्मेटिंग के साथ आउटपुट के तौर पर दर्शाता है। अब जब आप फॉर्म सबमिट-दर्ज करेंगे तो आपको नीचे दर्शाया गया है ऐसा कुछ दिखेगा:

आप देखेंगे कि name और email के मूल्य return-रिटर्न-वापस आए है, लेकिन g-recaptcha-response का मूल्य भी। अगर आप CAPTCHA के परिक्षण में असफल होते है, तो इसका मूल्य खाली रहेगा, लेकिन अगर आप "I'm not a robot" बक्से को check-चेक-सही के निशान से पसंद करते है तो आपको अक्षरों की एक बड़ी सी string-स्ट्रिंग दिखेगी।

यह वो मूल्य है जिसको हमें गूगल को भेजना है ताकि उसकी पुष्टि हो सके, चलिए आगे उसको करते है।

चरण ३

सदनसीब से, गूगल की डेवलपर टीम ने इस जगह पे हमारे लिए भारी महेनत की है, इसलिए Github-गिटहब पे ReCaptcha प्रोजेक्ट-परियोजना पे पहुंचे और recaptchalib.php लाइब्रेरी की नक़ल को लपक लें। उसको आपकी परियोजना के root-रुट में रखें और उसके बाद आपके index.php फाइल के शीर्ष पे उसको संदर्भित करें:

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

चरण ४

यह library-लाइब्रेरी functions-फंक्शन्स का समूह शामिल करती है जो g-recaptcha-response (हमारी secret key-सीक्रेट की-गुप्त कुंजी के साथ) HTTP request-एचटीटीपी रिक्वेस्ट के द्वारा गूगल को भेजती है। उसके बाद वे प्रतिक्रिया को इकट्ठा करते हैं, यह जांचते हुए कि CAPTCHA सफल था या नहीं। इसको प्रयोग में लेने के लिए हमें कुछ variables-वेरिएबल्स को, PHP tag-पीएचपी टैग को बंध करने से पहले, सेटअप-सुस्थापित करना पड़ेगा:

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

ReCaptcha() जांच करता है कि हमारी secret key-सीक्रेट की-गुप्त कुंजी मौजूद है या नहीं। अगर नहीं है, तो वह प्रक्रिया का अंत कर देता है और हमें वह हासिल करने की सलाह देता है। उसके बाद हम हमारी माहिती को निम्नलिखित से गुजारेंगें:

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

चरण ५

हमारे दर्ज किए हुए फॉर्म में सबकुछ ठीक है यह मानते हुए, $response variable-वेरिएबल "success"-"सक्सेस"-"सफलता" के साथ वापस report-रिपोर्ट-सूचित करेगा और हम फॉर्म की माहिती पे प्रक्रिया करना चालु रख सकते हैं। यह देखिएं वह कैसा दिख सकता है: जहाँ हमने फॉर्म की माहिती के ऊपर loop-लूप किया है वहां पे bit-बिट को दूर करें, उसके बाद फॉर्म के ऊपर निम्नलिखित जांच शामिल करें:

    <?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

अंत में, फॉर्म के बाद में PHP-पीएचपी का closing tag-क्लोजिंग टैग शामिल करें:

1	<?php } ?>

यह फॉर्म दर्शाता है, जबतक वह सफलतापूर्वक दर्ज नहीं किया जाता, उस किस्से में वह एक छोटा सा आभार का संदेश दर्शाता है। ये रहा अंतिम demo-डेमो-प्रदर्शन।

समापन

यह No CAPTCHA reCAPTCHA बहुत ही अपरिपक्व लेकिन प्रभावी PHP-पीएचपी परिपालन है। इसमें बेहतर करने के कई अवकाश है, लेकिन आशा है कि वह आपको मूलभूत मुद्दों की समझ देगा। Library-लाइब्रेरी के लिए श्रेय Google developer team-गूगल की डेवलपर टीम को जाता है और मुझे इसको ध्यान में लाने के लिए Matt Aussaguel-मैट ओसागेल का भी त्वरित आभार मानना चाहिए।

उपयोगी संसाधन

Github पे ReCAPTCHA 1.0.0
ReCAPTCHA documentation-प्रलेखन
क्या आप एक robot-रोबोट है? प्रस्तुत है "No CAPTCHA reCAPTCHA" Google Security Blog-गूगल सिक्योरिटी ब्लॉग
WordPress ReCaptcha Integration-वर्डप्रेस ReCaptcha इंटीग्रेशन-वर्डप्रेस में ReCaptcha को एकीकृत करना लॉगिन के लिए reCaptcha plugin-प्लगइन, signup-साइन अप, टिप्पणी फॉर्म, Ninja Forms-निन्जा फॉर्म और Contact Form 7-कॉन्टैक्ट फॉर्म ७