Tạo captcha đơn giản cho trang web bằng AS.NET

[nvtuantt]

Các trang web hiện nay sử dụng captcha rất phổ biến để tránh tình trạng đăng kí hoặc đăng nhập tự động (không phải do người dùng tự thao tác) một cách tràn lan. Captch thường có dạng một hình ảnh hoặc đoạn flash chứa những kí tự ngẫu nhiên được làm biến dạng nhằm gây khó khăn cho các chương trình có khả năng nhận diện kí tự.
Trong bài viết này tôi sẽ hướng dẫn tạo chức năng captcha đơn giản bằng ASP.Net với ngôn ngữ là C#. Bạn cần có các khái niệm cơ bản về ASP.Net và cách sử dụng phương thức đồ họa GDI+ trong C# để hiểu rõ được phương pháp này.


Đầu tiên bạn hãy tạo một WebSite ASP.Net, sử dụng sẵn trang Default.aspx để làm ví dụ này. Tạo các control giống như đoạn mã sau trong phần body của trang:



<div>HTML Code:
<form id=”form1″ runat=”server”>
<div>
<asp:Image ID=”imgCaptcha” runat=”server”/>
<asp:ImageButton ID=”imbReLoad” runat=”server” ImageUrl=”~/Images/ajax-arrows-green.gif”
OnClick=”imbReLoad_Click” />
<asp:TextBox runat=”Server” ID=”txtCaptcha” />
<asp:Button runat=”Server” ID=”btnSubmit” Text=”Đồng ý” OnClick=”btnSubmit_Click” />

<asp:Label ID=”lblMessage” runat=”server” ForeColor=”Red”></asp:Label></div>
</form>
</div>Giải thích công dụng các control:

- imgCaptcha: Image dùng để hiển thị hình ảnh captcha
- imbReload: ImageButton để thay đổi ảnh captcha
- txtCaptcha: TextBox để người dùng nhập chuỗi kí tự captcha
- btnSubmit: Button kiểm tra việc nhập liệu
- lblMessage: Label hiển thị thông báo sau khi người dùng nhấn nút Submit
Tiếp đến chúng ta cần tạo một phương thức để tạo ảnh captcha và hiển thị lên imgCaptcha, tôi đặt tên phương thức này là CreateCaptcha():

private void CreateCaptcha() { string[] fonts ={ “Arial Black”, “Lucida Sans Unicode”, “Comic Sans MS” }; const byte LENGTH = 5; // chuỗi để lấy các kí tự sẽ sử dụng cho captcha const string chars = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz”; using (Bitmap bmp = new Bitmap(120, 30)) { using (Graphics g = Graphics.FromImage(bmp)) { // Tạo nền cho ảnh dạng sóng HatchBrush brush = new HatchBrush(HatchStyle.Wave, Color.White,Color.Wheat); g.FillRegion(brush,g.Clip); // Lưu chuỗi captcha trong quá trình tạo StringBuilder strCaptcha = new StringBuilder(); Random rand = new Random(); for (int i = 0; i < LENGTH; i++) { // Lấy kí tự ngẫu nhiên từ mảng chars string str = chars[rand.Next(chars.Length)].ToString(); strCaptcha.Append(str); // Tạo font với tên font ngẫu nhiên chọn từ mảng fonts Font font = new Font(fonts[rand.Next(fonts.Length)], 12, FontStyle.Strikeout | FontStyle.Italic); // Lấy kích thước của kí tự SizeF size= g.MeasureString(str,font); // Vẽ kí tự đó ra ảnh tại vị trí tăng dần theo i, vị trí top ngẫu nhiên g.DrawString(str, font, Brushes.Chocolate,i*size.Width+3, rand.Next(2,10)); font.Dispose(); } // Lưu captcha vào session Session["captcha"]=strCaptcha.ToString(); // Lưu ảnh vào thư mục captcha với tên ảnh dựa theo IP string path = “Captcha/” + Request.UserHostAddress + “.gif”; bmp.Save(Server.MapPath(“”) + “/” + path, ImageFormat.Gif); imgCaptcha.ImageUrl = path; } } }

(Đối tượng kiểu HatchBrush có rất nhiều kiểu vẽ cho bạn khá nhiều sự lựa chọn trong enum HatchStyle , bạn hãy thử tìm cho mình một style mà thích hợp để làm nền cho captcha.)
Sau đó hai viết tiếp mã lệnh cho các sự kiện sau:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) CreateCaptcha(); } protected void imbReLoad_Click(object sender, System.Web.UI.ImageClickEventArgs e) { CreateCaptcha(); } protected void btnSubmit_Click(object sender, EventArgs e) { if (txtCaptcha.Text.Equals(Session["captcha"].ToString(), StringComparison.OrdinalIgnoreCase)) lblMessage.Text = “Chuỗi xác nhận chính xác”; else lblMessage.Text = “Vui lòng nhập đúng chuỗi xác nhận”; }

Bây giờ hãy chạy thử và kiểm tra xem chức năng này có hoạt động đúng không, giao diện trang web như sau:





Rất đơn giản phải không, tuy nhiên cách này có một số hạn chế như việc lưu tập tin ảnh quá nhiều vào thư mục captcha của server có thể gây lãng phí nhiều tài nguyên. Việc đọc ghi dữ liệu từ ổ cứng làm chậm tốc độ xử lý và các ảnh captcha vẫn được lưu lại trong thư mục nếu không xóa đi định kì.
Để giải quyết cho vấn đề này, chúng ta sẽ sử dụng kĩ thuật ghi trực tiếp ảnh ra đối tượng imgCaptcha thông qua luồng xuất đến máy khách.
Bây giờ bạn hãy tạo một trang aspx mới với tên Catpcha.aspx. Không cần quan tâm đến phần giao diện, bạn hãy copy đoạn mã trong phương thức CreateCaptcha() và đặt vào trong Page_Load, đồng thời sửa lại phần cuối của phương thức cho giống kết quả sau:

protected void Page_Load(object sender, EventArgs e) { string[] fonts ={ “Arial Black”, “Lucida Sans Unicode”, “Comic Sans MS” }; const byte LENGTH = 5; // chuỗi để lấy các kí tự sẽ sử dụng cho captcha const string chars = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz”; using (Bitmap bmp = new Bitmap(120, 30)) { using (Graphics g = Graphics.FromImage(bmp)) { // Tạo nền cho ảnh dạng sóng HatchBrush brush = new HatchBrush(HatchStyle.Wave, Color.White,Color.Wheat); g.FillRegion(brush,g.Clip); // Lưu chuỗi captcha trong quá trình tạo StringBuilder strCaptcha = new StringBuilder(); Random rand = new Random(); for (int i = 0; i < LENGTH; i++) { // Lấy kí tự ngẫu nhiên từ mảng chars string str = chars[rand.Next(chars.Length)].ToString(); strCaptcha.Append(str); // Tạo font với tên font ngẫu nhiên chọn từ mảng fonts Font font = new Font(fonts[rand.Next(fonts.Length)], 12, FontStyle.Strikeout | FontStyle.Italic); // Lấy kích thước của kí tự SizeF size= g.MeasureString(str,font); // Vẽ kí tự đó ra ảnh tại vị trí tăng dần theo i, vị trí top ngẫu nhiên g.DrawString(str, font, Brushes.Chocolate,i*size.Width+3, rand.Next(2,10)); font.Dispose(); } // Lưu captcha vào session Session["captcha"]=strCaptcha.ToString(); // Ghi ảnh trực tiếp ra luồng xuất theo định dạng gif Response.ContentType = “image/GIF”; bmp.Save(Response.OutputStream, ImageFormat.Gif); } } }

Sau đó hãy sửa lại phần body của trang Default.aspx



<div>HTML Code:
<form id=”form1″ runat=”server”>
<div>
<asp:Image ID=”imgCaptcha” runat=”server” ImageUrl=”Captcha.aspx” />
<asp:ImageButton ID=”imbReLoad” runat=”server” ImageUrl=”~/Images/ajax-arrows-green.gif” />
<asp:TextBox runat=”Server” ID=”txtCaptcha” />
<asp:Button runat=”Server” ID=”btnSubmit” Text=”Đồng ý” OnClick=”btnSubmit_Click” />

<asp:Label ID=”lblMessage” runat=”server” ForeColor=”Red”></asp:Label></div>
</form>
</div>Có hai thay đổi nhỏ ở đoạn mã trên là thuộc tính ImageUrl của imgCaptcha được gán là trang Catpcha.aspx, và sự kiện OnClick của imbReLoad cũng được bỏ đi. Mỗi khi imbReLoad được nhấn, nó sẽ PostBack lại trang và do đó imgCaptcha lại lấy về ảnh mới.
Cuối cùng phần code-behind của trang Default.aspx chỉ còn lại:

protected void Page_Load(object sender, EventArgs e){} protected void btnSubmit_Click(object sender, EventArgs e) { if (txtCaptcha.Text.Equals(Session["captcha"].ToString(), StringComparison.OrdinalIgnoreCase)) lblMessage.Text = “Chuỗi xác nhận chính xác”; else lblMessage.Text = “Vui lòng nhập đúng chuỗi xác nhận”; }

Chúc thành công!

View more random threads:

• Giới thiệu thread và multi thread trong lập trình C#
• bài kiểm tra xem có kí tự t trong xâu ko? mà mk chạy mãi mà ko đc m.n xem hộ mk với.
• Lưu nội dung CSDL sang tài liệu XML trong lập trình C#
• Lưu ý khi chuyển float thành double!
• Chuyển 1 chuỗi sang Tittle Case hoặc ProperCase trong lập trình C#
• Hướng dẫn chuyển đổi từ định dạng "dd/MM/yyyy" sang "MM/dd/yyyy"
• Code chuyển tiền số sang chữ trên C#
• Xử lý Windows Registry trong C# [English]
• Lập trình C# | Đi tắt tới C#
• Kỹ Thuật Nhận Dạng Chữ Viết Tay - Phương pháp và các thực hiện trên C#

[chinhdel]

Hay lắm bạn ^^ rất có ích [IMG]images/smilies/biggrin.png[/IMG]

[Chothue365]

có captcha nào chứng thực được bằng javascript không các bạn (refesh cũng bằng javascript luôn)

[ducthangseo]

Sao mình làm đúng như hướng dẫn nhưng chỉ hiển thị được cái Image, còn cái textbox và button thì "biến mất".
Mình nhận ra là mỗi khi gọi hàm CreatCaptcha() thì các controls khác trên trang đều bị mất tiêu.
Ai biết vấn đề thì giải thích dùm mình nhé.
Thanks

[hoannguyen64]

Mình không rành lắm về vẽ hình bitmap, đã làm thử theo ví dụ, thay vì lưu hình ở trang Captcha.aspx, mình lưu vào thư mục ...\App\Local\Temp của máy người dùng. Tuy đã có ảnh nhưng không thể nào hiển thị lên được.
Trong C# không có đối tượng nào để lưu hình xuất ra hay sao mà phải xuất ra ở trang captcha.aspx, vì nhìn vào code

 <asp:Image ID=”imgCaptcha” runat=”server” ImageUrl=”Captcha.aspx” />

mình thấy không được chuẩn, vì phần mở rộng của ảnh là aspx. Có cách nào để file ảnh là Captcha.jpg không nhỉ.

[phuongtrandinh]

@dobi: bạn thử up project lên xem chứ nói vậy ko đủ thông tin để người khác giúp
@soujiro_seta: bạn đọc lại tut trên sẽ thấy tại sao mình làm thế