Cách tạo Captcha đơn giản bằng ASP.NET

Captcha là một giải pháp hoàn hảo để chống spam khi đăng ký toàn khoản ở các trang web, các forum. Theo mình biết, có một số phần mềm tự động đăng ký tài khoản rồi post các bài viết spam ở các diễn đàn để quảng cáo hoăc với mục đích nào đó. Nhưng với captcha tự động thay đổi thì các phần mềm này sẽ phải bó tay.

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo 1 captcha đơn giản cho trang web của mình thêm tính chuyên nghiệp.

Đầu tiên ở trang aspx bạn kéo vào các control như đoạn code sau:


<asp:UpdatePanel runat="server" ID="updatepanelcaptcha">
<ContentTemplate>
<asp:Image ID="captchaImage" runat="server" />
&nbsp;
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Web/reload.jpg"
OnClick="ImageButton1_Click" />
</ContentTemplate>
</asp:UpdatePanel>

Khi làm xong hết và chạy thì sẽ được như hình sau: Capture


Mình cho tất cả vào update panel để khi clink vào ImageButton1 nó sẽ thay đổi captcha và trang web không bị load lại.


Bạn vào trang aspx.cs và dán vào đoạn code sau:



//Trả về đường dẫn của tập tin hình.
public string CreateCaptcha()
{
const byte LENGTH = 5;
// chiều dài chuỗi để lấy các kí tự sẽ sử dụng cho captcha
const string chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
using (Bitmap bmp = new Bitmap(120, 35))
{
using (Graphics g = Graphics.FromImage(bmp))
{
// Tạo nền cho ảnh dạng sóng
HatchBrush brush = new HatchBrush(HatchStyle.Percent80, Color.White, Color.Tan);
g.FillRegion(brush, g.Clip);
// Lưu chuỗi captcha trong quá trình tạo
StringBuilder strCaptcha = new StringBuilder();
Random rand = new Random();
float locationX = 3;
for (int i = 0; i < LENGTH; i++)
{
// Lấy kí tự ngẫu nhiên từ mảng chars
SolidBrush brushes = new SolidBrush(GetRandomColor());
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("Times New Roman", new Random().Next(14, 17), FontStyle.Bold);
// 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, locationX, rand.Next(2, 10));
font.Dispose();
//định location X
locationX += size.Width + i;
}
// 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";4
int numRandom = new Random().Next(1, 3000);
string imgFile = "captcha" + numRandom + ".jpg";
string directoryCaptcha = "~/Images/Captcha";
// Kiểm tra thư mục đã tồn tại
if (!Directory.Exists(Server.MapPath(directoryCaptcha)))
{
Directory.CreateDirectory(Server.MapPath(directoryCaptcha));
}
//lấy thông tin thư mục
DirectoryInfo direcInfo = new DirectoryInfo(Server.MapPath(directoryCaptcha));
foreach (FileInfo file in direcInfo.GetFiles(".jpg"))
{
try
{
//Xóa tất cả các tập tin hình trong thư mục hiện tại
file.Delete();
}
catch { }
}
bmp.Save(Server.MapPath(directoryCaptcha + imgFile));
return directoryCaptcha + imgFile;
}
}
}
int rrandom = 0;
int grandom = 0;
int brandom = 0;


public Color GetRandomColor()
{
Random rnd = new Random();
int ri = rnd.Next(255);
if (ri == rrandom){
ri = rnd.Next(255);
}
else{
rrandom = ri;
}
int gi = rnd.Next(255);
if (gi == grandom){
gi = rnd.Next(255);
}
else{
grandom = gi;
}
int bi = rnd.Next(255);
if (bi == brandom){
bi = rnd.Next(255);
}
else{
brandom = bi;
}
byte r = Convert.ToByte(ri);
byte g = Convert.ToByte(gi);
byte b = Convert.ToByte(bi);
return Color.FromArgb(r, g, b);
}


Trong sự kiện pageload bạn duyệt tất cả hình có trong thư mục Images và xóa nó đi rồi tạo captcha mới. Nếu không làm như vậy mỗi lần hàm CreateCaptcha được gọi là 1 hình được tạo ra. Nhiều lần như vậy sẽ tốn dung lượng lưu trữ.



if (!IsPostBack)
{
DirectoryInfo dr = new DirectoryInfo(Server.MapPath("~/Images"));
foreach (FileInfo f in dr.GetFiles())
{
f.Delete();
}
captchaImage.ImageUrl = CreateCaptcha();
}


Tương tự khi clink vào ImageButton1 để load lại captcha ta cũng làm công việc đó.



DirectoryInfo dr = new DirectoryInfo(Server.MapPath("~/Images"));
foreach (FileInfo f in dr.GetFiles())
{
f.Delete();
}
captchaImage.ImageUrl = CreateCaptcha();


Vậy là xong, bạn hãy chạy thử và xem kết quả.

Để hiểu rõ phương pháp này bạn cần biết cách sử dụng phương thức đồ họa GDI+ trong C#. Mình cũng không thể giải thích cặn kẽ từng dòng code được.
Chúc các bạn thành công!

Công cụ miễn phí cho ASP.NET

Có những công cụ bổ sung tăng cường tính năng của trang ASP.NET và giảm bớt công sức của lập trình viên. Điều tuyệt vời là nhiều công cụ rất hữu ích lại hoàn toàn miễn phí, đa phần trong số đó là mã nguồn mở.
Visual Studio .NET hay Visual Web Developer là công cụ tốt để xây dựng các trang ASP.NET, nhưng chưa phải hoàn hảo. Có những công cụ bổ sung tăng cường tính năng của trang ASP.NET và giảm bớt công sức của lập trình viên. Điều tuyệt vời là nhiều công cụ rất hữu ích lại hoàn toàn miễn phí, đa phần trong số đó là mã nguồn mở.

Xử lý văn bản với FreeTextBox

Điều khiển TextBox và TextArea cho phép người dùng nhập một đoạn văn bản, nhưng tất cả chỉ có thế, họ không thể làm gì khác: không thể đổi font chữ, kiểu chữ, màu sắc... Bạn sẽ không phải tự mình viết riêng một trình xử lý văn bản để tích hợp vào trang web của mình, vì FreeTextBox (http://www.freetextbox.com, phiên bản mới nhất 3.1.6, giấy phép: Freeware) có thể làm điều đó thay cho bạn. FreeTextBox là một công cụ xử lý văn bản khá mạnh, đặc biệt có 2 phần Design và HTML nên rất linh hoạt cho cả người dùng chuyên nghiệp và nghiệp dư. Tính năng chính của FreeTextBox bao gồm: Thay đổi font, kích thước và kiểu chữ; Chèn liên kết, Chèn ảnh; Bullet và Numbering; Sắp đoạn; Undo/Redo...



FreeTextBox còn có phiên bản Professional có phí với những tính năng mở rộng và phiên bản Distrubution bao gồm bản Pro và mã nguồn. Tuy nhiên phiên bản Free cũng đã đáp ứng được hầu hết yêu cầu thông thường.

FreeTextBox có các phiên bản dành cho ASP.NET 1.0, 1.1, 2.0, bạn phải chọn đúng phiên bản của file FreeTextBox.dll để cho vào thư mục bin. Cần chú ý là các tài nguyên như ảnh, JavaScript, xml... đã được đặt vào trong file FreeTextBox.Dll. Với ASP.NET 2.0, chúng sẽ được dùng một cách tự động, nhưng trong ASP.NET 1.1 bạn phải thêm vào web.config đoạn mã sau:

Để thêm FreeTextBox, bạn bổ sung đoạn mã này vào đầu trang:

<%@ Register TagPref*x="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>

Và thêm đoạn mã này vào nơi bạn đặt FreeTextBox

Bạn có thể thiết lập khá nhiều thứ trong FreeTextBox: sửa đổi lại thanh Toolbar cho phù hợp với ý mình, chọn skin của toolbar (Office 2000/XP/2003/Mac) cũng như ngôn ngữ sử dụng. Bạn có thể dùng thuộc tính thiết lập hoặc dùng mã điều khiển để có được một công cụ xử lý văn bản như ý.
Ngoài ra còn có FCK Editor, RadEditor, Editor trong AJAX control tookit cũng rất hay để các bạn sử dụng.

Hộp thoại chờ với BusyBoxDotNet

Không thể tránh khỏi những lúc website của bạn phải xử lý một lượng lớn công việc hay dữ liệu, có thể mất đến vài phút. Lúc này bạn cần phải thông báo cho người dùng biết. BusyBoxDotNet là lựa chọn thích hợp cho yêu cầu này.

BusyBox (http://busybox.sourceforge.net phiên bản mới nhất là 0.3, giấy phép: mã nguồn mở), cho phép bạn hiển thị thông báo (tùy ý) đến người dùng trong khi trang web đang xử lý bên dưới. Sau khi tải về thư viện của BusyBox (BusyBoxDotNet.dll và ICSharpCode.SharpZipLib.dll), bạn đặt chúng vào thư mục bin và tiến hành các bước sau:

- Thêm đoạn mã sau vào section trong web.config

verb="*"

type="BusyBoxDotNet.ResourceHttpHandler, BusyBoxDotNet" />

- Đăng kí điều khiển mới ở đầu trang

<%@ Register Assembly="BusyBoxDotNet" Namespace="BusyBoxDotNet" TagPref*x="busyboxdotnet" %>

- Thêm tiếp đoạn mã sau


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- Thêm một điều khiển busyboxdotnet vào bất cứ chỗ nào bạn muốn. Giống như các điều khiển Timer hay FileDialog, vị trí của điều khiển này không quan trọng.


Để sử dụng tính năng BusyBox, thêm đoạn mã sau vào sự kiện cần nhiều thời gian xử lý:

System.Threading.Thread.Sleep(3000);

Chú ý, khi BusyBox hiện lên thì không thể tương tác với tất cả các thành phần phía dưới trang web.

Điều quan trọng đối với BusyBox là có thể điều chỉnh hộp thoại thông báo theo ý mình, bạn có thể chỉnh sửa nhiều thiết lập trong phần properties của điều khiển BusyBoxDotNet ở trên.

BusyBox có 4 chế độ hiển thị:

OnPostBackOnly: Chỉ hiện hộp thoại khi trang gọi PostBack

OnLeavingPage: Chỉ hiện hộp thoại khi đồng thời là PostBack và đang chuyển sang trang web khác

OnLoad: Hộp thoại sẽ hiện kể từ khi trang bắt đầu sinh (render) và tự động ẩn khi đã sinh xong (bất kể khoảng thời gian thiết lập ở trên đã hết hay chưa). Nếu dùng chế độ này, Overlay phải được chuyển thành False, nếu không sẽ gây ra một lỗi ngoại lệ. OnLoad sẽ không có tác dụng với sự kiện Page_Load.

Custom: Hộp thoại sẽ không tự động hiện ra mà bạn sẽ tự điều khiển thời gian xuất hiện và ẩn của nó.

Còn rất nhiều công cụ hữu ích và miễn phí khác có thể bổ sung những tính năng hay cho trang ASP.NET của bạn.

Theo PCWorld

Hướng dẫn tạo đa giao diện trong ASP.NET

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo 1 trang web có nhiều giao diện và có thể thay đổi bằng cách lựa chọn ở Dropdownlist. Mình chỉ ví dụ bằng một website nho nhỏ là thay đổi màu của dòng chữ HelloWorld trên trang web.

Đầu tiên, bạn tạo lớp Theme.cs với nội dung như sau:


public class Theme
{
public string Name{ get; set; }
public Theme(string name)
{
Name = name;
}
}

Mục đích của class này là lưu tên của các theme có trong website

Tiếp theo, bạn tạo class ThemeManager.cs và có một phương thức tĩnh public static List<Theme> GetThemes() với mục đích là lấy tất cả các theme có trong thư mục App_Themes

Nội dung class đó như sau:


using System.Collections.Generic;
using System.IO;
using System.Linq;

public class ThemeManager
{
public static List<Theme> GetThemes()
{
string[] dArrInfo = Directory.GetDirectories(System.Web.HttpContext.Current.Server.MapPath("App_Themes"));
return dArrInfo.Select(d => new Theme(d.Split('\\')[d.Split('\\').Length-1].ToString())).ToList();
}
}

Bước Tiếp Theo: Chúng ta tạo một Class có tên là BasePage.cs để xác định Theme mặc định chúng ta sẽ sử dụng. Mặc định là theme red. Nội dung class này như sau:


using System;

public class BasePage : System.Web.UI.Page
{

protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
if (Session["MyTheme"] == null)
{
Session.Add("MyTheme", "Red");
Page.Theme = (string)Session["MyTheme"];
}
else
{
Page.Theme = (string)Session["MyTheme"];
}
}
}

Bước tiếp nữa bạn tạo ra thư mục App_Themes và add vào đó 2 theme RedBlue. Trong RedBlue bạn lại add vào 2 StyleSheet và gõ vào đoạn CSS sau:

BlueTheme.css


div#text
{
color:Blue;
}

RedTheme.css


div#text
{
color:Red;
}

Hình ảnh ở Solution Explorer:

Capture
Sau đó, bạn kéo vào trong thẻ body ở trang default.aspx các control như đoạn mã sau. Nhớ là thẻ div chứa chuỗi HelloWorld phải có Id=”text” vì đoạn css ở trên định dạng cho thẻ div đó.


<asp:ObjectDataSource ID="ThemeDataSource"
SelectMethod="GetThemes"
TypeName="ThemeManager"
runat="server">
</asp:ObjectDataSource>
<div>
<asp:DropDownList runat="server" ID="ddlColor" DataSourceID="ThemeDataSource"
AutoPostBack="True" ondatabound="ddlColor_DataBound"
onselectedindexchanged="ddlColor_SelectedIndexChanged"
DataTextField="Name"
DataValueField="Name">
</asp:DropDownList>
</div>
<div id="text">
Hello world!
</div>

Hình ảnh giao diện:

Capture

Tiếp theo là gõ code cho sự kiện ondataboundonselectedindexchanged của DropDownList


protected void ddlColor_DataBound(object sender, EventArgs e)
{
ddlColor.SelectedValue = Page.Theme;
}
protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
Session.Add("MyTheme", ddlColor.SelectedValue);
Server.Transfer(Request.FilePath);
}

Sau đó bạn cho trang default.aspx kế thừa class BaseTheme.cs


public partial class _Default :BasePage

Bạn chạy thử và xem kết quả.

Project đính kèm: Download

Chúc các bạn thành công!