Siguran sam da svi znate šta je captcha kontrola i čemu služi. U ovom članku ću vam pokazati kako na veoma jednostavan način možete da implementirate sopstvenu Captcha kontrolu.
Šta nam je potrebno? Potrebna nam je jedna .aspx stranica koja će da izgeneriše sliku i pošalje je nazad u rRsponse. Ovo može da bude i http handler, ali u ovom primeru ćemo koristiti običnu stranicu. Sav kod će biti implementiran u Page_Load event handleru.
Osnova captcha kontrole je slučajno izgenerisani tekst koji korisnik mora da ponovi da bi izvršio neku operaciju. U ovom primeru ćemo koristiti samo alfanumeričke karaktere za generisanje "random" teksta .Sledeći god generiše tekst koji nam je potreban:
Random Rand = new Random();
char[] chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".ToCharArray();
// Generate random alphanumeric text
string text = "";
for (int i = 0; i < 5; i++)
{
int iNum = Rand.Next(0, 61);
text += chars[iNum];
}
Session["captchaText"] = text;
U gornjem kodu, pravimo niz karaktera koje želimo da koristimo pri generisanju. Zatim izgenerišemo slučajnih pet koje stavimo u sesiju, kako bi seo tekst bio dostupan drugim stranicama. Ovu vrednost možete da hash-ujete da bi ste je zaštitili od napasnika 
U sledećem kodu iscrtaćemo slučajno izgenerisani tekst koristeći Bitmapu i dodati malo "noise" kako bi slika bila slabije čitljiva. U ovom primeru ćemo dodati 100 slučajno pozicioniranih tačaka. Vi, naravno, ove vrednosti možete da podesite proizvoljno.
// Create Bitmap and draw random poitn on it
Bitmap Bmp = new Bitmap(100, 50);
for (int i = 0; i < 100; i++)
{
Bmp.SetPixel(Rand.Next(1, 99), Rand.Next(1, 49), Color.Aqua);
}
// Draw text on bitmap
Graphics Gfx = Graphics.FromImage(Bmp);
Font Fnt = new Font("Times New Roman", 16, FontStyle.Bold);
Gfx.DrawString(text, Fnt, Brushes.Aqua, 15, 15);
Drugi deo gornjeg koda generiše grafički objekat na kome se "iscrtava" tekst. Da bi ova kontrola bila potpunija, iscrtaćemo i par slučajno izgenerisanih linija koje će (uglavnom) biti isctane preko našeg teksta.
// Draw random lines over the text
int lines = Rand.Next(1, 4);
for (int i = 0; i < lines; i++)
{
int y1 = Rand.Next(0, 50);
int y2 = Rand.Next(0, 50);
Gfx.DrawLine(Pens.Aqua, 0, y1, 100, y2);
}
Odredili smo da će uvek biti izgenerisana minimum jedna, a maksimum četiri linije, jer bi veći broj linija učinio tekst toliko nerazgovetnim, da ni sam korisnik ne bi bio u stanju da ga ponovi. Linije dobijaju slučajne Y koordinate i iscrtavaju se jedna za drugom. Sve što je preostalo je da se izgenerisana slika pošalje u Response.
// Output image
Bmp.Save(Response.OutputStream, ImageFormat.Jpeg);
Vi sliku možete da izgenerišete u formatu koji vama odgovara, ja sam stavio ovde da bude jpeg.
Šta je ostalo da se uradi? Ostalo je da ovu sliku prikažemo korisniku, omogućimo mu da ponovi tekst koji je prikazan i da ga uporedimo sa vrednošću iz sesije. Na formi koja obrađuje unos stavićemo jedanu html IMG kontrolu, textbox i button.
<img src="GenerateCapctha.aspx" alt="MyCaptcha" />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
Enter the text you see above (case sensitive)<br />
<asp:TextBox ID="txtConfirmText" runat="server"></asp:TextBox>
<asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" /><br />
<br /><asp:Label ID="lblMessage" runat="server" ForeColor="Red" Visible="False"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Glavni trik je u tome da IMG kontroli "podmetnemo" kao source našu html stranu koja je izgenerisala sliku, tako da će se sama slika naći kao source IMG kontrole. Ostatak je jednostavan - kada korisnik unese tekst, izvrši se poređenje i preduzme adekvatna akcija.
protected void btnOK_Click(object sender, EventArgs e)
{
lblMessage.Visible = true;
if (txtConfirmText.Text == Session["CaptchaText"].ToString())
{
lblMessage.Text = "Correct!";
}
else
{
lblMessage.Text = "The text you entered is incorrect. Please try again.";
}
}
Ovime je funckionalnost zaokružena. Kao što se videli, implementacija je krajnje jednostavna, ali je i primer jednostavan. Sa malo mašte, ovaj kod može dosta da se unapredi, da se ulapša renderovanje, kao i da se primene drugačiji algoritmi za generisanje teksta, "nosie" i linija. U prilogu se nalazi i ceo primer, pa možete da iskoristite ovaj kod i da ga usavršavate.