تولید تصویر درهم در صفحات لاگین

kerberos2023

عضو جدید
سلام دوستان
توی بسیاری از سایتها هنگام ورود اطلاعات لاگین یه فیلد اضافی هم هست که از حروف و اعداد تشکیل شده! مثل همین سایت (برای اثبات اینکه شما انسان هستید و نه ماشین)
توی گوگل و یاهو بسیار خفنه و به سختی میشه تشخیص داد که متن چیه
چطوری میشه این کار رو با استفاده از C# در ASP.NET انجام داد؟
مثل شکل زیر
Capture.JPG
 
آخرین ویرایش:

kerberos2023

عضو جدید
ممنون به خاطر جوابتون
ولی اگه نخایم از این امکانات گوگل استفاده کنیم و خودمون این کارو انجام بدیم (مثل خیلی از سایتای دیگه ) چه باید کرد؟
 

wolfish

عضو جدید
دوست عزیر مراحل زیر رو انجام بده خودت متوجه چگونگی روند کار میشوی ، اگر سوالی بود باز در خدمتم
ابتدا پروژه جدیدی ایجاد می کنیم ، سپس با استفاده از گزینه ی Add New Item ... ، یک Generic Handler به نام Security Code.ashx ایجاد می نماییم.
سپس توابع زیر را اضافه می نماییم :


private Bitmap GenerateImage(string text, int width, int height, string fontFamily)
{
Random random = new Random();

// Create a new 32-bit bitmap image.
Bitmap bitmap = new Bitmap(width, height, PixelFormat.Format32bppArgb);

// Create a graphics object for drawing.
Graphics g = Graphics.FromImage(bitmap);
g.SmoothingMode = SmoothingMode.AntiAlias;
Rectangle rect = new Rectangle(0, 0, width, height);

// Fill in the background.
HatchBrush hatchBrush = new HatchBrush(HatchStyle.Wave, Color.LightGray, Color.White);
g.FillRectangle(hatchBrush, rect);

// Set up the text font.
SizeF size;
float fontSize = rect.Height + 1;
Font font;
StringFormat format = new StringFormat();
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;

// Adjust the font size until the text fits within the image.
do
{
fontSize--;
font = new Font(fontFamily, fontSize, FontStyle.Bold);
size = g.MeasureString(text, font, new SizeF(width, height), format);
} while (
size.Width > rect.Width);

// Create a path using the text and warp it randomly.
GraphicsPath path = new GraphicsPath();
path.AddString(text, font.FontFamily, (int)font.Style, font.Size, rect, format);
float v = 4F;
PointF[] points =
{
new
PointF(random.Next(rect.Width) / v, random.Next(rect.Height) / v),
new
PointF(rect.Width - random.Next(rect.Width) / v, random.Next(rect.Height) / v),
new
PointF(random.Next(rect.Width) / v, rect.Height - random.Next(rect.Height) / v),
new
PointF(rect.Width - random.Next(rect.Width) / v, rect.Height - random.Next(rect.Height) / v)
};
Matrix matrix = new Matrix();
matrix.Translate(0F, 0F);
path.Warp(points, rect, matrix, WarpMode.Perspective, 0F);

// Draw the text.
hatchBrush = new HatchBrush(HatchStyle.DashedUpwardDiagonal, Color.DarkGray, Color.Black);
g.FillPath(hatchBrush, path);

// Add some random noise.
int m = Math.Max(rect.Width, rect.Height);
for (
int i = 0; i < (int)(rect.Width * rect.Height / 30F); i++)
{
int x = random.Next(rect.Width);
int y = random.Next(rect.Height);
int w = random.Next(m / 50);
int h = random.Next(m / 50);
g.FillEllipse(hatchBrush, x, y, w, h);
}

// Clean up.
font.Dispose();
hatchBrush.Dispose();
g.Dispose();

return
bitmap;
}



توضیح تابع GenerateImage :
در این تابع عکس را به صورت Run Time ایجاد می نماییم .
در ابتدا با استفاده از دستور ات بالا عکس را ایجاد کرده ، در پس زمینه آن خط ها ، مربع هایی را ایجاد می کنیم ، سایز ، نوع قلم نگارش را انتخاب می کنیم ، تصاویری برای Noise های موجود بر تصاویر به صورت تصادفی ایجاد می نماییم .


جال نیاز به تابعی داریم برای ایجاد رشته ای که می خواهیم کاربر وارد نماید ، این عبارت می بایست Random باشد و هر دفعه عبارتی متفاوت با قبل باشد :



private string generateRandomString(int size)
{
StringBuilder builder = new StringBuilder();
Random random = new Random();
char ch;
for (
int i = 0; i < size; i++)
{
ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));
builder.Append(ch);
}
return
builder.ToString();
}



این تایع این کار را برای ما انجام می دهد .

و نهایتا تابع اصلی که از این توابع استفاده می نماید و عکس را ایجاد می کند :



public void ProcessRequest(HttpContext context)
{
if(
context.Session["SecurityCode"] == null)
{
context.Session["SecurityCode"] = generateRandomString(4).ToUpper();
}

GenerateImage(context.Session["SecurityCode"].ToString(), 100, 20, "Arial").Save(context.Response.OutputStream, ImageFormat.Jpeg);
}



این تابع با استفاده از دستور Save ی که استفاده نموده است عکس ایجاد شده را به محلی که فراخوانی نموده است ارسال می کند .
نکته : می بایست Namespace های زیر را در صفحه تان اضافه نمایید.



using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.SessionState;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Text;



حال کار تمام شده است ، شما می توانید این عکس را در صفحه تان ایجاد نمایید :
کافی است در صفحه aspx تان یک image اضافه نمایید و از Properties آن خاصیت ImageURL را نام صفحه ی ashx تان قرار دهید :
ImageURL = Security Code.ashx


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

جایی که می خواهید این عکس باشد (در HTML) :



<img height="30" alt="Please Enter This To TextBox"
src="securityImage.aspx" width="80">


خوب حالا باید کد securityImage.aspx رو بنویسیم :



public class securityimage : System.Web.UI.Page
{
private
void Page_Load(object sender, System.EventArgs e)
{
Bitmap objBMP =new System.Drawing.Bitmap(60,20);
Graphics objGraphics = System.Drawing.Graphics.FromImage(objBMP);
objGraphics.Clear(Color.Green);
objGraphics.TextRenderingHint = TextRenderingHint.AntiAlias;
//' فونتی که میخوایم نشون داده بشه
Font objFont = new Font("Arial", 8, FontStyle.Bold);
string randomString="";
int[] myIntArray = new int[5] ;
int x;
//یک عبارت راندوم رو تولید میکنیم
Random autoRand = new Random();
for (
x=0;x<5;x++)
{
myIntArray[x] = System.Convert.ToInt32 (autoRand.Next(0,9));
randomString+= (myIntArray[x].ToString ());
}
//رشته تولید شده رو تو کوکی ذخیره میکنیم تا بعدا چک کنیم
Session.Add("randomString",randomString);
//' Write out the text
objGraphics.DrawString(randomString, objFont, Brushes.White, 3, 3);
//' نوع عکس رو مشخص میکنیم و درواقع بصورت هدر میفرستیم
Response.ContentType = "image/GIF";
objBMP.Save(Response.OutputStream, ImageFormat.Gif);
objFont.Dispose();
objGraphics.Dispose();
objBMP.Dispose();
}
}




خوب حالا فقط موند چک کردن عبارت پس :



private void button1_ServerClick(object sender, System.EventArgs e)
{
if (
Page.IsValid && (text1.Value.ToString () ==Session["randomString"].ToString ()))
{
// کدی که میخوایم اگه صحیح بود اجرا بشه
}
else
{
Label1.Text ="Sorry you Did not entered correct Security Code";
}
}





امیدوارم این آموزش مورد استفاده تان قرار گیرد.
 

negin17h

مدیر تالارهای مهندسی کامپیوتر و رباتیکمتخصص #C
مدیر تالار
سلام
براحتی میتونید نسخه رایگان CAPTCHA رو دانلود و از آن در وب استفاده کنید اما اگر میخواین زیبا باشه و مدل های مختلف را پشتیبانی کنه در کامپوننت های DevExpress موجود هست، Telerik رو درست خاطرم نیست :gol:
 

Similar threads

بالا