المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح صورة رمز التحقق captcha بإحترافية



المظفر بالله
20-10-2008, 12:36 AM
بسم الله الرحمان الرحيم



يَا أَيُّهَا الَّذِينَ آمَنُوا تُوبُوا إِلَى اللَّهِ تَوْبَةً نَّصُوحًا عَسَى رَبُّكُمْ أَن يُكَفِّرَ عَنكُمْ سَيِّئَاتِكُمْ وَيُدْخِلَكُمْ جَنَّاتٍ تَجْرِي مِن تَحْتِهَا الأَنْهَارُ يَوْمَ لا يُخْزِي اللَّهُ النَّبِيَّ وَالَّذِينَ آمَنُوا مَعَهُ نُورُهُمْ يَسْعَى بَيْنَ أَيْدِيهِمْ وَبِأَيْمَانِهِمْ يَقُولُونَ رَبَّنَا أَتْمِمْ لَنَا نُورَنَا وَاغْفِرْ لَنَا إِنَّكَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ



سورة التحريم آية 10


السلام عليكم و رحمة الله و بركاته
مرحبا بكم من جديد
إلى هدا الدرس المتواضع


و الذي أتمنى أن تجدوا فيه المتعة و الفائدة
فعلى بركة الله نبدأ


الموضوع : إنشاء صورة رمز التحقق البصري باحترافية
و الهدف بطبيعة الحال هو الحد من الأوامر المزعجة التي يوجها القراصنة إلى المواقع قصد شل الخادم أو إضعافه و بالتالي التمهيد لاختراق الموقع
قبل متابعة الدرس أذكرك أخي الكريم أني قمت مسبقا بطرح درس عمل نظام captcha
الـــــــــرابـــــــط (http://vb.vip600.com/showthread.php?t=319364)
أما درسنا الحالي فسنقتصر فيه على تطوير الصورة فقط



مثال


http://www.geek4arab.com/vb/imgcache/13380.imgcache
لاحظ أن هده الصورة لا تظهر رمز التحقق و حسب
بل تعتمد خلفية له . بالإضافة إلى تشويه شكله
مهما تطورت برامج الاختراق فلن تتوصل إلى معرفة الرقم الموجود في الصورة بإذن الله




لنبدأ بالخطوة الأسهل
و هي توفير خلفيات متعدد للصورة
تظهر في كل مرة خلفية
الأبعاد يجب أن تكون موحدة . و في المثال الذي أدرجته الأبعاد هي 40 * 120
ليس من الضروري أن تختار هده الأبعاد لكن لك الحرية في اختيار الأبعاد التي تناسب دوقك




http://www.geek4arab.com/vb/imgcache/13381.imgcache


يجب أن تكون الصور
1. موحدة الأبعاد
2. موحدة الامتداد
3. ذات أسماء رقمية متوالية مثل : 1 2 3 4 5 6
4. لا تحتوي على ألوان متناقضة مثل الأبيض و الأسود و دلك حتى لا تستحيل قرائة رمز التحقق



بعد توفير الخلفيات قم بحفظها في مجلد و ليكن افتراضيا هو :img


الأن لنقم بفتح ملف نصي و لنبدأ معا في برمجة الصورة


أول خطوة برمجية

لازم يكون على هيئة صورة و بامتداد

jpg و دالة header تفي بالغرض





header('Content-Disposition: filename="aziz.jpg"');

header('Content-type: image/jpeg');





اختيار رقم عشوائي طريق دالة rand و تخزينه في متغير






$char = rand(100,999);


لاحظ أن الرقم هنا سيكون محصورا بين 100 و 999 و دلك لأنني أريد أن أكتفي بتلاتة أرقام في المثال




إدا أردت أرقاما أكتر ما عليك سوى تغيير القيمتين المدخلتين إلى دالة rand مثلا



$char = rand(10000,99999);









سبحان الله و بحمده سبحان الله العظيم









$char2 = substr($char, 1, 1);علينا تقسيم الكود الذي تم إنشائه بواسطة دالة rand حتى نقوم بعرض كل رقم في مكان عشوائي



$char1 = substr($char, 0, 1); $char3 = substr($char, 2, 2);





هدا إدا افترضنا أن الكود مكون من 3 أرقام




يهدا سنحصل على المتغيرات التالية $char1 $char2 $char3

كل واحد منها يحتوي على رقم عشوائي





بهدا ننتهي من إنجاز الكود و يبقى أمامنا اختيار الخلفية التي سنضع عليها الكود





لدينا مثلا 10 خلفيات بامتداد jpg و بأسماء من 1 إلى 10




سنحتاج إلى دالة rand لاختيار رقم من 1 إلى 10 و سيكون هو اسم الخلفية






$imgname = rand(1,10);






تم أنشاء الصورة عن طريق دالة imagecreatefromjpeg انطلاقا من الخلفية التي تم تحديدها

بإختصار شديد :







$image_p =imagecreatefromjpeg("img/".rand(1,10).".jpg");







قبل كتابة الكود على الصورة نقوم بتحديد لونه عن طريق دالة imagecolorallocate



$white = imagecolorallocate($image_p, 255, 255, 255);







هدا للون الأبيض




أدا كنت تريد اللون الأسود فهدا هو الكود الخاص به



$white = imagecolorallocate($image_p, 0, 0, 0);










الآن أدعوك للتأمل في الخلفية التالية جيدا



http://www.geek4arab.com/vb/imgcache/13382.imgcache



أين يمكن أن نضع الرقم الأول من الكود ؟؟؟؟؟؟





المنطقة 1 و 2 و 3 ممكن

لكن بالنسبة للمنطقتين 4 و 5 ؟؟
هدا أقل تقدير يمكن أن نتركه للرقمين الثاني و الثالث






الرقم الثاني ؟؟؟؟؟؟




إدا كان خارجا عن 2 . 3 .4 فأكيد أنه سيأخذ مكان الرقم الأول أو الثاني




نفس التقدير بالنسبة للرقم الثالث

3.4. أو 5






لكل هده الاعتبارات سنبحث عن الموضع العرضي الممكن للرقم الأوسط عن طريق دالة rand






$t120_2 = rand(12,100);






أما الموضع الطولي فلا مشكلة أيا كان مكانه على شرط أن لا يخرج عن نطاق الصورة



$t40_2 = rand(0,25);








حجم الخط الذي اخترته هو 12




لنقم بإدخال المتغيرات التي جمعناها إلى الصورة






imagestring($image_p, 12, $t120_2, $t40_2, $char2, $white);







ركز معي لو سمحت

بالخطوة السابقة يمكن أن يوضع الرقم الثاني في أي مكان محدد بالأسود في الصورة أدناه





http://www.geek4arab.com/vb/imgcache/13383.imgcache



السؤال : أين يمكن وضع الرقم الأول والثالث ؟؟؟؟؟؟؟




لنعالج أولا مشكلة الرقم الأول

في المنطقة الرمادية – ممكن
في المنطقة السوداء --------- ممكن بشرط ان يكون أمام الرقم الثاني






كيف نحصل على مكان أمام الكود الثاني؟؟؟




بسيطة !!!!!!!!

لنرجع 10 بكسل عن المتغير $t120_2
أي



$t120_2-10







إدن



$t120_1 = rand(2,$t120_2-10);








بالنسبة للموضع الطولي يجب أن لا يكون أعلى من الرقم الثاني ب 5 بكسل و لا أسفل منه ب5 بكسل لأن دلك سيجعل الأرقام فوق بعضها البعض و يمكن أن نرى هدا المثال



http://www.geek4arab.com/vb/imgcache/13384.imgcache





إدن



$t40_1 = rand($t40_2-5,$t40_2+5);












بعد هدا العناء تطفو مشكلة أخرى على السطح

و لنشاهد المثال




http://www.geek4arab.com/vb/imgcache/13385.imgcache



ربما تنخفض الأرقام خارج الصورة




لدا علينا برمجة دالة تمنع خروج الأرقام عن أبعاد الصورة





الدالة ستحتاج لثلاث مدخلات :

1. ارتفاع الرقم
2. أقصى ارتفاع ممكن
3. أدنى ارتفاع ممكن





سنحتاج لشرطين داخل الدالة

1. ادا فاقت الصورة أقصى ارتفاع نعيدها إلى أقصى ارتفاع
2. ادا قلت الصورة عن أدنى ارتفاع نعيدها إلى أدنى ارتفاع





و ببساطة هدا هو كود الدالة








{
function no_deplace($number,$min,$max) if($number < $min){
$number = $min;
}
if($number > $max){
$number = $max;
}
return $number;
}




و الآن لنشرع في استخدام الدالة







imagestring($image_p, 12, $t120_1, no_deplace($t40_1,0,25), $char1, $white);






الرقم الثالث بنفس الطريقة








$t40_3 = rand($t40_2-5,$t40_2+5);
$t120_3 = rand($t120_2+10,110); imagestring($image_p, 12, $t120_3, no_deplace($t40_3,0,25), $char3, $white);




تحديد الجودة و لتكن أدنى جودة ممكنة






imagejpeg($image_p, null, 20);







يمكن تحميل متال كامل من المرفقات

ملاحضة : الشرح بواسطة عزيز سوفت
حقوق النشر لكل مسلم

كلمة السر لفك ضغط الملفات

azizsoft


منقول
شرح صورة رمز التحقق captcha بإحترافية (http://vb.vip600.com/showthread.php?p=3297275#post3297275)

http://file7azm.info/do.php?img=807