不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。
PHP实现：
我们这里展示了如何编写PHP程序实现验证码功能：
代码一：
<?php
/*
* Filename:authpage.php
* Author: hutuworm
* Date: 2003-04-28
* @Copylefthutuworm.org
*/
srand((double)microtime()*1000000);
//验证用户输入是否和验证码一致
if(isset($HTTP_POST_VARS['authinput']))
{
if(strcmp($HTTP_POST_VARS['authnum'],$HTTP_POST_VARS['authinput'])==0)
echo "验证成功！";
else
echo "验证失败！";
}
//生成新的四位整数验证码
while(($authnum=rand()%10000)<1000);
?>
<form action=authpage.php method=post>
<table>
请输入验证码：<input type=text name=authinput style="width:
80px"><br>
<input type=submit name="验证" value="提交验证码">
<input type=hidden name=authnum value=<? echo $authnum; ?>>
<img src=authimg.php?authnum=<? echo $authnum; ?>>
</table>
</form>
代码二：
<?php
/*
* Filename:authimg.php
* Author: hutuworm
* Date: 2003-04-28
* @Copylefthutuworm.org
*/
//生成验证码图片
Header("Content-type: image/PNG");
srand((double)microtime()*1000000);
$im = imagecreate(58,28);
$black = ImageColorAllocate($im, 0,0,0);
$white = ImageColorAllocate($im, 255,255,255);
$gray = ImageColorAllocate($im, 200,200,200);
imagefill($im,68,30,$gray);
//将四位整数验证码绘入图片
imagestring($im, 5, 10, 8, $HTTP_GET_VARS['authnum'], $black);
for($i=0;$i<50;$i++) //加入干扰象素
{
imagesetpixel($im, rand()%70 , rand()%30 , $black);
}
ImagePNG($im);
ImageDestroy($im);
?>
本文程序在Apache 2.0.45 + PHP 4.3.1环境下运行通过。
上文只是对验证码功能的一个简单实现，并没有考虑商用安全性问题。如果要增强安全性，将此功能投入商业应用，则可以通过以下几个步骤实现：
1. 启用Session。
2. authnum在authimg.php中生成，并计算md5sum，存入session。
3.
authpage.php将authinput计算md5sum后，与session中的authnum（md5sum）对比得出验证结果。
本站注：作者使用了简单的代码实现了很酷的功能。不过在添加干扰像素时的效果不是太好，大家可以看一下雨声论坛登录时的效验码(http://ror.cn/perl/ut/user_login.cgi)，偶把第二段代码稍改了一下，生成了与其类似的效果。
修改后的代码如下：
<?php
/*
* Filename: authimg.php
* Author: hutuworm
* Date: 2003-04-28
* @Copyleft hutuworm.org
*/
//生成验证码图片
Header("Content-type: image/PNG");
srand((double)microtime()*1000000);
$im = imagecreate(62,20);
$black = ImageColorAllocate($im, 0,0,0);
$white = ImageColorAllocate($im, 255,255,255);
$gray = ImageColorAllocate($im, 200,200,200);
imagefill($im,68,30,$gray);
while(($authnum=rand()%100000)<10000);
//将四位整数验证码绘入图片
imagestring($im, 5, 10, 3, $authnum, $black);
for($i=0;$i<200;$i++) //加入干扰象素
{
$randcolor =
ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);
}
ImagePNG($im);
ImageDestroy($im);
?>
显示结果如下图：
[在新窗口中浏览该图片]
有兴趣的朋友可以自己试一下。
看一下上面这段代码：
第一次看PHP代码，呵呵。奇怪的学习经历。
代码一：
<?php
/*
* Filename:authpage.php
* Author: hutuworm
* Date: 2003-04-28
* @Copylefthutuworm.org
*/
//以系统时间为种子得到随机数
//srand -- 播下随机数发生器种子
//microtime -- 返回当前 UNIX 时间戳和微秒数
srand((double)microtime()*1000000);
//验证用户输入是否和验证码一致
if(isset($HTTP_POST_VARS['authinput']))
{
//authnum的值是不应该发送到客户端的，这里应该是为了构建一个简单的例子先吧
//authnum 保存在session 里应该是个可行的办法
if(strcmp($HTTP_POST_VARS['authnum'],$HTTP_POST_VARS['authinput'])==0)
echo "验证成功！";
else
echo "验证失败！";
}
//生成新的四位整数验证码
while(($authnum=rand()%10000)<1000);
?>
<form action=authpage.php method=post>
<table>
请输入验证码：<input type=text name=authinput style="width:
80px"><br>
<input type=submit name="验证" value="提交验证码">
<input type=hidden name=authnum value=<? echo $authnum; ?>>
<img src=authimg.php?authnum=<? echo $authnum; ?>>
</table>
</form>
代码二：
<?php
/*
* Filename:authimg.php
* Author: hutuworm
* Date: 2003-04-28
* @Copylefthutuworm.org
*/
//下面几行代码肯定会让写ASP的GGDD们羡慕不已。
//生成验证码图片
//指定头信息
Header("Content-type: image/PNG");
srand((double)microtime()*1000000);
//返回一个图像标识符，代表了一幅大小为58 X 28的空白图像。
$im = imagecreate(58,28);
$black = ImageColorAllocate($im, 0,0,0);
$white = ImageColorAllocate($im, 255,255,255);
$gray = ImageColorAllocate($im, 200,200,200);
imagefill($im,68,30,$gray);
//强悍！！
//将四位整数验证码绘入图片
//方便起见，使可以通过authimg.php?authnum=XXXX的方式得到图片。实际应用中这种做法肯定是不足取的。
imagestring($im, 5, 10, 8, $HTTP_GET_VARS['authnum'], $black);
for($i=0;$i<50;$i++) //加入干扰象素
{
imagesetpixel($im, rand()%70 , rand()%30 , $black);
}
ImagePNG($im);
//imagepng -- 以 PNG 格式将图像输出到浏览器或文件
ImageDestroy($im);
?>
本文程序在Apache 2.0.45 + PHP 4.3.1环境下运行通过。
上文只是对验证码功能的一个简单实现，并没有考虑商用安全性问题。如果要增强安全性，将此功能投入商业应用，则可以通过以下几个步骤实现：
1. 启用Session。
2. authnum在authimg.php中生成，并计算md5sum，存入session。
3. authpage.php将authinput计算md5sum后，与session中的authnum（md5sum）对比得出验证结果。
本站注：作者使用了简单的代码实现了很酷的功能。不过在添加干扰像素时的效果不是太好，大家可以看一下雨声论坛登录时的效验码(http://ror.cn/perl/ut/user_login.cgi)，偶把第二段代码稍改了一下，生成了与其类似的效果。
修改后的代码如下：
<?php
/*
* Filename: authimg.php
* Author: hutuworm
* Date: 2003-04-28
* @Copyleft hutuworm.org
*/
//生成验证码图片
Header("Content-type: image/PNG");
srand((double)microtime()*1000000);
$im = imagecreate(62,20);
$black = ImageColorAllocate($im, 0,0,0);
$white = ImageColorAllocate($im, 255,255,255);
$gray = ImageColorAllocate($im, 200,200,200);
imagefill($im,68,30,$gray);
while(($authnum=rand()%100000)<10000);
//将四位整数验证码绘入图片
imagestring($im, 5, 10, 3, $authnum, $black);
for($i=0;$i<200;$i++) //加入干扰象素
{
$randcolor =
ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);
}
ImagePNG($im);
ImageDestroy($im);
?>
验证码技术核心内容是动态生成图片。ASP做到这一点，最简单也是最普遍的就是用到XBM。我们先了解一下XBM的相关知识。
[转]用XBM创建动态客户端图像
作者： BUILDER.COM
Wednesday, April 9 2003 11:23 AM
X-Bitmap（XBM）是一种古老但通用的图像文件格式，它与现在的许多Web浏览器都兼容。X-Windows图形界面（UNIX和Linux常用的GUI）的C代码库xlib中有一个组件专门描述了它的规范。我将解释XBM格式的工作原理，然后向你展示一种更有趣的使用它的方法：在客户端创建动态图像。文章中的代码可以在此下载。
XBM基础
XBM格式本来是为存储单色的系统位图而设计的，比如图标和鼠标指针。XBM图形的实质上是使用16进制数组来表示二进制图像的C源代码文件。(16进制数组表示的二进制图像)
这里你也许会问：这种文件格式与Web浏览器有什么关系？在上世纪九十年代早期，美国超级计算应用中心（NCSA）在伊利诺斯大学开发第一个被广泛使用的Web浏览器，名为Mosaic。这个浏览器的图形支持来自很多开放源码代码库，其中就包括xlib。因此，导致今天的许多浏览器能够处理XBM图形。
Mosaic项目后来成为了Netscape浏览器的开发基矗微软也借用了一部分Mosaic代码来创建Internet Explorer。微软继而在网络信息服务器（IIS）中将XBM作为一个MIME类型注册而提供本地支持，并且在现有所有版本的Internet Explorer中将其作为一种可支持的图像。(浏览器的广泛支持)
从一个程序员的角度来看，JPEG或GIF与XBM有着极大的不同。这两种文件格式都在位级别上操作并使用了压缩算法。它们可以支持很大的颜色深度范围。创建这些动态Web图形的唯一方法是使用服务器端的脚本，比如<a href=http://stein.cshl.org/WWW/software/GD/GD.pm和CGI/Perl脚本的结合，或者通过System.Drawing名字空间访问ASP.NET中的图形设计接口类库（GDI+）。(升级到ASP.NET有很多个理由。)
XBM创建起来很有程序性。每个位都被一一指定，而结果图形被限制为两色（黑色和白色）。(局限性之一：让人不爽)X-Bitmap并不是必须服务器端脚本，可以在客户端用JavaScript实时创建它们。(增加了不少灵活性)
X-Bitmap的实用程序包括动态生成的图、页面计数器、老式图形图标、以及统计图表。(就是通过位控制太麻烦了，有良好的包装就好了。另外：生成图片的大小，算法的强度，是否都达到了可用的要求？)给我印象最深的XMB应用是一个叫Wolfenstein 5k的游戏，它是一个纹理映射的第一视角射击游戏，用JavaScript编写，只有5KB大校(不错啊，稍后爽一下)
通过使用IMG标识可以很容易地将XBM文件嵌入到一个Web页面中。其语法如下：
<img src=”xbmsmill.xbm”>
----------------------------------------------------------------------
注意
这种格式不对Mac或相应的浏览器有效，比如Mozilla的早期版本。
----------------------------------------------------------------------
典型的XBM源代码与列表A中显示的比较相像。
#define语句以像素点为单位设置了图像的宽度和高度。你也可以使用x_hot和y_hot命令来定义图像中的一个热点。我已经创建了一个X-Bitmap来描绘这个过程。为了设计它，我先将图像映射为二进制值，如果你仔细的看，在这里你会看到一张笑脸。
我所创建的二进制图像宽16个数字高7个数字，在我们的源代码的XBM头中定义了相同大小的宽/高像素值。图像本身被存储在一个静态数组中，它包含一列二进制编码的十六进制（BCH）值——换句话说，每四位分成一组。
计算出笑脸的十六进制值得最简单的方法是一次检验图像的一行，将二进制值分成四位一组的分段，将每个分段映射成二进制/十六进制表中对应的十六进制数。下面是第一行：
0001100001100000
下面两行分别表示四位的分段和其在表A中对应的十六进制数
二进制： 0001100001100000
十六进制：8160
表A
XBM二/十六进制转换表
二进制 十六进制
0000 0
1000 1
0100 2
1100 3
0010 4
1010 5
0110 6
1110 7
0001 8
1001 9
0101 A
1101 B
0011 C
1011 D
0111 E
1111 F
请注意这些并不是标准的二/十六进制转换。它们是反向计算的（从左到右）而不是从右到左。把它颠倒是因为浏览器会从左到右来读图形，我们的代码必须与其一致。
最后要把这些十六进制值转换成XBM的右格式。必须在每个十六进制值前加“0x”。这是标准C++表示十六进制的方法。然后将这些值从右到左输出（每个十六进制对表示八位二进制位）。请看列表B中的例子。
因此，我们可以说：
0001100001100000=0x18,0x06
这些符合XBM的值可以很容易地插入到图像数组中：
static unsigned char xbmsmile_bits[]=
现在我们来看看格式本身，现在是时候来学习在客户端浏览器中动态创建X-Bitmap了。
图片用点阵的形式表示，比如2:
00111100 0011为3 1100为C 即0x3c
01100110 0110为6 0110为6 0x66
01100000 ....... 0x表示十六进制数。
01100000 依此类推
00110000 这是用二进制数得到的点阵，其中的1为显示一黑点，0不显示
00011000 是一个反着看的2
00001100 其余数字可自已排列点阵再二进制化为十六进制数
00000110 缺点是只有黑白两种颜色
00000110 显示出来是白底黑字，要显示黑底白字的话，对其取反就行了
01111110
下面是我"画"的0-9的数字
num.asp
<%
Dim a(10,10)
a(0,1) = "0x3c" '数字0
a(0,2) = "0x66"
a(0,3) = "0xc3"
a(0,4) = "0xc3"
a(0,5) = "0xc3"
a(0,6) = "0xc3"
a(0,7) = "0xc3"
a(0,8) = "0xc3"
a(0,9) = "0x66"
a(0,10)= "0x3c"
a(1,1) = "0x18" '数字1
a(1,2) = "0x1c"
a(1,3) = "0x18"
a(1,4) = "0x18"
a(1,5) = "0x18"
a(1,6) = "0x18"
a(1,7) = "0x18"
a(1,8) = "0x18"
a(1,9) = "0x18"
a(0,10)= "0x7e"
a(2,1) = "0x3c" '数字2
a(2,2) = "0x66"
a(2,3) = "0x60"
a(2,4) = "0x60"
a(2,5) = "0x30"
a(2,6) = "0x18"
a(2,7) = "0x0c"
a(2,8) = "0x06"
a(2,9) = "0x06"
a(2,10)= "0x7e"
a(3,1) = "0x3c" '数字3
a(3,2) = "0x66"
a(3,3) = "0xc0"
a(3,4) = "0x60"
a(3,5) = "0x1c"
a(3,6) = "0x60"
a(3,7) = "0xc0"
a(3,8) = "0xc0"
a(3,9) = "0x66"
a(3,10)= "0x38"
a(4,1) = "0x38" '数字4
a(4,2) = "0x3c"
a(4,3) = "0x36"
a(4,4) = "0x33"
a(4,5) = "0x33"
a(4,6) = "0x33"
a(4,7) = "0xff"
a(4,8) = "0x30"
a(4,9) = "0x30"
a(4,10)= "0xfe"
a(5,1) = "0xfe" '数字5
a(5,2) = "0xfe"
a(5,3) = "0x06"
a(5,4) = "0x06"
a(5,5) = "0x3e"
a(5,6) = "0x60"
a(5,7) = "0xc0"
a(5,8) = "0xc3"
a(5,9) = "0x66"
a(5,10)= "0x3c"
a(6,1) = "0x60" '数字6
a(6,2) = "0x30"
a(6,3) = "0x18"
a(6,4) = "0x0c"
a(6,5) = "0x3e"
a(6,6) = "0x63"
a(6,7) = "0xc3"
a(6,8) = "0xc3"
a(6,9) = "0x66"
a(6,10) ="0x3c"
a(7,1) = "0xff" '数字7
a(7,2) = "0xc0"
a(7,3) = "0x60"
a(7,4) = "0x30"
a(7,5) = "0x18"
a(7,6) = "0x18"
a(7,7) = "0x18"
a(7,8) = "0x18"
a(7,9) = "0x18"
a(7,10)= "0x18"
a(8,1) = "0x3c" '数字8
a(8,2) = "0x66"
a(8,3) = "0xc3"
a(8,4) = "0x66"
a(8,5) = "0x3c"
a(8,6) = "0x66"
a(8,7) = "0xc3"
a(8,8) = "0xc3"
a(8,9) = "0x66"
a(8,10)= "0x3c"
a(9,1) = "0x3c" '数字9
a(9,2) = "0x66"
a(9,3) = "0xc3"
a(9,4) = "0xc3"
a(9,5) = "0x66"
a(9,6) = "0x3c"
a(9,7) = "0x18"
a(9,8) = "0x0c"
a(9,9) = "0x06"
a(9,10)= "0x03"
%>
显示的方法是:
1.先传出一个MIME:
Response.ContentType = "image/x-xbitmap"
2.再传出一个c++的源程序,如显示2:
#define counter_width 8
#define counter_height 10
static unsigned char counter_bits[] = {
0x3c,0x66,0x60,0x60,0x30,0x18,0x0c,0x06,0x06,0x7e
};
这样在浏览器上就显示出来一个8*10像素的2了
要显示两个或以上的数字的时候，须改动宽度的值(必须是图像点阵宽度的整数倍)，在count_bits[]数组的值排序如下：
比如显示 12
a(1,1), a(2,1), a(1,2), a(2,2)... a(1,10), a(2,10)
下面是具体计数器的例子:
count.asp
<!--#include file="num.asp"-->
<%
Dim Image
Dim Width, Height
Dim num
Dim digtal
Dim Length
Dim sort
Length = 10 '自定计数器长度
Redim sort( Length )
num = 62275 '计数器的值
digital = ""
For I = 1 To Length -Len( num ) '补0
digital = digital & "0"
Next
For I = 1 To Len( num )
digital = digital & Mid( num, I, 1 )
Next
For I = 1 To Len( digital )
sort(I) = Mid( digital, I, 1 )
Next
Width = 8 * Len( digital ) '图像的宽度
Height = 10 '图像的高度，在本例中为固定值
Response.ContentType="image/x-xbitmap"
hc=chr(13) & chr(10)
Image = "#define counter_width " & Width & hc
Image = Image & "#define counter_height " & Height & hc
Image = Image & "static unsigned char counter_bits[]={" & hc
For I = 1 To Height
For J = 1 To Length
Image = Image & a(sort(J),I) & ","
Next
Next
Image = Left( Image, Len( Image ) - 1 ) '去掉最后一个逗号
Image = Image & "};" & hc
Response.Write Image
%>
把
#define counter_width 8
#define counter_height 10
static unsigned char counter_bits[] = {
0x3c,0x66,0x60,0x60,0x30,0x18,0x0c,0x06,0x06,0x7e
};
保存为 xbm 文件就可以得到一张显示为 2 的图片
#define counter_width 80
#define counter_height 10
static unsigned char counter_bits[]={
0x3c,0x3c,0x3c,0x3c,0x3c,0x60,0x3c,0x3c,0xff,0xfe,0x66,0x66,0x66,0x66,0x66,0x30,0x66,0x66,0xc0,0xfe,0xc3,0xc3,0xc3,0xc3,0xc3,0x18,0x60,0x60,0x60,0x06,0xc3,0xc3,0xc3,0xc3,0xc3,0x0c,0x60,0x60,0x30,0x06,0xc3,0xc3,0xc3,0xc3,0xc3,0x3e,0x30,0x30,0x18,0x3e,0xc3,0xc3,0xc3,0xc3,0xc3,0x63,0x18,0x18,0x18,0x60,0xc3,0xc3,0xc3,0xc3,0xc3,0xc3,0x0c,0x0c,0x18,0xc0,0xc3,0xc3,0xc3,0xc3,0xc3,0xc3,0x06,0x06,0x18,0xc3,0x66,0x66,0x66,0x66,0x66,0x66,0x06,0x06,0x18,0x66,0x7e,0x7e,0x7e,0x7e,0x7e,0x3c,0x7e,0x7e,0x18,0x3c};
保存为 xbm文件则显示为 0000062275 。
