آموزش ساخت کپچا(captcha)

آموزش ساخت کپچا(captcha)

در این آموزش ما قصد داریم تا به شما نحوه ی ایجاد یک کپچا رو بدیم.همانطور که میدانید کد کپچا جهت جلوگیری از ورود روباتها و اسمپم ها در وبسایت ها استفاده می شود.

برای مشاهده لینک وارد شود

ابتدا بر خلاف گذشته کار را با نوشتن کدهای php آغاز می کنیم.کاری که ما در اینجا انجام خواهیم داد عبارتند از:

۱-تغییر اندازه کپچا

۲-استفاده از چندین نوع فونت متفاوت جهت نمایش

۳-تنظیم میزان سختی کد امنیتی (مثلا چرخش کلمه،انتخاب تصادفی فونت،اندازه فونت و…)

۴-استفاده از قابلیت ajax جهت جلوگیری از بارگذاری مجدد کد امنیتی در هر کلیک

captcha.php


همانطور که میدانید هنگام ورود به سایت برای هر کاربر سرور یک session id منحصر به فرد تولید می کند که ما با استفاده از آن کد کپچا را در session ذخیره می کند.(جهت بررسی تطبیق درستی کد امنیتی) برای این منظور از تابع;()session_start@ استفاده می کنیم.

با استفاده از متغییر captcha_generate$ ما نوع تولید تصادفی کد امنیتی را مشخص می کنیم که :

اگر digitباشد فقط از اعداد برای تولید کد امنیتی استفاده میشود.

اگر alpha باشد فقط از حروف انگلیسی  برای تولید کد امنیتی استفاده میشود.

اگر digitalpha باشد ترکیبی از اعداد و حروف استفاده میشود.

سپس کلمه تصادفی در داخل حلقه تولید میشود.

ارتفاع و عرض و طول کلمه کد امنیتی و همچنین متغییر captcha_generate$  توسط تابع []GET_$ از کوئری دریافت میشود.تابع isset محتوای تابع get  را بررسی می کند تا خالی نباشد.

index.php



    

 

 

 

کدهای مربوط به css را در زیر توضیح می دهیم.

captcha.css

#Captcha {
    letter-spacing: 2px;
    width: 200px;
    margin: 10px 0 0 50px;  
    border: 1px solid #008080;
    height: 24px;
}
.clable {
    float: right;
    margin-top: 10px;
}
.controls {
    padding-right: 10%
}
.captchaControl {
    width: 290px;
    height: 80px;
    position: relative;
    border: 1px solid #eee;
    left: 8px;
}
.loading {
    background: url('../images/preloader-w8-cycle-black.gif') no-repeat center center;
    width: 290px;
    height: 80px;
}
.captchaDiv {
    position: relative;
    width: 300px;
    margin-left: 3px !important;
    padding-left: 0px !important;
    border: solid 1px #E5E5E5 !important;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    background: #f5f5f5;
    padding: 6px;
    height: 115px;
}
#captchaButTry {
  position: absolute;
  left: 9px;
  top: 85px;
  background-color: rgba(73, 73, 73, 0.46);
  padding: 4px 2px 4px 2px;
  color: white;
}
.container-fluid {
    border-right: 4px solid #eee;
}

ما در بالا تنظیمات مربوط به محل قرار گیری تصویر امنیتی،تنظیمات پس زمینه و دکمه و … را قرار دادیم که به دلیل سادگی نیازی به توضیح ندارد.

پایان

 

 آموزش کپچا ی صوتی 

+11
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی رضا

کارشناس نرم افزار. با هفت سال سابقه برنامه نویسی. در خدمت شما دوستان عزیز...

۱۴ دیدگاه ها

  1. بهتره سورس کد پروژه رو هم برا دانلود قرار بدی

  2. مهندس عزیز دستت درد نکنه.وافعا عالی و خوب بود.تشکر تشکر

  3. سلام مرسی
    ولی یه اشکال هست چرا دکمه refresh کار نمیکنه یعنی روش که کلیک میکنم همون کد امنیتی قبلی رو نشون میده و کد جدید نمیاره؟؟!!

  4. نه منظورم دکمه refresh که تو کد کپچا گذاشتین کار نمیکنه!!!روش که کلیک میکنم همون کد امنیتی قبلی رو نشون میده و کد جدید نمیاره؟؟!!

  5. سلام ببخشید من هرچه میخوام کپچا درست کنم عمل نمیکنه مراحل رو هم درست میرم تورا به خدا کمک کنید استادمون گفته اگه نتونم درست کنم باید درسم رو حذف کنم ۰۹۳۸۷۹۳۶۸۹۳ شعیب

  6. جالب بود
    ممنون بابت آموزش

  7. ولی یه اشکال هست چرا دکمه refresh کار نمیکنه روش کلیک میکنم همون کد امنیتی قبلی رو نشون میده و کد جدید نمیاره؟

  8. سلام ممنونم بسیار عالی بود با سپاس فراوان از وب سایت خوبتون

دیدگاه خود را برای مدیر سایت بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هشت × 4 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>