ورود به سیستم 
 
    محتویات سایت
        برچسب های محبوب 








 
   استفاده از ReCaptcha در پروژه های ASP.NET MVC
  در این مقاله به بررسی یک پیاده سازی خوب و قابل استفاده مجدد برای کامپوننت ReCaptcha در پروژه های ASP.NET MVC می پردازیم.
   ASP.NET MVC
   ۸۱۰۹
   دانلود
   مرتضی صحراگرد
   ۱۳۹۱/۹/۱۷
نسخه قابل چاپ نسخه قابل چاپ

مقدمه:

قبلا در مقاله ای به معرفی کنترل ReCaptcha و استفاده از آن در WebForm ها پرداخته ایم. در این مقاله قصد داریم یک پیاده سازی خوب و با قابلیت استفاده مجدد در برنامه های ASP.NET MVC انجام دهیم.

همانطور که در مقاله قبلی نیز ذکر شد برای استفاده از کامپوننت ReCaptcha ابتدا باید به اینجا مراجعه نموده و سایت مورد نظر خود که قصد استفاده از این کنترل را در آن دارید، وارد نموده و کلیدهای خصوصی(Private Key)و عمومی(Public Key) تولید شده را دریافت کنید.



سپس می توانید کتابخانه ReCaptcha را از طریق Nuget و با جستجوی کلمه ReCaptcha همانند شکل زیر دریافت کنید. پس از نصب کتابخانه اسمبلی Recaptcha.dll به پروژه اضافه خواهد شد.



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

خوب اکنون همه چیز آماده جهت پیاده سازی در یک پروژه ASP.NET MVC می باشد.

شروع:

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

برای تولید اسکریپت ReCaptcha در سمت کلاینت، قصد داریم که متد تعمیم یافته (extension method) برای کلاس HtmlHelper بنویسیم که براحتی هر چه تمام تر بتوانیم با فراخوانی آن در View ها یک Captcha ایجاد کنیم.

پیاده سازی این متد را در قسمت زیر ملاحظه می کنید.

using System.IO;
using System.Web.Mvc;
using System.Web.UI;
namespace RecaptchaMvcExample
{
    public static class HtmlExtensions
    {
        public static MvcHtmlString GenerateCaptcha(this HtmlHelper helper)
        {
            var captchaControl = new Recaptcha.RecaptchaControl
            {
                ID = "recaptcha",
                Theme = "blackglass",
                PublicKey = "6LeV88ASAAAAANP_CUoCJduADzUMWP3BDMfuObzi",
                PrivateKey = "6LeV88ASAAAAAC0YQDlnqnIzZPIvx-8wWD1kUtqo"
            };

            var htmlWriter = new HtmlTextWriter(new StringWriter());

            captchaControl.RenderControl(htmlWriter);

            return new MvcHtmlString(htmlWriter.InnerWriter.ToString());

        }
    }
}

عملکرد متد GenerateCaptcha کاملا شفاف می باشد. ابتدا یک شیء از نوع کلاس RecaptchaControl ایجاد نموده و کلید خصوصی و عمومی را که قبلا دریافت کرده ایم را در اینجا مورد استفاده قرار داده ایم. خصوصیت Theme جهت تعیین مشخصات ظاهری این کنترل استفاده می گردد. در حال حاضر کنترل ReCaptcha دارای 4 نوع تم در رنگ های متفاوت می باشد که نمایش این 4 تم را در شکل زیر مشاهده می کنید.

 


در نهایت کدهای HTML تولید شده را به صورت یک رشته جهت نمایش در سمت کلاینت برگردانده ایم. دقت کنید که خروجی این متد از نوع MvcHtmlString می باشد زیرا می خواهیم که رشته خروجی بدون Encode شدن و به شکل HTML خام مورد استفاده قرار گیرد.

اکنون نحوه استفاده از این متد را ملا حظه می کنید.

@using RecaptchaMvcExample
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    @using (Html.BeginForm(actionName: "Index", controllerName: "Home"))
    {
        <h2>
            @ViewBag.ValidationResult
        </h2>

        <label>
            Fisrt Name:
        </label>
        <input name="firstName" type="text" /><br />
        
        <label>
            Last Name:
        </label>
        <input name="lastName" type="text" />
        
        <input type="submit" value="submit" />
        
        @Html.GenerateCaptcha()
    }
</body>
</html>

با توجه به اینکه متد GenerateCaptcha از نوع تعمیم یافته (extension method) می باشد، در ابتدای صفحه فضای نامی کلاس را وارد نموده ایم. بدیهی است که در صورتی که می خواهید به این متد در تمامی View ها دسترسی داشته باشید، کافیست که این فضای نامی را در فایل Web.config (در ریشه پوشه Views) وارد نمایید.

سپس یک فرم ساده شامل نام و نام خانوادگی و یک دکمه جهت ارسال داده ها به سمت سرور ایجاد نموده ایم. در انتها براحتی با فراخوانی Html.GenerateCaptcha درخواست تولید ReCaptcha را صادر نموده ایم. ضمنا ViewBag.ValidationResult قرار است نتیجه اعتبار سنجی انجام شده در سمت سرور را نمایش دهد.

اکنون برنامه رو اجرا نموده و خروجی صفحه را مشاهده می کنیم.



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



قسمت جالب شکل بالا برای ما اینجاست که کنترل ReCaptcha دو کنترل از نوع textarea به نام های recaptcha_challenge_field و  recaptcha_response_field ایجاد نموده است. محتویات این دو کنترل جهت اعتبار سنجی متن ورودی کاربر در سمت سرور مورد نیاز است.

قصد داریم یک ActionFilterAttribute جهت اعتبار سنجی کنترل ReCaptcha بنویسیم . به پیاده سازی کلاس CaptchaValidatorAttribute در قسمت زیر توجه کنید.

public class CaptchaValidatorAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        bool valid = false;

        var captchaChallengeValue = filterContext.HttpContext.Request.Form["recaptcha_challenge_field"];
        var captchaResponseValue = filterContext.HttpContext.Request.Form["recaptcha_response_field"];

        if (!string.IsNullOrEmpty(captchaChallengeValue) && !string.IsNullOrEmpty(captchaResponseValue))
        {
               
                //validate captcha
                var captchaValidtor = new Recaptcha.RecaptchaValidator
                {
                    PrivateKey = "6LeV88ASAAAAAC0YQDlnqnIzZPIvx-8wWD1kUtqo",
                    RemoteIP = filterContext.HttpContext.Request.UserHostAddress,
                    Challenge = captchaChallengeValue,
                    Response = captchaResponseValue
                };

                var recaptchaResponse = captchaValidtor.Validate();
                valid = recaptchaResponse.IsValid;
               
        }

        //this will inject the result value into a parameter in our Action  
        filterContext.ActionParameters["captchaValid"] = valid;

        base.OnActionExecuting(filterContext);
    }
}

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

 قسمت جالب قطعه کد بالا تزریق نتیجه اعتبار سنجی در پارامتری به نام captchaValid به اکشنی می باشد که این Attribute به آن اعمال شده است، می باشد. قبلا در مقاله ای به آموزش نحوه تزیق متغیر ها به یک اکشن پرداخته ایم. اکنون تنها کافیست که این Attribute را به اکشن مورد نظر خود که قصد داریم در آن از نتیجه اعتبار سنجی ReCaptcha مطلع گردیم اعمال نموده و متغیر captchaValid را نیز به پارامتر های آن اضافه کنیم .در این صورت مقدار این متغیر به شکل اتوماتیک توسط کلاس CaptchaValidatorAttribute تعیین می گردد.

در قسمت زیر یک نمونه اکشن برای انجام اعتبار سنجی مشاهده می کنید.

[HttpPost]
[CaptchaValidator]
public ActionResult Index(string fistName, string lastName, bool captchaValid)
{
    if (captchaValid)
        ViewBag.ValidationResult = "Captcha is Valid";
    else
        ViewBag.ValidationResult = "Captcha is Invalid";
                
    return View();
}

همانطور که ملاحظه می کنید، از این پس تنها کافیست که CaptchaValidatorAttribute را به اکشن مورد نظر خود اعمال نموده و پارامتر captchaValid را نیز به آن اضافه کنیم و عمل اعتبار سنجی به شکل خودکار انجام خواهد شد.

قطعه کد انجام شده در این مقاله از طریق لینک بالای صفحه قابل دریافت می باشد.

برچسب های مرتبط