0
آموزش ایجاد تصویر امنیتی در Asp.Net MVC 5
آموزش ایجاد تصویر امنیتی در Asp.Net MVC 5
در این پست آموزش ایجاد تصویر امنیتی در Asp.Net MVC 5 را توضیح می دهیم.
در آموزش های قبلی نحوه ایجاد تصویر امنیتی در Asp.Net توضیح داده ایم. در این قسمت ما روند ایجاد یک تصویر امنیتی را در MVC 5 توضیح می دهیم و شما می توانید از این آموزش در قسمت ثبت نام سایت خود استفاده کنید.
سورس کامل این آموزش برای دانلود قرار داده شده است
برای شروع روی پوشه کنترلر راست کلیک کنید و یک کنترلر به منظور ایجاد تصویر امنیتی با نام Captcha ایجاد کنید و سپس اکشن متد زیر را در آن کنترلر ایجاد کنید و سپس کدهای زیر را به آن اضافه کنید.
public virtual ActionResult CaptchaImage(string prefix, bool noisy = true)
{
var rand = new Random((int)DateTime.Now.Ticks);
//generate new question
int a = rand.Next(1, 9);
int b = rand.Next(1, 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 MemoryStream())
using (var bmp = new Bitmap(130, 30))
using (var gfx = Graphics.FromImage((Image)bmp))
{
gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
gfx.SmoothingMode = SmoothingMode.AntiAlias;
gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));
//add noise
if (noisy)
{
int i, r, x, y;
var pen = new Pen(Color.Yellow);
for (i = 1; i < 10; i++)
{
pen.Color = 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, x - r, y - r, r, r);
}
}
//add question
gfx.DrawString(captcha, new Font("Tahoma", 15), Brushes.Gray, 2, 3);
//render as Jpeg
bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg);
img = this.File(mem.GetBuffer(), "image/Jpeg");
}
return img;
}
همان طور که مشاهده می کنید ابتدا دو عدد تصادفی تولید و در حاصل جمع آن ها در session به نام Captcha قرار داده شده در این قسمت ما جمع دو عدد را به عنوان تصویر امنیتی در نظر گرفتیم شما می توانید به جای عدد هر کارکتر دیگری تولید کنید.
برای اینکه ما می خواهیم نحوه استفاده از یک تصویر امنیتی در برنامه آشنا شویم یک کلاسی به نام Register در پوشه Models ایجاد کرده و کد های زیر را به آن اضافه کنید.
[Required(ErrorMessage = "لطفا {0} را وارد کنید")]
[Display(Name = "حاصل جمع")]
public string Captcha { get; set; }
حال روی پوشه کنترلر راست کلیک کنید و یک کنترلر به نام Home ایجاد کنید و یک اکشن متد به نام CheckCaptcha تعریف کنید و کدهای زیر را به آن اضافه کنید.
public ActionResult CheckCaptcha([Bind(Include = "Captcha")] Register register)
{
if (register.Captcha != null)
{
if (Session["Captcha"] == null || Session["Captcha"].ToString() != register.Captcha)
{
return (Content("کد امنیتی اشتباه است"));
}
else
{
return (Content("کد امنیتی صحیح است"));
}
}
else
{
return View();
}
}
در کد بالا بررسی کردیم که تصویر امنیتی صحیح است یا نه؟
سپس یک view با کلیک راست روی اکشن CheckCaptcha و سپس انتخاب Add View ایجاد کنید و سپس کدهای زیر را به آن اضافه کنید.
@model CaptchaInMVC5.Models.Register
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="center">
<form method="POST">
<table>
<tr>
<td><input type="submit" id="btn" value="بررسی" /></td>
</tr>
<tr>
<td>
@Html.LabelFor(model => model.Captcha)
<br />
@Html.EditorFor(model => model.Captcha)
</td>
</tr>
<tr>
<td><img alt="Captcha" id="imgcaptcha" src="@Url.Action("captchaimage", "Captcha")" /></td>
</tr>
<tr>
<td><input type="button" value="تصویر جدید" id="refresh" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
وظیفه این بخش، نمایش Captcha است. تگ img دارای آدرسی است که توسط اکشن متدی که در ابتدا ایجاد کردیم تولید می‌شود. این آدرس تصویر Captcha است. یک دکمه هم با آی دی refresh برای به روز رسانی مجدد تصویر در نظر گرفته‌ایم.
کد زیر به صورت Ajax تصویر جدید را نمایش می دهد توجه داشته باشید که فایل Ajax را به برنامه خود اضافه کرده باشد.
<script type="text/javascript">
$(function () {
$('#refresh').click(function () {
$.ajax({
url: '@Url.Action("CaptchaImage","Captcha")',
type: "GET",
data: null
})
.done(function (functionResult) {
$("#imgcaptcha").attr("src", "/Captcha/CaptchaImage?" + functionResult);
});
});
});
</script>
آنچه در url نوشته شده است، اصولی ترین شکل فراخوانی یک اکشن متد می باشد. این اکشن که در ابتدا تحت کنترلری به نام Captcha ایجاد کرده بودیم و خروجی آن آدرس یک فایل تصویری است. نوع ارتباط، Get است و هیچ اطلاعاتی به اکشن متد فرستاده نمیشود، اما این اکشن متد آدرسی را برمی‌گرداند که تحت نام FunctionResult آن را دریافت کرده و به کمک کد جی کوئری، مقدارش را در ویژگی src تصویر موجود در صفحه جاری جایگزین می‌کنیم. دقت کنید که برای دسترسی به تصویر، لازم است جایگزینی آدرس، در ویژگی src به شکل فوق صورت پذیرد.
همچنین می توانید با استفاده از کد زیر بدون Ajax هم تصویر جدید را نمایش دهید.
<script type="text/javascript">
$('#refresh').click(function () {
var d = new Date();
$("#imgcaptcha").attr("src", "Captcha/CaptchaImage?" + d.getTime());
});
</script>
دو مشکل در کد بالا وجو دارد:
استفاده از زمان در انتهای آدرس به خاطر مشکلاتیست که فایرفاکس یا IE با اینگونه آپدیت‌های تصویری دارند. این دو مرورگر (بر خلاف کروم) تصاویر را نگهداری میکنند و آپدیت به روش فوق به مشکل برخورد میکند مگر آنکه آدرس را به کمک اضافه کردن زمان آپدیت کنید تا مرورگر متوجه داستان شود
همانطور که میبینید آدرس تصویر در حقیقت خروجی یک اکشن است. پس نیازی نیست هر بار این اکشن را به کمک ایجکس صدا بزنیم و روش فوق در مرورگرهای مختلف جواب خواهد داد.
این مطلب را به اشتراک بگذارید...
نظر / سوال