👩‍❤️‍👨 📥 🎊 दोस्तों Yandex API और AJAX कैप्चा कैसे बनाये 💔 🙁 💜

नमस्कार प्रिय साथियों। इस बारे में बहस कि क्या तथाकथित "कैप्चा" की जरूरत है, क्या यह दुष्ट रोबोटों के खिलाफ लड़ाई में वास्तविक लाभ लाता है, या केवल परियोजना की "प्रयोज्यता" को नुकसान पहुंचाता है, और लंबे समय तक इस परियोजना में रुचि रखने वाले सभी लोगों ने एक तरह से या किसी अन्य ने अपने लिए उपयुक्त निष्कर्ष बनाए हैं।

फिर भी, अगली परियोजना के लिए प्राधिकरण रूप में कैप्चा स्थापित करने की आवश्यकता का सामना करना पड़ा, साथ ही साथ कुछ घंटों के बाद reCaptcha सेवा के साथ उपद्रव हो गया, जो पेज पर टन ~~जंक~~ कोड उत्पन्न करता है, मुझे अभी भी एक तैयार समाधान नहीं मिला जो मुझे सौ प्रतिशत सूट करेगा। । ठीक है, अगर आप कुछ करना चाहते हैं - तो स्वयं करें।

यह लेख एक सरल और सुविधाजनक यैंडेक्स - स्वच्छ वेब एपीआई के पूर्ण-आधुनिक, आधुनिक और कार्यात्मक कैप्चा में परिवर्तन पर चर्चा करेगा। और जब से हमने प्राधिकरण मॉड्यूल के बारे में बात करना शुरू किया है, मुझे लगता है कि यह दिखाना उचित है कि हमारा नया कैप्चा मॉड्यूल के साथ कैसे काम करता है।

तो हमें जरूरत है:
यैंडेक्स एपीआई - क्लीन वेब ।

मुझे लगता है कि देशी js के प्रेमियों को किसी और चीज की आवश्यकता नहीं है, मैंने jQuery लाइब्रेरी का उपयोग किया है

सबसे पहले, आइए हम यैंडेक्स एपीआई की ओर मुड़ें, क्योंकि पहले हमें वांछित कैप्चा प्राप्त करने की आवश्यकता है। प्रलेखन पढ़ने के बाद, हम एक वर्ग लिखते हैं जो वास्तव में इसे वापस करता है:

class_yandex_capcha.php

class yandexCaptcha { static function get() { $lang = $_SESSION['lang']; if ($lang == "ru") { $type = "std"; } else { $type = "estd"; } $key = " API "; $xmlResponse = file_get_contents("http://cleanweb-api.yandex.ru/1.0/get-captcha?key=".$key."&type=".$type); $xml = simplexml_load_string($xmlResponse); return $xml->url; } }

सब कुछ बेहद सरल है - हम मापदंडों के साथ एक GET अनुरोध भेजते हैं:
$ कुंजी - यैंडेक्स एपीआई कुंजी, आप इसे यहां प्राप्त कर सकते हैं
$ प्रकार - कैप्चा का प्रकार जिसे हम प्राप्त करना चाहते हैं, चर द्वारा स्वीकार किए गए मान पूरी तरह से यैंडेक्स प्रलेखन में वर्णित हैं।

मेरे मामले में, साइट कई भाषाओं का समर्थन करती है - इसलिए, भाषा के आधार पर, हम चयन करते हैं: std - नंबर और रूसी में यांडेक्स लोगो, या एस्टड - संख्या भी, लेकिन अंग्रेजी में लोगो के साथ।

YandexCaptcha :: get () विधि अब छवि पता लौटाती है - यह हमारा कैप्चा है।
"कैप्चा चित्र url" xml के अलावा, विधि अनुरोध एक और पैरामीटर देता है - कैप्चा , लेकिन इसके कारण थोड़ा सा है
कैप्चा पैरामीटर को संग्रहीत नहीं किया जा सकता है, एक सत्र में कहें। यह आम तौर पर संग्रहीत नहीं किया जा सकता है, क्यों - मैं थोड़ा आगे समझाऊंगा।

जब हमारी कक्षा तैयार हो जाती है, तो हम इसे साइट पर प्राधिकरण पृष्ठ के मॉडल में एम्बेड करते हैं:

model_closed.php

 class model_closed extends model { function get_data() { $root = $_SERVER['DOCUMENT_ROOT']; $dataArray['language'] = parse_ini_file($root."/app/languages/".Route::$lang."_closed.ini"); $dataArray['base_href'] = $_SERVER['HTTP_HOST']; require_once($root."/app/core/class/class_yandex_capcha.php"); $dataArray['capcha_url'] = yandexCaptcha::get(); return $dataArray; } }

Get_data () पद्धति की अंतिम तीन पंक्तियां दृश्य को कैप्चा छवि देती हैं:

और यहाँ दृश्य ही है - shut_view.php

 <div class="closedLoginForm"> <input type="text" class="loginInput" value="<?php echo $data['language']['login']; ?>"><br> <input type="password" class="passworldInput" value="<?php echo $data['language']['passworld']; ?>"> <div id="capcha" title="<?php echo $data['language']['reload_image']; ?>"> <img class="yandexCapchaImage" src="" alt="<?php echo $data['language']['capcha']; ?>"> </div> <input type="text" class="capchaInput" value="<?php echo $data['language']['capcha']; ?>"> <div class="loginButton"><div class="loginBottonInner"><?php echo $data['language']['loginBotton']; ?></div></div> <div class="loginError"></div> </div> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/closed.js"></script> <script type="text/javascript" src="/js/login.js"></script>

जैसा कि आप प्रस्तुति से देख सकते हैं, html कोड में कोई फ़ॉर्म टैग नहीं हैं , जिसका अर्थ है कि हम प्राधिकरण के लिए AJAX का सबसे अधिक उपयोग करेंगे ।

दृश्य में, हमारे पास 3 फ़ील्ड हैं: लॉगिन, पासवर्ड और कैप्चा दर्ज करने के लिए फ़ील्ड, कैप्चा चित्र और स्वयं भेजें बटन।

हम लॉगिन के रूप में AJAX के अनुरोध का उपयोग करते हुए, जैसा कि पहले उल्लेख किया गया है, फॉर्म जमा करेंगे

बहुत सारे कोड, लेकिन वह बिंदु है

 $(document).ready(function(){ var capchaStartText = $(".capchaInput").val(); var passworldStartText = $(".passworldInput").val(); function login() { var login = $(".loginInput"), passworld = $(".passworldInput"), capcha = $(".capchaInput"), buttontext = $(".loginBottonInner").html(), captchasrc = $(".yandexCapchaImage").attr("src"); var pos = captchasrc.indexOf("="); var key = captchasrc.substr(pos+1); $.ajax({ type: "POST", url: "/app/modules/module_login.php", dataType: "json", data: {login:login.val(), passworld:passworld.val(), captchaCode:key, captchaValue:capcha.val()}, beforeSend: function(){ $(".loginBottonInner").html("..."); } }).done(function(data){ if (data.captcha == 1 && data.login == 1) { location.reload(); } if (data.login == 0) { capchaRenew(); $(".loginBottonInner").html(buttontext); login.focus(); login.select(); passworld.val(passworldStartText); capcha.val(capchaStartText); $(".loginError").html(data.login_error); } if (data.captcha == 0 && data.login == 1) { capchaRenew(); $(".loginBottonInner").html(buttontext); capcha.val(capchaStartText); capcha.focus(); $(".loginError").html(data.captcha_error); } }); } function capchaRenew() { $.ajax({ type: "POST", data: {check:"ok"}, url: "/app/modules/module_capcha_renew.php" }).done(function(html) { $(".yandexCapchaImage").attr("src",html); console.log(html); }); } $("#capcha").click(function(){ capchaRenew(); $(".capchaInput").focus(); }); $(".loginBottonInner").click(function() { login(); }); $(window).keydown(function(eventObject){ if ($(".closedLoginForm input").is(":focus") == true) { if (eventObject.which == 13) { login(); } } }); });

अब हमें कैप्चा की जांच करने की आवश्यकता है।
ऐसा करने के लिए, "भेजें" बटन पर क्लिक करके या एंटर बटन (हम उपयोगकर्ताओं से प्यार करते हैं) पर क्लिक करके अपने फॉर्म के क्षेत्रों से, हम कैप्चा इनपुट फ़ील्ड में उपयोगकर्ता द्वारा दर्ज किए गए सभी डेटा - लॉगिन, पासवर्ड, वर्ण सेट और दूसरे पैरामीटर के बारे में लिखते हैं, जो मैंने ऊपर लिखा था। - एक ही कैप्चा पैरामीटर ( yandexCaptcha :: get () विधि का विवरण देखें)।
तथ्य यह है कि यह पैरामीटर उपयोगकर्ता द्वारा सही कैप्चा इनपुट की जांच करने के लिए महत्वपूर्ण है, जो प्रारंभ में कैप्चा छवि URL के हिस्से के रूप में पृष्ठ पर मौजूद है। यांडेक्स इसे हम सभी को एक ही yandexCaptcha :: get () विधि में देता है। हमारे लिए जो कुछ भी बचा हुआ है वह इमेज एड्रेस के यूआरएल से कैप्चा पैरामीटर को "अलग" करना है, जो हम करते हैं।

मॉड्यूल_login.php फ़ाइल जिसे हम AJAX अनुरोध का उपयोग करके डेटा ट्रांसफर करते हैं, लॉगिन क्लास का एक उदाहरण बनाता है, मुख्य वर्ग जिसे हम साइट पर उपयोगकर्ताओं को अधिकृत करने के लिए उपयोग करते हैं, साइटलॉगिन () विधि को कॉल करता है, जो प्राधिकरण परिणाम के बारे में जानकारी देता है, जाँचता है कि लॉगिन-पासवर्ड संयोजन सही है और कैप्चा इनपुट की शुद्धता के बारे में हमें सबसे अधिक रुचि है ।

  echo Login::siteLogin($login, $passworld, $captchaCode, $captchaValue);

ताकि मेरा लेख, जो पहले से ही मेरी योजना की तुलना में अधिक लंबा हो गया था, पूरी तरह से विशाल आकार तक नहीं बढ़ता है, मैं केवल लॉगिन का वह भाग दे दूँगा : साइटलॉगिन विधि जो कैप्चा की जाँच के लिए ज़िम्मेदार है:

class_login.php

वास्तव में कोड

 class Login { static function siteLogin($login, $password, $captchaCode, $captchaValue) { $path = $_SERVER['DOCUMENT_ROOT']; session_start(); $langArray = parse_ini_file($path."/app/languages/".$_SESSION['lang']."_login.ini"); $login = htmlspecialchars($login); $password = htmlspecialchars($password); $json = Array(); $json['captcha'] = 0; $json['login'] = 0; $json['captcha_error'] = $langArray['captcha_error']; $json['login_error'] = $langArray['login_error']; $key = " API "; $response = file_get_contents("http://cleanweb-api.yandex.ru/1.0/check-captcha?key=".$key."&captcha=".$captchaCode."&value=".$captchaValue); if (strpos($response,"<ok")){ $json['captcha'] = 1; unset($json['captcha_error']); } require_once $path."/app/core/class/class_dbconnect.php"; $mysqli = dbconnect::connect(); $sql = "SELECT `id`,`login`,`passworld`,`rights` FROM `users` WHERE `login` = '".$login."'"; $qr = $mysqli->query($sql); $quant = $qr->num_rows; if ($quant <> 0) { $row = $qr->fetch_assoc(); if ($row['passworld'] == hash("whirlpool","super".$password."orgy")) { $json['login'] = 1; unset($json['login_error']); if ($json['login'] == 1 and $json['captcha'] == 1) { //!    } } } return json_encode($json); } }

* मैंने सोचा और पूरा कोड देने का फैसला किया, ताकि पाठक समझ सकें कि पैर कहाँ से बढ़ते हैं।
कैप्चा सत्यापन का सार फिर से यैंडेक्स एपीआई के अनुसार एक जीईटी अनुरोध है;

तदनुसार - उन्होंने लॉगिन / पासवर्ड के सही संयोजन का नेतृत्व किया + कैप्चा ने परीक्षण पास किया - हुर्रे! हमने प्राधिकरण पारित कर दिया है।

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

मान लीजिए कि कैप्चा दर्ज करते समय उपयोगकर्ता ने गलती की है, या बस चित्र में पाठ को पार्स नहीं कर सकता है और इसे अपडेट करना चाहता है।

ध्यान दें - उसे कोई अतिरिक्त इशारे करने की आवश्यकता नहीं है

त्रुटि के मामले में, उपयोगकर्ता द्वारा पहले दर्ज किया गया उपयोगकर्ता नाम और पासवर्ड सहेजे जाते हैं, और कैप्चा चित्र स्वचालित रूप से अपडेट किया जाता है। और अगर उपयोगकर्ता कैप्चा को अपडेट करने का निर्णय लेता है - तो बस उस पर क्लिक करें।

चलो login.js फ़ाइल की सामग्री पर वापस जाते हैं , और capchaRenew () फ़ंक्शन पर विचार करते हैं

  function capchaRenew() { $.ajax({ type: "POST", data: {check:"ok"}, url: "/app/modules/module_capcha_renew.php" }).done(function(html) { $(".yandexCapchaImage").attr("src",html); }); }

इसलिए - हम बस मॉड्यूल मॉड्यूल_कैप_्रेन्यू.फपी मॉड्यूल के लिए एक अनुरोध करते हैं जिसका पूरा फ़ंक्शन नीचे फोड़ा जाता है
उसी yandexCaptcha का उपयोग करके कैप्चा में सुधार करने के लिए :: प्राप्त करें () विधि जो हम पृष्ठ लोड करते समय एक्सेस करते हैं और उपयोगकर्ता को नई छवि का पता देते हैं।

नतीजतन, हमारे पास पूरी तरह कार्यात्मक कैप्चा है जो उपयोगकर्ता के अनुकूल है। और सबसे महत्वपूर्ण बात, एक ही reCapcha के विपरीत - कोई iframes नहीं हैं, सभी कोड बहुत संक्षिप्त हैं, और पूरी तरह से हमारे नियंत्रण में हैं।

दोस्तों Yandex API और AJAX कैप्चा कैसे बनाये

More articles: