ورود / ثبت نام
0
0

آموزش ساخت Captcha در ASP.NET با استفاده از jQuery و s3capcha

579 بازدید
Captcha در ASP.NET

Captcha در ASP.NET

S3capchaیک Captcha مفید و آسان است که فایل های تصویری تولید نمی کند. به عنوان یک jQuery plug-in ساخته میشود اما نویسنده از PHP برای کدزنی آن استفاده کرده است. متوجه شدم که تبدیل کد های آن به C# و ASP.Net کار آسانی است. کد PHP بسیار ساده است اما پیکربندی های درون خطی سبک OOP خوبی نیست. من ساختاری ایجاد کرده ام که پیکربندی و استفاده از آن در برنامه آسان است.

از آنجایی که هیچ تصویری تولید نمیکند , S3capcha بارگذاری کمتری بر روی سرور در زمان ساخت Captcha انجام میدهد و همچنین میتوانیم از این Captcha برای فرم های AJAX و MVC هم استفاده کنیم. پس برای ایجاد Captcha در ASP.NET با من در این مقاله همراه باشید …

S3capcha چگونه کار میکند ؟

S3capcha از مدل ساده ای برای تولید Captcha استفاده میکند :

Captcha در ASP.NET

۱ شاخص تصویر را تصادفی میکند.

۲ اعداد تصادفی را به هر شاخص تصویر اختصاص میدهد.

۳ یک شاخص تصادفی از لیست انتخاب میکند.

۴ شماره ی تصویر را در Session قرار میدهد و لیستی از تصاویر را به عنوان radio box به کاربر ارسال میکند; هر radio یک شماره تصویر به عنوان مقدار دارد.

۵ اگر کاربران شماره ی متناسب با مقدار Session را انتخاب کنند , معتبر شناخته میشود.

S3capcha از jQuery برای تبدیل radio box به یک تصویر لیستی قابل کلیک استفاده میکند.

استفاده از کد

کلاس s3capcha سه متد دارد که همه ی آنها از نوع static هستند. برای جلوگیری از استفاده از حافظه ی سرور به منظور پیکربندی , من همه ی پیکربندی ها را متغیر هایی Static قرار داده ام تا بتوانم از آن ها دوباره استفاده کنم.

اولین متد که Shuffle نام دارد , آرایه ی شاخص ها را تصادفی میکند و نتیجه را بازمیگرداند.

public static List<int> shuffle(List<int> input)
{
    List<int> output = new List<int>();
    Random rnd = new Random();

    int FIndex;
    while (input.Count > 0)
    {
        FIndex = rnd.Next(0, input.Count);
        output.Add(input[FIndex]);
        input.RemoveAt(FIndex);
    }

    input.Clear();
    input = null;
    rnd = null;

    return output;
}

 

این تابع لیست شاخص های ورودی را دریافت میکند و ترتیب آنها را تصادفی میکند و نتیجه را بازمیگرداند. میتوانید با تغییر دادن این کد از آن برای تصادفی کردن هر لیستی استفاده کنید.

تعدادی پیکربندی باید پیش از اجرای Captcha برقرار شود. نسخه ی اورجینال s3capcha از دو theme برای تصاویر پشتیبانی میکند و ما باید بدانیم که از چه Theme ای در حال استفاده هستیم. یک فایل XML وجود دارد که برای پیکربندی Captcha استفاده۸ میشود (در فولدر s3capcha):

<?xml version="1.0" encoding="utf-8" ?>
<s3capcha>
<icons>
<name>apple,cherry,lemon,pear,strawberry</name>
<title>Apple,Cherry,Lemon,Pear,Strawberry</title>
<width>33</width>
<height>33</height>
<ext>jpg</ext>
<folder>fruit</folder>
</icons>
<message>Verify that you are a human not robot, please choose {0}</message>
</s3capcha>

 

میتوانید همه ی رشته های Captcha را تغییر دهید و هیچ رشته ای با کد مشکل وجود ندارد.

تگ name شامل نام تصویر که از فولدری به خصوص نشان داده خواهد شد , است. تگ title برای ترجمه ی تصاویر استفاده میشود. اگر از زبان انگلیسی استفاده میکنید میتوانید از مقدار تگ name استفاده کنید در غیر این صورت نام هر تصویر به زبان خودتان را در این تگ قرار دهید.

اطلاعات بیشتری از تصاویر مانند عرض و طول و همچنین انقضای تصویر و نام فولدر نیز وجود دارد. نام فولدر باید در فولدر icons در s3capcha وجود داشته باشد.

آخرین پیکربندی تگ message میباشد. میتوانید در صورت نیاز به ترجمه یا تغییر متنی که در مرورگر کاربر نشان داده میشود آن را تغییر دهید. علامت {۰} را حذف کنید. این مورد توسط نام تصویری که کاربر باید انتخاب کند جایگزین خواهد شد.

اگر نمیخواهید که از یک فایل XML استفاده کنید , میتوانید از هر متدی برای بارگذاری پیکربندی استفاده کنید. به عنوان مثال میتوانید مقادیر را در web.config به عنوان متغیر های برنامه قرار دهید.تنها متد private با نام LoadConfig را که برای بارگذاری پیکربندی اجرا میشود تغییر دهید. کد پیش فرض فایل XML را بارگذاری میکند:

private static bool LoadConfig()
{
    string FilePath = "~/s3capcha/config.xml";
    FilePath = HttpContext.Current.Server.MapPath(FilePath);
    if (System.IO.File.Exists(FilePath))
    {
        XmlDocument doc = new XmlDocument();
        doc.Load(FilePath);
        string BaseNode = "/s3capcha/icons/";

    XmlNode node = doc.SelectSingleNode(BaseNode + "name");
    IconNames = node.InnerText.Split(new char[] { ',' });

    node = doc.SelectSingleNode(BaseNode + "title");
    IconTitles = node.InnerText.Split(new char[] { ',' });
    ....

 

اگر پیکربندی بارگذاری شده باشد , تابع باید مقدار true و درغیر اینصورت مقدار false را بازگرداند.

متد دوم GetHtmlCodes است که کد HTML را برای Captcha رندر میکند. این از پیکربندی استفاده میکند ; اگر پیکربندی وجود نداشته باشد خطا برمیگرداند:

public static string GetHtmlCodes(string PathTo, out int SessionValue)
{
    bool HasValue = false;
    if (string.IsNullOrEmpty(Message))
        HasValue = LoadConfig();
    else
        HasValue = true;

    if (HasValue)
    {
        Random Rnd = new Random();
        int RandomIndex = Rnd.Next(0,IconNames.Length);

        List<int> values = new List<int>();
        for(int i = 0; i < IconNames.Length;i++)
        values.Add(i);
        values = shuffle(values);

        string WriteThis = "<div class=\"s3capcha\"><p>" + 
        string.Format(Message, "<strong>" + IconTitles[values[RandomIndex]] + 
                      "</strong>") + "</p>";

        int[] RandomValues = new int[IconNames.Length];
        for (int i = 0; i < IconNames.Length; i++)
        {
            RandomValues[i] = Rnd.Next();
            WriteThis += string.Format(RowTemplate,
                IconTitles[values[i]],     RandomValues[i],
                PathTo + "/icons/" + Folder + "/" + 
                IconNames[values[i]] + "." + Extention,
                Width, Height);
        }
        WriteThis += "<div style=\"clear:left\"></div></div>";
        SessionValue = RandomValues[RandomIndex];
        return WriteThis;
    }
    else
    {
        SessionValue = -1;
        return "Invalid data, config file not found";
    }
}

 

PathTo موقعیت فولدر s3capcha میباشد. و مقدار out چیزی است که شما باید در Session در قرار دهید.

تمام کد های سمت سرور تمام شد و میتوانیم از فایل s3capcha استفاده کنیم. اگر نیاز به استفاده از Captcha در یک صفحه داریم باید این دو فایل JS را وارد کنیم : مرجعی برای jquery.js که میتواند از وب سایت jQuery دانلود شود و s3capcha.js .

دو متد میتواند استفاده شود : AJAX و Web Forms.

استفاده در ASP.NET Web Forms

برای استفاده در Web Form ها من یک کنترل کاربر در فولدر s3capcha ساختم که میتواند به یک صفحه منتقل شود و سپس میتوانیم از خصوصیت IsValid برای معتبرسازی فرم استفاده کنیم.

کد html مربوط به s3capcha.ascx :

<!-- html codes -->
<script language="javascript" type="text/javascript" 
src="<%=ResolveClientUrl("~/s3capcha/s3Capcha.js")%>"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {$('#capcha').s3Capcha();});
</script>
<div id="capcha">
<asp:Literal ID="CapchaHTML" runat="server"></asp:Literal>
</div>

 

من مرجعی به s3capcha.js اضافه کردم اما برای مشکل آدرس دهی من از ResolveClinetUrl که تغییر میدهد و آدرس های مرتبط را برمیگرداند.

کنترل Literal شامل کد HTML خواهد بود . این هم از قسمت Code Behind مربوط به s3capcha.ascx.

public void SetIt()
{
    int USessionId;
    CapchaHTML.Text = 
    s3capcha.GetHtmlCodes(ResolveClientUrl("~/s3capcha"),
    out USessionId);
    Session[s3capcha.s3name] = USessionId;
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        SetIt();
}

public bool IsValid
{
    get
    {
        bool res = s3capcha.Verify(Session[s3capcha.s3name], 
        Request.Form[s3capcha.s3name]);
        SetIt();
        return res;
    }
}

 

SetIt کد HTML را میگیرد و مقدار Session را تنظیم میکند. IsValid از متد helper برای معتبرسازی کلاس s3capcha استفاده میکند که تنها مقادیر ارسالی و مقدار Session را تست و مقایسه میکند.

یک صفحه ی Web Form همانند default.aspx بسازید و s3capcha.ascx را درون آن بیاندازید و در تابع دکمه postback از IsValid برای معتبرسازی گزینه کاربر استفاده کنید.

استفاده درAJAX Forms

برای AJAX به دو صفحه ی ASP.NET نیاز داریم. یک صفحه برای دریافت محتوای HTML و دیگری برای ثبت محتوای فرم ها و معتبرسازی ورودی کاربر.

صفحه ای بنام s3capcha.ashx میسازیم که با هر درخواست , محتوای HTML مربوط به captcha را برمیگرداند و همچنین مقدار Session را تنظیم میکند :

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/html";

    int USession;
    context.Response.Write(s3capcha.GetHtmlCodes("../../s3capcha", out USession));
    context.Session[s3capcha.s3name] = USession;

    context.Response.End();

 

یکی دیگر از Generic Handle ها verify.ashx است که از خصوصیت IsValid کنترل کاربرمان استفاده میکند :

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";

    if (s3capcha.Verify(context.Session[s3capcha.s3name], 
                      context.Request.Form[s3capcha.s3name]))
        context.Response.Write("Success");
    else
        context.Response.Write("Fail");

    context.Response.End();
}

 

از آنجایی که که handler از مقادیر Session استفاده میکند احتیاج داریم که از رابط IRequiresSessionState ارث بری کنیم.

در صفحه ی کاربر به یک مکانی برای Captcha بر روی فرم خودمان نیاز داریم. با یک درخواست AJAX نتیجه را از s3capcha.ashx دریافت میکنیم و به این مکان اضافه میکنیم.

صفحه ی نمونه ی من شامل (محتوای HTML):

<!-- HTML Codes -->
<form id="form1" action="verify.ashx" method="post">
<div id="capcha"></div>
<p><input type="submit" value="submit" /></p>
</form>

 

فرم های من از یک تگ DIV برای قرار دادن محتوای Captcha استفاده میکند. برای کد های JavaScript :

//Javascript codes
var getCapcha = function() {
$.ajax({
url: 's3capcha.ashx',
cache: false,
success: function(data) {
$('#capcha').html(data).s3Capcha();
}
});
};
getCaptcha از یک AJAX برای دریافت درخواست استفاده میکند. همچنین از آنجاییکه پارامتر های jQuery cache در IE کار میکند باید آنها را غیرفعال کنیم.
اکنون فرم های ما کار میکنند اما اگر بخواهید که از طریق AJAX ثبت کنید میتوانید از jQuery forms plug-in ها استفاده کنید. در اینجا من یک تابع ثبت ساده برای این فرم ساخته ام :
//Javascript codes
$(document).ready(function() {
getCapcha();
$("form").bind('submit', function() {
$.ajax({
url: 'verify.ashx',
type: 'POST',
data: { 's3capcha': $("input[name=s3capcha]:checked").val() },
cache: false,
success: function(data) {
alert(data);
getCapcha();
}
});
return false;
});
});

 

بخش داده ها و چیزی که من به سرور فرستاده ام را ببینید. زمانی که من محتوای captcha را رندر میکنم یک ورودی radio با نم s3capcha ساخته میشود. مقدار شئ انتخاب شده را دریافت کرده و آن را به verify.ashx میفرستم و نتیجه را میگیرم. میتوانید در صورت نیاز از متد های خودتان نیز استفاده کنید.

لطفا نظرات و پیشنهادات خودتان را با من در میان بگذارید.

با تشکر

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14440
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد آموزش ساخت Captcha در ASP.NET با استفاده از jQuery و s3capcha

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.