कैप्चा। फिर क्या?

डोबवरसु, खाबरवचें।

त्याग

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

तो, जो रुचि रखते हैं - हैब्रकैट में आपका स्वागत है।

शुरुआत

शुरू करने के लिए, हम यह निर्धारित करेंगे कि एक कैप्चा क्या है। परियोजना के नुकसान के लिए कार्य करने वाले सभी प्रकार के कार्यक्रमों से निश्चित रूप से रक्षा करना। और इसे बचाने के लिए, आपको एक कैप्चा की आवश्यकता है, जिसके साथ सरल प्रोग्राम सामना नहीं कर सकते। इस प्रभाव को कैसे प्राप्त करें? सबसे पहले, हमें एक विश्वसनीय "क्लाइंट-सर्वर" भाग की आवश्यकता है - बहुत ही परत जिसे कुछ शर्तों के तहत काफी आसानी से क्रैक किया जा सकता है। यदि, 2-3 कैप्चा प्राप्त करने के बाद, हमलावर को पता चलता है कि domain.ru/captcha-get.php?code= 12345 - यह हमारा कैप्चा है - दरार करने के लिए कुछ भी नहीं होगा।

इसके अलावा, बस कैप्चा को तत्वों में तोड़ना और उन्हें किसी भी प्रकार की समानता-पत्राचार द्वारा निर्धारित करने की कोशिश करना भी एक लोकप्रिय अभ्यास है (और यहां तक ​​कि यैंडेक्स जैसी परियोजनाओं पर भी काम करता है)। इसलिए, सख्ती से अलग तत्वों का चयन करना असंभव है।

ग्राफिक हिस्सा है

सबसे लंबा। बहुत सारे कोड और कुछ चित्र।

एक बिंदु। हम पाठ उत्पन्न करते हैं। PHP में 5-6 वर्ण कैसे उत्पन्न करें, मुझे लगता है, बहुत से लोग जानते हैं। मैंने कम से कम प्रतिरोध का रास्ता अपनाया:

$text = ""; for($i = 0; $i < 5; $i++){ switch(mt_rand(1,3)){ case(1): {$c=chr(rand(ord('a'),ord('z')));break;} case(2): {$c=chr(rand(ord('A'),ord('Z')));break;} case(3): {$c=rand(0,9);break;} } $text.=$c; } 

बिंदु दो। पाठ को कुछ छवि पर प्रदर्शित किया जाना चाहिए। मैंने 200x60 पिक्सेल का चित्र आकार चुना - यह सिर्फ मेरी जरूरतों और पॉप-अप विंडो के लिए उपयुक्त है।

 $im = imageCreateTrueColor(200,60); 

बिंदु तीन। हमें कुछ ऐसी पृष्ठभूमि चाहिए जो शिलालेख के साथ पर्याप्त रूप से विपरीत हो, लेकिन एक ही समय में, इसे केवल फ़िल्टर नहीं किया जा सकता है। मैंने इस स्तर पर इसके साथ परेशान नहीं करने का फैसला किया, लेकिन अंतिम परिणाम पर बस किसी तरह का फिल्टर लगाने के लिए। इस बीच, पृष्ठभूमि एक विशुद्ध रूप से यादृच्छिक रंग होगी।

 $white = imageColorAllocate($im, mt_rand(170,255),mt_rand(170,255),mt_rand(170,255)); $black = imageColorAllocate($im, mt_rand(0,140),mt_rand(0,140),mt_rand(0,140)); imagefilledrectangle($im,0,0,200,60,$white); 

यहां थोड़ा स्पष्ट करना आवश्यक है। मैं सशर्त रूप से सफेद (हल्के) और सशर्त रूप से काले (गहरे) रंगों को सौंपता हूं, जिसके बाद ... हां, हां, मैं उन्हें पूरे क्षेत्र से भर देता हूं।

आगे बेहतर है। चौथा बिंदु पाठ है। यह तिरछा हो सकता है, और कई फोंट में से एक में खींचा जाना चाहिए। मैंने अपने सिस्टम पैलेट से 6 टुकड़े टाइप किए, और यह कोड लिखा:

 $a = mt_rand(-5,5); $s = 40; $f = "captcha_font".mt_rand(1,6).".ttf"; do{ $s--; $b = imagettfbbox ($s, $a, $f, $text); $x = $b[2]-$b[0]; $y = $b[1]-$b[7]; }while(($x>=200)||($y>=60)); $black = imageColorAllocate($im, mt_rand(0,140),mt_rand(0,140),mt_rand(0,140)); imagettftext($im, $s, $a, 100-$x/2, 30+$y/2, $black, $f, $text); imagewave($im); 

हां, चूंकि यह ज्ञात नहीं है कि कौन सा फ़ॉन्ट किस ढलान और आकार के साथ फ्रेम में बिल्कुल फिट बैठता है, मैंने उलटा खोज विधि का उपयोग किया। और वह ... काम करता है। फिलहाल, हमारे पास यह परिणाम है:



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

 function imagewave($im){ $sx = imagesx($im); $sy = imagesy($im); $dx = mt_rand(0,$sx/2); $xf = mt_rand(-100,100)/20; for($x = 0; $x < $sx; $x++){ $yd = floor(sin(deg2rad($dx+$x)*$xf)*2); $l = array(); for($y = 0; $y < $sy; $y++) $l[$y] = imagecolorat($im,$x,$y); if($yd>0) for($y = 0; $y < $yd; $y++) array_push($l,array_shift($l)); elseif($yd<0) for($y = 0; $y > $yd; $y--) array_unshift($l,array_pop($l)); for($y = 0; $y < $sy; $y++) imagesetpixel($im,$x,$y,$l[$y]); } $dy = mt_rand(0,$sy/2); $yf = mt_rand(-100,100)/20; for($y = 0; $y < $sy; $y++){ $xd = floor(sin(deg2rad($dy+$y)*$yf)*2); $l = array(); for($x = 0; $x < $sx; $x++) $l[$x] = imagecolorat($im,$x,$y); if($xd>0) for($x = 0; $x < $xd; $x++) array_push($l,array_shift($l)); elseif($xd<0) for($x = 0; $x > $xd; $x--) array_unshift($l,array_pop($l)); for($x = 0; $x < $sx; $x++) imagesetpixel($im,$x,$y,$l[$x]); } } 

शायद मैंने सबसे तेज़ तरीका नहीं चुना, लेकिन यह पहले की तरह काम करता है। और इसे इस्तेमाल करने के बाद कैप्चा इस तरह बनता है:


पहले से बहुत बेहतर। मैंने एक यादृच्छिक कोण, एक यादृच्छिक फ़ॉन्ट और एक ही रंग (!) पर एक और पाठ आउटपुट जोड़ने का फैसला किया, जो चित्र के पार्सिंग को भागों में जटिल करता है:


क्या वह सब है? लेकिन नहीं। बॉट्स के काम को और जटिल बनाने के लिए, मैंने एक-दो बार हमारी तस्वीर को पार करने का फैसला किया:

 $yd = mt_rand(-30,30); $black = imageColorAllocate($im, mt_rand(0,140),mt_rand(0,140),mt_rand(0,140)); imageline($im,0,$yd,200,30+$yd,$black); imagewave($im); $black = imageColorAllocate($im, mt_rand(0,140),mt_rand(0,140),mt_rand(0,140)); imageline($im,0,30+$yd,200,60+$yd,$black); imagewave($im); 

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

 function imagerecolor($im){ $sx = imagesx($im); $sy = imagesy($im); for($x = 0; $x < $sx; $x++){ $rd = mt_rand(80, 120) / 100; $gd = mt_rand(80, 120) / 100; $bd = mt_rand(80, 120) / 100; for($y = 0; $y < $sy; $y++) { $c = imagecolorat($im,$x,$y); $r = (($c >> 16) & 0xFF) * $rd; $g = (($c >> 8) & 0xFF) * $gd; $b = ($c & 0xFF) * $bd; $c = imagecolorallocate($im, $r, $g, $b); imagesetpixel($im,$x,$y,$c); } } } 

खैर, एक कैप्चा पर हमारे कॉर्पोरेट लोगो के बिना खुशी क्या है? स्वयं परिणाम के बारे में सोचें, और कोड असंभव के लिए सरल है:

 $l = imagecreatefrompng('../static/image/icon16.png'); imagecopy($im,$l,184,44,0,0,16,16); imagedestroy($l); 

छवि खत्म हो गई है - हम इसके सुविधाजनक निष्कर्ष पर आगे बढ़ते हैं।

क्लाइंट सर्वर

सबसे आसान तरीका कुकीज़ में कुछ कोड (सत्र आईडी, हैश या अन्य जानकारी) संग्रहीत करना है। लेकिन अगर उपयोगकर्ता एक साथ कई (कम से कम दो) खिड़कियों में काम करता है, और दोनों खिड़कियों में एक कैप्चा दिखाई दिया? यहाँ हम आधार-एनकोडेड छवियों के रूप में ऐसी योजना की सहायता के लिए आते हैं। जब से मैंने जावास्क्रिप्ट का उपयोग किया है, इस सामान का निष्कर्ष काफी सरल रूप से बनाया गया था:

 ob_start(); imagepng($im); $b64 = base64_encode(ob_get_contents()); ob_end_clean(); imageDestroy($im); $response = array('key'=>sha512(md5(strtolower($text)).date('DmyH').get_ip().'RANDOM_SALT'),'img'=>'data:image/png;base64,'.$b64); 

और, कहीं और:

 $response = json_encode($response); ?>Api.callback(<?=$cid?>,<?=$response?>); 

इस तरह से फॉर्म का निष्कर्ष भी संभव है - मैं इसे होमवर्क के लिए छोड़ देता हूं। ;)
कृपया ध्यान दें कि हैश में हम कुछ नमक का उपयोग करते हैं (छँटाई की कठिनाई के लिए), और कैप्चा केवल चालू घंटे में मान्य है (यदि उपयोगकर्ता पूरी तरह से अशुभ है और उसने कैप्चा प्राप्त किया है, उदाहरण के लिए, 15:59 पर, और 16:00 पर दर्ज किया गया, तब यह काम नहीं किया)। इस तरह के चित्र का उत्पादन आवश्यक चित्र के src क्षेत्र में फ़ील्ड $ प्रतिक्रिया ['img'] को प्रतिस्थापित करके किया जाता है।
वैसे, sha512 फ़ंक्शन:

 function sha512($s){ return hash('sha512',$s); } 

होमवर्क के लिए, मैं आपको हैश ('0' और 'O', 'l' और 'I', और इसी तरह) के समान वर्णों की जगह छोड़ देता हूं।

आज के लिए बस इतना ही। सौभाग्य है। ;)