製作驗證碼主要是利用了C#的GDI繪製，效果如下圖所示：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>驗證碼</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<form role="form" onsubmit="return login()" style="margin:100px 100px;">
<div class="form-group">
<input id="userName" class="form-control" style="width:300px;" placeholder="用戶名" />
</div>
<div class="form-group">
<input id="userPass" class="form-control" style="width:300px;" placeholder="密碼" />
</div>
<div class="form-group form-inline">
<input id="userCode" class="form-control" style="width:220px;" placeholder="驗證碼" />
<img title="看不清？" class="img-thumbnail" style="cursor:pointer;vertical-align:middle;margin-left:5px;border:none;" src="ashx/CreateValidateCodeHandler.ashx" onclick="this.src = 'ashx/CreateValidateCodeHandler.ashx?_=' + Math.random()" />
</div>
<div>
<input type="submit" class="btn btn-primary" style="width:300px;" value="登錄" />
</div>
</form>
<script>
function login() {
var userName = document.getElementById('userName').value;
if (userName === '' || userName === undefined) {
alert('請輸入用戶名');
return false;
}
var userPass = document.getElementById('userPass').value;
if (userPass === '' || userPass === undefined) {
alert('請輸入密碼');
return false;
}
var userCode = document.getElementById('userCode').value;
if (userCode === '' || userCode === undefined) {
alert('請輸入驗證碼');
return false;
}
$.ajax({
url: 'ashx/LoginHandler.ashx',
type: 'post',
dataType: 'json',
data: {
userName: userName,
userPass: userPass,
userCode: userCode
},
success: function (data) {
if (data == 'Yes') {
window.location.href = 'index.html';
}
else {
alert('登陸失敗');
}
}
})
return false;
}
</script>
</body>
</html>
CreateValidateCodeHandler.ashx代碼：
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace WebApplication1.ashx
{
/// <summary>
/// CreateValidateCodeHandler 的摘要說明
/// </summary>
public class CreateValidateCodeHandler : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "image/jpeg";
string code = GetRandomNumber();
context.Session["code"] = code;
using (Bitmap bitmap = CreateImage(code))
{
bitmap.Save(context.Response.OutputStream, ImageFormat.Bmp);
}
}
public bool IsReusable
{
get
{
return false;
}
}
/// <summary>
/// 隨機數字
/// </summary>
/// <returns></returns>
private string GetRandomNumber()
{
string code = string.Empty;
Random random = new Random();
for (int i = 0; i < 4; i++)
{
code += random.Next(10);
}
return code;
}
/// <summary>
/// 隨機字符
/// </summary>
/// <returns></returns>
private string GetRandomLetter()
{
string code = string.Empty;
Random random = new Random();
for (int i = 0; i < 4; i++)
{
char letter = (char)random.Next(65, 90);
code += letter.ToString();
}
return code;
}
/// <summary>
/// 畫圖片的背景圖+干擾線
/// </summary>
/// <param name="code"></param>
/// <returns></returns>
private Bitmap CreateImage(string code)
{
Bitmap bitmap = new Bitmap(code.Length * 18, 33);
Graphics g = Graphics.FromImage(bitmap);
g.Clear(Color.White);
// 隨機顏色、字體
Color[] colors = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Brown, Color.DarkCyan, Color.Purple };
string[] fonts = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋體" };
// 繪製背景線
Random random = new Random();
Pen pen = new Pen(Color.LightGray, 1);
for (int i = 0; i < 20; i++)
{
int x1 = random.Next(bitmap.Width);
int x2 = random.Next(bitmap.Width);
int y1 = random.Next(bitmap.Height);
int y2 = random.Next(bitmap.Height);
g.DrawLine(pen, x1, y1, x2, y2);
}
// 繪製字符
for (int i = 0; i < code.Length; i++)
{
Font font = new Font(fonts[random.Next(5)], 15, FontStyle.Bold);
Brush brush = new SolidBrush(colors[random.Next(7)]);
g.DrawString(code[i].ToString(), font, brush, 3 + (i * 15), 2);
}
return bitmap;
}
}
}
LoginHandler.ashx代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using Newtonsoft.Json;
namespace WebApplication1.ashx
{
/// <summary>
/// LoginHandler 的摘要說明
/// </summary>
public class LoginHandler : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request["userName"].ToString();
string userPass = context.Request["userPass"].ToString();
string userCode = context.Request["userCode"].ToString();
if (userName == "admin" && userPass == "123456" && userCode == context.Session["code"].ToString())
{
context.Response.Write(JsonConvert.SerializeObject("Yes"));
}
else
{
context.Response.Write(JsonConvert.SerializeObject("No"));
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}