C # Web Side Add Login Verification code

Written in the front: The recent school project needs to add login verification code, and I was a new professional to the computer learning slag, so add Web side verification code is not Greek. However, the students consulted, as well as on the Internet to find a variety of information, after their own testing, is added a simple login verification code. The following adds the verification code the process records, in order to later oneself study the improvement, also may let the small white schoolmate which like me to save the time to find the material the Kungfu.

1 First of all, we need to find a production of verification code pictures from the Internet class (mainly I do not write myself). Read this article of the students do not need to find, I directly put the code posted below, the specific comments, the source of the author has been written, we can see how to use, have the opportunity to carefully study the next bar.

Using System;
Using System.Collections.Generic;
Using System.Drawing;
Using System.Drawing.Drawing2D;
Using System.Drawing.Imaging;
Using System.IO;
Using System.Linq;
Using System.Web;

Namespace Testsecuritycode01.app_start
{
public class Securitycode
{
<summary>
Generate a random string
</summary>
<param name= "Codecount" > Verification Code length </param>
<returns></returns>
public string Createrandomcode (int codecount)
{
String Allchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,a,b,c,d,e,f,g,h,i, g,k,l,m,n,o,p,q,r,f,g,h,i,g,k,l,m,n,o,p,q,r,s,t , u,v,w,x,y,z,s,t,u,v,w,x,y,z ";
string[] Allchararray = Allchar.split (', ');
String randomcode = "";
int temp =-1;
Random rand = new Random ();
for (int i = 0; i < Codecount; i++)
{
if (temp!=-1)
{
Rand = new Random (i * temp * ((int) DateTime.Now.Ticks));
}
int t = rand. Next (35);
if (temp = = t)
{
Return Createrandomcode (Codecount);
}
temp = t;
Randomcode + = allchararray[t];
}
return randomcode;
}

<summary>
Create a CAPTCHA picture
</summary>
<param name= "Validatecode" > Captcha no interference string </param>
<returns></returns>
Public byte[] Createvalidategraphic (string validatecode)
{
Bitmap image = new Bitmap ((int) math.ceiling (validatecode.length * 22.0), 40);
Graphics g = graphics.fromimage (image);
Try
{
Generate a random generator
Random Random = new Random ();
Empty picture background color
G.clear (Color.White);
Disturbing lines for drawing pictures
for (int i = 0; i < i++)
{
int x1 = Random. Next (image. Width);
int x2 = random. Next (image. Width);
int y1 = random. Next (image. Height);
int y2 = random. Next (image. Height);
G.drawline (New Pen (color.silver), X1, x2, y1, y2);
}
Font font = new Font ("Arial", FontStyle.Bold | Fontstyle.italic));
LinearGradientBrush brush = new LinearGradientBrush (new Rectangle (0, 0, image. Width, image. Height), color.blue,color.darkred, 1.2f, true);
g.DrawString (Validatecode, Font, Brush, 3, 2);


Picture of the foreground interference line
for (int i = 0; i < i++)
{
int x = random. Next (image. Width);
int y = random. Next (image. Height);
Image. SetPixel (x, Y, Color.FromArgb) (random. Next ()));
}
Draw a picture's border line
G.drawrectangle (New Pen (Color.silver), 0, 0, image. Width-1, image. HEIGHT-1);

Save picture data
MemoryStream stream = new MemoryStream ();
Image. Save (stream, imageformat.jpeg);

Output picture Stream
return stream. ToArray ();
}
Finally
{
G.dispose ();
Image. Dispose ();
}
}
}
}

Then, we need to build a class, named Securitycode, put this class in a folder you can find, I put it here (don't ask why I put it here, I just want to get it)

2 We need to add a production verification code picture in the Controller method, I am here to add to the HomeController. First come to a picture:

The following code (without code, what is the meaning of the post?) ）

static string securitycode_input = "";
Public ActionResult Getsecuritycode ()
{
Securitycode code = new Securitycode ();
Securitycode_input = code. Createrandomcode (4);
byte[] buf = code. Createvalidategraphic (Securitycode_input);
Securitycode_input = buf. ToString ();
Return File (buf, "image/jpeg");
}

Note that this variable should be static, or the variable will be reset each time you enter the controller securitycode_input.  This variable is a randomly generated string verification code. You can debug it again and walk away. (This code is the code inside the HomeController, and the HomeController view is the page where we need to add the CAPTCHA, which is index.cshtml in this article)

3 The following is called in the front page of the verification code, there are two methods, personal comparison of the recommendation of the second, although the second kind of sometimes abnormal ... Take the usual screenshot first:

method One:

The following code is attached:

<script type= "Text/javascript" >
Window.onload = function () {
$ ("#secImg"). Click (function () {
Note that the following flag is required, if not added will cause some browsers can not refresh the CAPTCHA
$ ("#secImg"). attr ("src", "getsecuritycode?flag=" + math.random ());
});
}
</script>

<form action= "Checksecuritycode" method= "POST" >
<div style= "width:100px;height:80px;margin:50px Auto" >
<input type= "text" id= "Securitycode" name= "Securitycode" required>
<p></p>
@* If you do not add ~/home/, there are sometimes 404 errors, and home represents the name of the controller, which is homecontroller*@
</div>
<p><input type= "Submit" > </p>
</form>

Method Two:

The following code is attached:

<script type= "Text/javascript" >
Window.onload = function () {
$ ("#secImg"). Click ();
}
</script>

<form action= "~/home/checksecuritycode" method= "POST" >
<div style= "width:100px;height:80px;margin:50px Auto" >
<input type= "text" id= "Securitycode" name= "Securitycode" required>
<p></p>
@* Note that the following flag is required, if not added will cause some browsers can not refresh the authentication code *@
</div>

<p><input type= "Submit" > </p>
</form>

End...................

Here's a screenshot of a successful run:

Write in the back: Everyone found mistakes must help me point out, thank you.