Captcha در ASP.net MVC 4

Captcha در ASP.net MVC 4

کپچا Captcha چیست؟

قبل از اینکه سراغ ساخت Captcha در ASP.net MVC 4 برویم اول بینیم Captcha کپچا چیست؟

سیستمی برای تشخیص انسان از انواع ربات. کپچا که به نام «آزمون همگانی کاملا خودکارشدهٔ تورینگ برای مجزا کردن انسان و رایانه» می‌باشد، یک سامانهٔ امنیتی و روند ارزیابی است که برای جلوگیری از برخی حمله‌های خرابکارانهٔ ربات‌های اینترنتی به ‌کار می‌رود و با یک تست ساده مثل نمایش تصویر ۲+۲ که فقط برای انسان قابل خواندن است نتیجه را سوال می کند تا مطئن شود یک ربات در حال بازدید از صفحه نیست. این روند می‌تواند مشخص کند که مراجعه کنندگان به یک وب گاه و یا سایر خدمات آنلاین انسان هستند یا کامپیوتر ، بدین منظور برنامهٔ کپچا آزمون‌هایی را تولید می‌کند که تنها انسان‌ها قادر به پاسخ‌گویی به آنها باشند، چون کامپیوترها و نرم‌افزارهای فعلی نمی‌توانند پاسخ درستی به این آزمون بدهند، هر کاربری که آنرا درست حل کند، انسان فرض می‌شود.
دانشگاه کارنگی ملون که تحقیقات زیادی در زمینه کپچا انجام داد، درخواست نمود تا واژه کپچا به را ثبت کند اما درخواستش پذیرفته نشد.

چرا بعضی کپچا ها خیلی سخت هستند؟

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

تا کنون احتمالاً با تصاویری از حروف و اعداد که عمداً کج و ناواضح رسم شده‌اند در وب‌گاه‌های مختلف برخورد کرده‌اید و از شما خواسته شده تا آنرا به شکل صحیح خوانده و با دقت در یک جعبهٔ متن وارد کنید. اگر چنین است شما با یک کپچا سر و کار داشته‌اید. کپچا گاهی «معکوس تست تورینگ» نامیده می‌شود. چون تست تورینگ توسط انسان برگزار می‌شود و هدفش تشخیص ماشین است اما کپچا توسط ماشین برگزار می‌شود و هدفش تشخیص انسان است.

 

آموزش ساخت Captcha در ASP.net MVC 4 به وسیله Ajax و JQuery :

برنامه Visual Studio را باز کنید و یک پروژه جدید ASP.net MVC4 ایجاد کنیدکنتلری به نام Home ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:

public ActionResult Index()
{
return View();
}

public ActionResult Go()
{
return (RedirectToAction( ” Index ” , ” Captcha ” ));
}

 

اکشن Go ، اکشنی است که به وسیله یک Action Link که در View قرار خواهد گرفت استفاده می شود تا شما را به صفحه کپچا راهنمایی کند.

ایجاد صفحه View برای اکشن Index:
با کلیک سمت راست موس بر روی اکشن Index یک صفحه View برای آن ایجاد کنید و قطعه کد زیر را در آن وارد نمایید

< h1 style= ” text-align:center ” >
@Html.ActionLink( ” ورود به صفحه کد Captcha ” , ” Index ” , ” Captcha ” )
< /h1 >

کار با کنترلر Home تمام است اکنون وقت ایجاد کنترلر Captcha است.

ایجاد کنترلر Captcha:
کنترلری به نام Captcha بسازید اکشنی به نام CaptchaImage بسازید و کد زیر در آن کپی نمایید
( توجه: اکشن دو پارمتر ورودی به نام های string prefix, bool noisy = true دریافت خواهد کرد )

public ActionResult CaptchaImage(string prefix, bool noisy = true)
{
var rand = new Random((int)DateTime.Now.Ticks);

//generate new question
int a = rand.Next(10, 99);
int b = rand.Next(0, 9);
var captcha = string.Format( ” {0} + {1} = ? ” , a, b);

//store answer
Session[ ” Captcha ” + prefix] = a + b;

//image stream
FileContentResult img = null;

using (var mem = new System.IO.MemoryStream())
using (var bmp = new System.Drawing.Bitmap(130, 30))
using (var gfx = System.Drawing.Graphics.FromImage((System.Drawing.Image)bmp))
{
gfx.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
gfx.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
gfx.FillRectangle(System.Drawing.Brushes.White, new System.Drawing.Rectangle(0, 0, bmp.Width, bmp.Height));

//add noise
if (noisy)
{
int i, r, x, y;
var pen = new System.Drawing.Pen(System.Drawing.Color.Yellow);
for (i = 1; i < 10; i++)
{
pen.Color = System.Drawing.Color.FromArgb(
(rand.Next(0, 255)),
(rand.Next(0, 255)),
(rand.Next(0, 255)));

r = rand.Next(0, (130 / 3));
x = rand.Next(0, 130);
y = rand.Next(0, 30);

gfx.DrawEllipse(pen, (float)x, (float)y, (float)r, (float)r);
}
}

//add question
gfx.DrawString(captcha, new System.Drawing.Font( ” Tahoma ” , 15), System.Drawing.Brushes.Gray, 2, 3);

//render as Jpeg
bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg);
img = this.File(mem.GetBuffer(), ” image/Jpeg ” );
}

return img;
}

اکنون باید اکشن دیگری به نام Index از نوع Post بسازیم ، دلیل این کار به علت استفاده Ajax از این متد برای سنجش درستی Captcha است.

ساخت اکشن Index به روش POST:

اکشنی به نام Index با مشخصه Post مانند کد زیر ایجاد کنید:

[HttpPost]
public ActionResult Index(Models.Models model)
{

if (Session[ ” Captcha ” ] == null || Session[ ” Captcha ” ].ToString() != model.Captcha)
{

return (Json(new { Message = ” خطا!! لطفا دوباره سعی کنید ” }, System.Web.Mvc.JsonRequestBehavior.AllowGet));
}

string strMessage = string.Format( ” تبریک!! عدد ورودی شما {0} بود و صحیح می باشد ” , model.Captcha);

return (Json(new { Message = strMessage }, System.Web.Mvc.JsonRequestBehavior.AllowGet));
}

 

اکشن مربوطه به روش Ajax به وسیله model binding مقدار captcha را به اکشن انتقال می دهد در ادامه کد مربوط به view را مشاهده خواهید کرد.

ساخت صفحه View برای کنترلر Captcha:
بر روی اکشن Index کلیک راست کنید و صفحه View برای آن ایجاد کنید

الصادق JQuery به صفحه View:

به دلیل استفاده برنامه از Ajax ، فراخانی اکشن را به وسیله Ajax از نوع JQuery انجام می دهیم

< script src= ” @Url.Content( ” ~/Scripts/jquery-1.9.1.js ” ) ” > < /script >

توجه: فرض شده است سند JQuery داخل پوشه Scripts مجود می باشد

قطعه کد زیر را به صفحه View اضافه کنید:

< script >
$(function () {
$( ” #btnCheck ” ).click(function () {

$( ” .loader ” ).fadeIn( ” slow ” );

var varCaptcha = $( ” #Captcha ” ).val();

var oData =
” {‘Captcha’: ‘ ” + varCaptcha + ” ‘} ” ;

$( ” #btnCheck ” ).hide();

$.ajax({
type: ” POST ” ,
url: ” /Captcha/Index ” ,
dataType: ” json ” ,
data: oData,
contentType: ” application/json; charset=utf-8 ” ,

success: function (msg) {
$( ” #divMessage ” ).text(msg.Message);
$( ” #btnCheck ” ).show();
},

error: function (msg) {
$( ” #divMessage ” ).text( ” Error! ” );
$( ” #btnCheck ” ).show();
}
});
$( ” .loader ” ).fadeOut( ” slow ” );

});
});
< /script >

قطعه کد HTML را به صفحه View اضافه کنید:

< section id= ” captcha ” >

< div class= ” page-wrapper ” >

< div class= ” item-wrapper ” >

< div class= ” lables ” >
@Html.LabelFor(model = > model.Captcha)
< /div >

< div class= ” captchaImage ” >

< a href= ” @Url.Action( ” Index ” ) ” >
< img alt= ” Captcha ” src= ” @Url.Action( ” CaptchaImage ” ) ” title= ” بر روی تصویر کلیک کنید تا تصویر تغییر کند ” / >
< /a >

< /div >

< div class= ” controller ” >
@* id=Captcha *@
@Html.EditorFor(model = > model.Captcha)
@Html.ValidationMessageFor(model = > model.Captcha)
< /div >

< div class= ” button ” >
< input type= ” button ” name= ” btnCheck ” value= ” بررسی ” id= ” btnCheck ” / >
< /div >

< div class= ” loader ” >

< div >
< img src= ” @Url.Content( ” ~/Content/Images/Loader.gif ” ) ” alt= ” Loading… ” / >
< /div >

< /div >

< div id= ” divMessage ” class= ” MessageBox ” >
< /div >

< /div >

< /div >

< /section >

 

اکنون برنامه آماده استفاده است

دریافت سورس برنامه

 

هر گونه کپی برداری از این مطلب تنها با درج لینک این صفحه به عنوان منبع از وبلاگ دی تلکام بلامانع است

مطالب مرتبط:

هاست با پشتیبانی ASP.net   مدل ویو-ویو مدل MVVM     نکته های فری لنسری یا دورکاری     موارد مهم در طراحی سایت     ASP.net Web Forms