آموزش ایجاد تصویر امنیتی در Asp.Net MVC 5
0 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 با اینگونه آپدیت‌های تصویری دارند. این دو مرورگر (بر خلاف کروم) تصاویر را نگهداری میکنند و آپدیت به روش فوق به مشکل برخورد میکند مگر آنکه آدرس را به کمک اضافه کردن زمان آپدیت کنید تا مرورگر متوجه داستان شود

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

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۱ دی ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم