鼠洞验证 hole.mouse----通过鼠标输入完成表单验证码
时间：2006-07-24 来源：achun.shx
一般常见的表单提交验证是通过用户再次手动输入看到的字符来完成的.
那,能不能通过鼠标输入完成呢?
本文给出了一个简单的实现方案:鼠洞验证 hole.mouse
原理:用坐标值来代替验证字符串,通过在一幅图片上标出特殊的区域--鼠洞(只有mouse点击能通过).以用户是否点击到了正确的位置----鼠洞来验证其提交有效性.
选择洞口:绘制一幅图片并不困难,生成一个相对图片特定位置的坐标也很容易.值的讨论的是--鼠洞的洞口图片用什么表示呢?我这里用汉字表示,随机的汉字.当然你可以做出更多的变化.
让我们看看图片生产部分的代码:
文件:hole.mouse.php //php鼠洞图片实现
<?php
/*************
*模块:鼠洞验证 (HOLE.MOUSE)生成部分
*作者:achun
*Email:[email protected]
*版权:BSD
*日期:2006-7-22
*原理:通过随机的在图片上产生特殊区域---鼠洞,只有老鼠,鼠标点击可以通过.
* 本实例是实现的最简单例子.说明的其原理.应用中可变化的范围很大
* 图片采取随机提取其中的一部分.
* 鼠洞采用汉字.
*/
//一些配置的定义
define('HOLESIZE',18);//洞口的尺寸
define('ANGLE',30);//空口旋转的角度范围
define('FONT','C:/windows/fonts/simhei.ttf');//字库文件
define('BGIMG','1.png');//背景图 你自己选择定义了 @session_start();
//生成四位随机整数验证码
Header("Content-type:image/png");
$x=rand(HOLESIZE + 6,319 - HOLESIZE);
$y=rand(HOLESIZE,63 - HOLESIZE);
$_SESSION['xy']=array('x'=>$x,'y'=>$y); $color=rand(127,255);
$angle=rand(-ANGLE,ANGLE);
//随机生成汉字
$str=' ';
$str[0]=chr(rand(0xB0,0xF7));
$str[1]=chr(rand(0xB0,0xFE)); //调入背景图并从背景原图中随机截取一部分,作为验证图片
$bgimg=imagecreatefrompng(BGIMG);
$im=imagecreatetruecolor(320,64);
imagecopy($im, $bgimg, 0,0, rand(0,137),0,320,64); //简单的生产不同的颜色
$color = imagecolorallocate($im,255-$color,$color-100,$color);
//绘制洞口--一个汉字了
imagettftext($im, HOLESIZE,$angle, $x - HOLESIZE,$y, $color, FONT,iconv("GB2312", "UTF-8",$str));
imagegif($im);
ImageDestroy($im);
?> 文件:index.php //页面和验证的简单例子 <?php
/*************
*模块:鼠洞验证 (hole.mouse)页面 和验证部分
*作者:achun
*Email:[email protected]
*版权:BSD
*日期:2006-7-22
*原理:通过随机的在图片上产生特殊区域---鼠洞,只有老鼠,鼠标点击可以通过.
* 本实例是实现的最简单例子.说明的其原理.应用中可变化的范围很大
* 图片采取随机提取其中的一部分.
* 鼠洞采用汉字.
*/
//一些配置的定义
define('RANGE',16);//点击的有效范围--象素点
//对输入的验证
if($_POST){
//当然是验证坐标数据保存在session了
@session_start();
$xy=$_SESSION['xy'];
if(abs($_POST['x']-$xy['x'])>RANGE or abs($_POST['y']-$xy['y'])>RANGE)
echo '点的不够准呀!';
else
echo '通过鼠洞验证了!';
print_r($_POST);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
margin-left:0px;
margin-top:100px;
}
-->
</style>
</head>
点击图中的汉字提交
<form name="f" method="post" action="">
<input type="text" value=0 name="其他信息" ></input>
<input type="IMAGE" src="hole.mouse.php">
</form> </body>
</html> 结束语:简单吧!其中可做的变化还是很多的不过基本都是围绕图片内容的.看你的了.
/*************
*模块:鼠洞验证 (HOLE.MOUSE)生成部分
*作者:achun
*Email:[email protected]
*版权:BSD
*日期:2006-7-22
*原理:通过随机的在图片上产生特殊区域---鼠洞,只有老鼠,鼠标点击可以通过.
* 本实例是实现的最简单例子.说明的其原理.应用中可变化的范围很大
* 图片采取随机提取其中的一部分.
* 鼠洞采用汉字.
*/
//一些配置的定义
define('HOLESIZE',18);//洞口的尺寸
define('ANGLE',30);//空口旋转的角度范围
define('FONT','C:/windows/fonts/simhei.ttf');//字库文件
define('BGIMG','1.png');//背景图 你自己选择定义了 @session_start();
//生成四位随机整数验证码
Header("Content-type:image/png");
$x=rand(HOLESIZE + 6,319 - HOLESIZE);
$y=rand(HOLESIZE,63 - HOLESIZE);
$_SESSION['xy']=array('x'=>$x,'y'=>$y); $color=rand(127,255);
$angle=rand(-ANGLE,ANGLE);
//随机生成汉字
$str=' ';
$str[0]=chr(rand(0xB0,0xF7));
$str[1]=chr(rand(0xB0,0xFE)); //调入背景图并从背景原图中随机截取一部分,作为验证图片
$bgimg=imagecreatefrompng(BGIMG);
$im=imagecreatetruecolor(320,64);
imagecopy($im, $bgimg, 0,0, rand(0,137),0,320,64); //简单的生产不同的颜色
$color = imagecolorallocate($im,255-$color,$color-100,$color);
//绘制洞口--一个汉字了
imagettftext($im, HOLESIZE,$angle, $x - HOLESIZE,$y, $color, FONT,iconv("GB2312", "UTF-8",$str));
imagegif($im);
ImageDestroy($im);
?> 文件:index.php //页面和验证的简单例子 <?php
/*************
*模块:鼠洞验证 (hole.mouse)页面 和验证部分
*作者:achun
*Email:[email protected]
*版权:BSD
*日期:2006-7-22
*原理:通过随机的在图片上产生特殊区域---鼠洞,只有老鼠,鼠标点击可以通过.
* 本实例是实现的最简单例子.说明的其原理.应用中可变化的范围很大
* 图片采取随机提取其中的一部分.
* 鼠洞采用汉字.
*/
//一些配置的定义
define('RANGE',16);//点击的有效范围--象素点
//对输入的验证
if($_POST){
//当然是验证坐标数据保存在session了
@session_start();
$xy=$_SESSION['xy'];
if(abs($_POST['x']-$xy['x'])>RANGE or abs($_POST['y']-$xy['y'])>RANGE)
echo '点的不够准呀!';
else
echo '通过鼠洞验证了!';
print_r($_POST);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
margin-left:0px;
margin-top:100px;
}
-->
</style>
</head>
点击图中的汉字提交
<form name="f" method="post" action="">
<input type="text" value=0 name="其他信息" ></input>
<input type="IMAGE" src="hole.mouse.php">
</form> </body>
</html> 结束语:简单吧!其中可做的变化还是很多的不过基本都是围绕图片内容的.看你的了.
相关阅读 更多 +
