تبلیغات
گروه نرم افزاری باران - آموزش ساخت Captcha در ASP.net MVC 4

آموزش ساخت Captcha در ASP.net MVC 4

آموزش ساخت Captcha در ASP.net MVC 4

کپچا یا Captcha چیست؟

کپچا یا Captcha که به نام «آزمون همگانی کاملا خودکارشدهٔ تورینگ برای مجزا کردن انسان و رایانه» می‌باشد، یک سامانهٔ امنیتی و روند ارزیابی است که برای جلوگیری از برخی حمله‌های خرابکارانهٔ ربات‌های اینترنتی به ‌کار می‌رود.

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

دانشگاه کارنگی ملون که تحقیقات زیادی در زمینه کپچا انجام داد، درخواست نمود تا واژه کپچا به نام آن شرکت ثبت شود اما درخواستش پذیرفته نشد.

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

آموزش ساخت Captcha در ASP.net MVC به وسیله 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 >


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

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


طبقه بندی: فناوری و تکنولوژی، نرم افزار، مقالات، آموزشی، برنامه نویسی،
برچسب ها: آموزش ساخت Captcha، ASP.net، MVC 4، آموزش ساخت Captcha در ASP.net MVC 4، انجام پروژه های برنامه نویسی، مهندس کوچکی، مهندس مومنی،

تاریخ : یکشنبه 29 شهریور 1394 | 11:33 بعد از ظهر | نویسنده : مهندس مؤمنی | نظرات

  • paper | فروش بک لینک | بک لینک
  • ابزار هدایت به بالای صفحه