آموزش ساخت کد امنیتی (Captcha) در PHP و ASP.NET

دسته بندی: برنامه نویسی
زمان مطالعه: 8 دقیقه
۲۱ مرداد ۱۳۹۲

دوستان سلام،توی این مطلب قصد دارم یکی از اسکریپت های لازم و به درد بخور توی دنیای وب که برای امنیت وب سایت شما خیلی خیلی مهمه رو آموزش بدم،هر چند اسکریپت های آمادش هم زیاده،شرکت بزرگی مثل گوگل هم همین سرویس رو خیلی پیشرفته ارائه میکنه،که خیلیا هم ازش استفاده میکنن، اما خوب خیلی از دوستان میخوان این کارو خودشون انجام بدن و سلیقه خودشون رو هم توی این قضییه دخالت بدن.این بار هم اسکریپت رو توی PHP و ASP.NET پیاده میکنیم.پس با ما همراه باشید.

کد های PHP

خوب ما این جا قراره دو تا فایل ایجاد کنیم،یکی فایل index.php که صفحه اصلی ما هست که کد لازم رو تولید میکنه و بعدا نمایش میده و صفحه SecurityCode.php که کد تولید شده در صفحه index رو برای ما تبدیل به یه تصویر میکنه و به خروجی میبره.

کد های لازم در صفحه اول رو اینطوری مینویسیم.

session_start();
$text='QWERTYUIOPASDFGHJKLZXCVBNM123456789';
$code='';
for($i=1;$i<=6;$i++)
{
$start=rand(0,strlen($text));
$code.=substr($text,$start,1);
}
$_SESSION['code']=$code;

خوب اول از همه سشن رو روشن کردیم چون لازمش داریم،مخوایم کد تولید شده رو با همین سشن بفرستیم به صفحه تولبد عکس ما،بعدش ما یه متغییر تعریف کردیم و اون کاراکترهای لازم رو که میخوایم توی کد امنیتی استفاده بشن رو توش قرار دادیم (من همینجوری صفحه کلید رو از دکمه اول تا آخرش زدم و بعدشم اعداد رو اضافه کردم)،بعد از اون یه متغییر تعریف کریدم که قراره کد توی اون ذخیره بشه،فعلا خالیش گذاشتیم،حالا یه حلقه تعریف میکنیم که تو هر بار اجرای خودش به صورت تصادفی یکی از اون کارکتر های متفییر text رو برای ما برمیگردونه(با کلمه rand ما اولش یه عدد از صفر تا strlen رشته اصلی انتخاب میکنیم،بوسیله substr مقدار شروع انتخاب زیر رشته رو همون عدد رندوم قرار دادیم وطولش رو هم یک گذاشتیم)  و به متغییر code که از اول خالی بوده اضافه میکنه،بعد از حلقه کد تصادفی ما ایجاد شده (اینجا ما تعداد دور حلقه روگذاشتیم 6 و این باعث میشه ما یه کد 6 حرفی داشته باشیم شما می تونید کم یا زیادش کنید یا مثلا بازم یه عدد رندوم بهش بدید)،آخر کار هم ما همین کد تولید شده رو گذاشتیم توی سشن،خوب کد های مربوط به صفحه index تموم شد حالا میریم سراغ صفحه تولید تصویر.

session_start();
header('Content-type: image/jpeg');
$code=$_SESSION['code'];
$font_size=30;
$image_width=200;
$image_height=60;
$image= imagecreate($image_width,$image_height);
imagecolorallocate($image,220,220,220);
$text_color= imagecolorallocate($image,0,0,0);
imagettftext($image, $font_size,0,30,45, $text_color,'font.ttf', $code);
imagejpeg($image);

خوب اول از همه سشن روشن،بعدشم چون قراره خروجی این فایل از نوع تصویر باشه پس ما اومدیم با تنظیم هدر خروجی فایل رو گذاشتیم روی تصویر jpg،بعدشم مقدار کد رو از سشن خوندیم و گذاشتیم توی یه متغییر،ما اینجا اومدیم یه سری متغییر تعریف کردیم که مشخصات اون تصویر رو تویخودش داره،اندازه فونت رو گذاشتیم 30،طول عکس شده 200 پیکسل و ارتفاع تصویر هم شده 60 پیکسل.

نکته :

دستورات این قسمت مربوط میشه به کتابخانه GD که روی wampserver و اکثر هاستینگ ها هم نصب و فعاله،از این کتابخانه برای تولید تصاویر به این صورت که می بینید استفاده میشه

خوب حالا با متد imagecreate و با دادن طول و عرض بهش یه تصویر می سازیم و اونو توی متغییر image قرار میدیم،بعدشم با متد imagecolorallocate تصویر مون رو با رنگ خاکستری پر میکنیم(اون مقادیر عددی به صورت RGB هستن)،خوب حالا برای رنگ نوشته مون هم با همون متد یه  رنگ مشکی میگیریم و توی متغییر text_color قرار میدیم،حالا میخوایم با متد imagettftext متن کد رو روی تصویرمون بنویسیم.

  • پارامتر 1: متغییر تصویر رو دریافت میکنه که همون image هست.
  • پارامتر 2 : سایز فونت رو دریافت میکنه که ما اون بالا تعریف کردیم.
  • پارامتر 3 :زاویه چرخش متن رو توی عکس دریافت میکنه که ما گذاشتیم 0.
  • پارامتر 4 :فاصله x رو دریافت میکنه،فاصله نوشته از سمت چپ نسبت به تصویر.
  • پارمتر 5 : فاصله y رو دریافت میکنه،فاصله نوشته از سمت بالا نسبت به تصویر.
  • پارامتر 6 : رنگ متن رو که تولید کرده بودیم دریافت میکنه.
  • پارامتر 7 :یه فونت رو دریافت میکنه که با اون متن رو می نویسه(آدرس فونت باید مستقیم باشه،من الان فونت روگذاشتم کنار فایل)
  • پارامتر 8 :اینم متنی رو که میخوایم روی تصویر بنویسیم مشخص میکنه که این جا همون کد امنیتی ماست.

خوب آخر کار هم با دستور imagejpeg که متغییر تصویر رو به عنوان ورودی میگیره،تصویر خودمون رو تولید میکنیم.

خوب حالا ما توی فایل index.php خودمون برای نمایش این تصویر و نتیجه کار از یه تگ img استفاده میکنیم و src اونو برابر فایل SecurityCode خودمون قرار میدیم (یادتون باشه نوع محتوای فایل SecurityCode تصویر هست).

اینم کد های HTML.

<html>
<head>
<meta charset="utf-8">
<title>Captcha Code</title>
</head>
<body>
<img src="SecurityCode.php">
</body>
</html>

خروجی کار هم اینطوری میشه.

p20-final-result

دانلود فایل های PHP

خوب دوستان توی صفحه بعد کد های ASP.NET رو می نویسیم.

کد های ASP.NET

خوب دوستان در این جا هم ما از دو صفحه برای انجام اینکار بهره می بریم،توی صفحه Default.aspx کد لازم رو تولید و توی سشن قرار میدیم و توی صفحه SecurityCide.aspx هم کد رو از سشن میگیریم و اونو به تصویر تبدیل میکنیم.

کد های صفحه Default.aspx:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

string text = "QWERTYUIOPASDFGHJKLZXCVBNM123456789";
string code = "";
Random rnd = new Random();
for (int i = 1; i <= 6; i++)
{
int start=rnd.Next(0, text.Length);
string one_char= text.Substring(start, 1);
code += one_char;

}
Session["code"]=code;

}
}

توضیح خاصی هم نداره دقیقا شبیه همون کد های PHP،البته توی ASP برای عملیات روی رشته ها مثل زیررشته گرفتن فقط کافیه جلوی متغییر یه نقطه بذارید تا لیست متد های مربوطه براتون به نمایش دربیاد و ازش استفاده کنید(این به خاطر اینه که هر متغییر string در واقع یه نمونه از کلاس string هست)،فقط برای تولید اعداد تصادفی این جا باید از کلاس Random یه نمونه بسازیم و با استفاده از تابع next این کلاس میتونیم عدد تصادفی خودمون رو تولید کنیم.

کد های صفحه SecurityCode.aspx:

اول از همه توی قسمت Source کد های HTML رو پاک کنید،فقط اون خط بالای صفحه باقی بمونه،ما باید به همون خط بالای صفحه یه ویژگی دیگه اضافه کنیم.

<%@ Page ContentType="image/jpeg" Language="C#" AutoEventWireup="true" CodeFile="SecurityCode.aspx.cs" Inherits="SecurityCode" %>

ما به این خط قسمت Contetn-type رو اضافه کردیم تا به مرورگر بگیم این صفحه ما محتواش از نوع تصاویر هست.

خوب اینم از قسمت CodeBehind این صفحه :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

public partial class SecurityCode : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string code=(string)Session["code"];

int image_width = 200;

int image_height = 60;

Bitmap image = new Bitmap(image_width,image_height);

Graphics gh = Graphics.FromImage(image);

gh.Clear(Color.Gray);

gh.DrawString(code,new Font("tahoma",25,FontStyle.Bold),new SolidBrush(Color.Green),new PointF(20,10));

image.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);

}
}

خوب دوستان اول از همه فضای نام Drawing که کلاس های لازم برای طراحی رو در اختیار ما قرار میده رو اضافه میکنیم (به طور پیش فرض این فضای نام اضافه نیست).

خوب توی متد Page_Load خودمون از سشن مقدار کد رو دریافت کردیم،بعدشم با دوتا متغییر طول و عرض تصویر رو ست کردیم.حالا ما اومدیم از کلاس Bitmap که برای کار کردن با تصاویر مورد استفاده قرار میگیره یه نمونه ساختیم و همون جا هم بهش مقدار طول و عرض تصویر رو دادیم(این کلاس برا متد سازنده خودش 12 تا overload مختلف داره،مثلا یکی میتونه از فایل های کامپیوتر توصیری رو بخونه و روی اون کار انجام بده و یه مورد دیگه هم میتونه همین حالت مارو ایجاد کنه یعنی با دادن طول و عرض تصویر روخودش برای ما ایجاد کنه).

بعد از این ما از کلاس Graphics هم یه نمونه ساختیم و اون تصویر image رو که با کلاس bitmap ایجاد کردیم بهش پاس میدیم و میگیم که تغییرات باید روی این تصویر انجام بشه(این کلاس Graphics برا رسم شکل و خطوط و رنگ آمیزی و ... بر روی تصاویر مورد استفاده قرار میگیره،ما اینجا میخوایم با این کلاس مقدار کد امنیتی رو روی تصویر مورد نظر بنویسیم).

حالا یا استفاده از متد Clear شی کلاس Graphics اون تصویر image رو با رنگ خاکستری پاک میکنیم(میتونیم از کلاس Color به رنگ های دلخواه خودمون استفاده کنیم).

با استفاده از متد DrawString ما متن مورد نظر رو با تنظیمات دلخواه روی image خودمون می نویسیم،این متد پارامتر هایی داره که من اینجا توضیح میدیم:

  • پارامتر 1 : همون مقدار رشته ای هست که باید روی توصیر بنویسیم،اینجا ما همون کد دریافتی رو بهش دادیم.
  • پارامتر 2 :ما باید اینجا یه فونت برای نوشتن انتخاب کنیم،اینجا من از کلاس فونت استفاده کردم و فونت tahoma با سایز 25pt و با حالت Bold رو براش انتخاب کردم.
  • پارامتر 3 :اینجا ما باید یه قلم مو برای رنگ کردن اون نوشته انتخاب کنیم،میتونیم از قلم موهای سیستم استفاده کنیم که با کلمه SystemBrushes در دسترس هستن(قلم موی سیستم مثل حالت متن عنوان پنجره ها یا مثلا حالت متن منو ها)،من اینجا از SolidBrush استفاده کردم و رنگ سبز رو هم برای یکدست بودن رنگ برای پارمترش انتخاب کردم.
  • پارامتر 4 : اینجا هم ما مشخص میکنیم متن نسبت به تصویر چقدر از x و y فاصله داشته باشه،دقیقا مثل قسمت PHP،پارامتر اول فاصله افقی از چپ و پارامتر دوم فاصله عمودی از بالا رو تعیین میکنه.

خوب تغییرات لازم رو با کلاس Graphics انجام دادیم،حالا با استفاده از متد Save شی کلاس Bitmap که تصویر اصلی ما رو توی خودش داره،خروجی تصویر رو ذخیره میکنیم،ما می تونیم این تصویر رو روی Disk هم ذخیره کنیم اما مثل کد PHP تصویر رو میفرستیم روی خروجی صفحه،برای این کار ما به متد Save به جای آدرس مقدار Response.OutputStream رو میدیم تا خروجی عکس بیاد رو ی صفحه ما،و بعدش فرمت تصویر رو هم از کلاس Imaging از نوع Jpeg انتخاب میکنیم.

(به نظرم این مطلب باید میشد آموزش کار با کلاس های طراحی در دات نت 🙂 )

توی قسمت HTML صفحه Default.aspx یه تگ img قرار میدیم و نتیجه رو توش میبینم:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="SecurityCode.aspx" />
</div>
</form>
</body>
</html>

خوب خروج کار ما هم اینطوری میشه:

p20-final-result-asp-net

دانلود فایل های ASP.NET

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

نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

استاد

سلام ببخشید چرا مل من نمایش داده نمیشه ؟

کیوان علی محمدی

دلایل مختلف میتونه داشته باشه،حتما کدها رو کامل و طبق آموزش چک کنید.

رضا نصرالهی

برای بازشدن aspx تو لوکال شما چه نرم افزاری رو پیشنهاد می کنید؟

کیوان علی محمدی

سلام خود ویژوال استدیو یه وب سرور توکار داره وقتی برنامه رو اجرا کنی خودش فایل مورد نظر رو اجرا میکنه،نیاز به تنظیمات خاصی نداره.از نسخه 2005 به بعد این وب سرور اضافه شده.

ساحل

ممنون از پاسخ گویی.
من یک سوال دیگه هم داشتم.
من یک کپچا از یک سایت پیدا کردک که از ظاهرش خیلی خوشم اومده. اون را می خوام توی فرم تماس با ما بگذارم.
منتهی برنامه validation اون را با زبان جاوا نوشتند. من هم اصلا جاوا بلد نیستم. میشه بگید ارزیابی کپچا را چطور می تونم با php انجام بدم؟ من خیلی تو این مورد سرچ کردم ولی هر برنامه ای که پیدا کردم گذاشتم تو فرمم یا ارزیابی را انجام نمیدهد و در صورت غلط بودن کپچا هم اطلاعات را به دیتابیس من ارسال می کنه و یا هم اصلا کار نمیکنه.
لطفا کمک کنید. در ضمن من خیلی مبتدی هستم. رشته من هم برقه. تازه برنامه نویسی را شروع کردم. با تشکر فراوان

کیوان علی محمدی

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

ساحل

سلام.
ممنون از سایت خوبتون.
من برنامه فرم تماس را تونستم از طریق سایت شما یاد بگیرم و استفاده کنم. فقط یک سوال داشتم. من یک فرم تماس با ما ساختم. داخل این فرم، کد امنیتی هم گذاشتم. می خوام پس از اینکه اطلاعات در دیتابیس من ذخیره شد یک ایمیل و اس ام اس خودکار به کاربر بزنم مبنی بر اینکه اطلاعاتش در سایت من ثبت شده. برای ایمیل و اس ام اس هم برنامه نوشتم که در حالت عادی هر دو تا کار می کنند. فقط نمی تونم برنامه این رو بنویسم که پس از ثبت اطلاعات در دیتابیس این ایمیل و اس ام اس به صورت خودکار زده بشه. یعنی برنامه را طوری فقط می تونم بنویسم که پس از ثبت اطلاعات کاربر فقط می تونه ایمیل خودکار ایجاد کنه ولی خودکار کردن اس ام اس را نمی تونم. منظورم اینکه دو تا شرط را نمی تونم چطوری ایجاد کنم؟ تک تک ایجاد می کنم یکیش کار می کنه یا خطا می ده.
اینم قسمتی از برنامه من”
if($selected){
$name = $_REQUEST[‘name’];
$mob = $_REQUEST[‘mob’];
$email = $_REQUEST[’email’];

$ins = “INSERT INTO $db_table (name,mob,email) VALUES (‘$name’,’$mob’,’$email’)”;
$saved=mysql_query($ins );
if($saved){
header(‘Location: thank-you.htm’);

if(!empty($_POST[’email’]))
{
$email = $_POST[’email’];
if (!preg_match(“/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i”, $email)){
$error .= “The e-mail address you entered is not valid. “;
}
} else {
$error .= “You didn’t type in an e-mail address. “;
}
require(‘class.phpmailer.php’);
$mail=new PHPMailer();
$mail->CharSet = ‘UTF-8’;
$body = ‘سلام !’;
$mail->IsSMTP();
$mail->Host = ‘smtp.gmail.com’;
$mail->SMTPSecure = ‘tls’;
$mail->Port = 587;
$mail->SMTPDebug = 1;
$mail->SMTPAuth = true;
$mail->Username = ”;
$mail->Password = ”;
$mail->From = ‘;
$mail->FromName = ”;
$mail->Subject = ‘با سلام اطلاعات شما در سایت ثبت گردید.’;
$mail->MsgHTML($body);
$mail->AddAddress($email, $name);

if($mail->Send())
echo ‘ایمیل ارسال شد !’;
else
echo ‘ایمیل ارسال نشد !’;
برنامه اس ام اس را دارم. فقط شرط را نمی تونم ایجاد کنم
ممنون میشم اگر کمک بفرمایید.

کیوان علی محمدی

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

ziba

سلام گرافیک در php واسه من کار نمیکنه من از زمپ استفاده میکنم قبلا کار میکرد ولی الان نه . زمپو دوباره نصب کردم بازم نشد . تصویر به شکل یه تصویر لود نشده ظاهر میشه . گرافیکو هم با phpinfo چک کردم فعاله

سجاد دریس

چک کنید که GD نصب شده باشه.

marjan akbari

سلام روزتون بخیر
من یک سی دی آموزش درست کردم ولی بلد نیستم که باید چه جوری فیلم به صورت خودکار بالا بیاد
این برنامه رو در c# و در قسمت wpf درست کردم
خواهش میکنم راهنماییم کنید که باید دستور کد auto run رو چه جوری درست کنم
توروخدا کمکم کنید 3شنبه باید پروژم رو تحویل بدم.
ممنونم از سایتتون
اگه میشه جوابم رو به ایمیلم بدهید.

marjan akbari

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

سجاد دریس

یک فایل با نام autorun.inf ایجاد کنید و متن درونش این باشه
[AutoRun]
OPEN=autorun.exe

بجای autoran.exe هم نام فایلی که میخوایید اجرا بشه رو بنویسید، برای راحتی کارتون هم میتونید از نرم افزاریی که در این زمینه وجود داره استفاده کنید

لینک 1 و لینک 2

کیوان علی محمدی

سلام؛سی دی های autorun یه فایل information دارن که اطلاعات فایل اجرا شونده و هم چنین آیکن اون در داخل اون فایل قرار میگیره.شبیه کد پایین.

[autorun]
open=file.exe

ats

کیوان جان میشه آیدیتون رو بدین؟
در مورد PHP چندین سوال بی چواب دارم واسه طراحی اسکریپ

اگه کمکم کنید ممنون میشم 😉

کیوان علی محمدی

سلام دوست عزیز،پیشنهاد میکنم در انجمن مطرح کنید.

آرتا

سلام خسته نباشید
میشه کد قسمت رفرش کپچا رو هم بذارین بدون اینکه صفحه لود شه کد رو عوض کنه
ممنون از زحمات شما

وحید صالحی

دوست عزیز سوال و در خواستت رو در انجمن مطرح کنید…

کیوان علی محمدی

اکبر آقا شما فکر کنم با همه مطالب ما مشکل داشته باشی دادا 🙂 کدها رو دان کنید و طبق اون عمل کنید،قبلا تست شده و کاملا کار میکنه.

اکبر قره باغی

آقا کیوان من این کار رو انجام میدم ولی نمیشه!!!!!
خیلی عجیبه!

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل