php 图片验证码生成 前后台验证

自己从前一段时间做了个php小项目，关于生成图片验证码生成和后台的验证，把自己用到的东西总结一下，希望大家在用到相关问题的时候可以有一定的参考性。

首先，php验证码生成。

代码如下：

1.生成图像代码（picture.php）

<?php
header("Cache-Control: no-cache, must-revalidate"); 
// 声明图像大小
$img_height=70;
$img_width=25;
$authnum='';
// 验证码内容
$ychar="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
$list=explode(",",$ychar);
for($i=0;$i<4;$i++){
    $randnum=rand(0,35);
    $authnum.=$list[$randnum];
}

// 生成一个基本大小图像
$aimg = imagecreate($img_height,$img_width);
// 图像填充颜色
imagecolorallocate($aimg, 255,255,255);
$black = imagecolorallocate($aimg, 0,0,0);

for ($i=1; $i<=100; $i++) {    imagestring($aimg,1,mt_rand(1,$img_height),mt_rand(1,$img_width),"@",imagecolorallocate($aimg,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)));
}

//为了区别于背景，这里的颜色不超过200，上面的不小于200
for ($i=0;$i<strlen($authnum);$i++){
    imagestring($aimg, mt_rand(3,5),$i*$img_height/4+mt_rand(2,7),mt_rand(1,$img_width/2-2), $authnum[$i],imagecolorallocate($aimg,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200)));
}
imagerectangle($aimg,0,0,$img_height-1,$img_width-1,$black);//画一个矩形
Header("Content-type: image/PNG");
ImagePNG($aimg);                    //生成png格式
ImageDestroy($aimg);
?>

2.利用一个form表单（名称为index.php）调用上面的picture.php

  为了便于演示，以下所说的所有文件放在相同的目录。

  --folder1--picture.php

               --index.php

<form>
    <div>
        <img id="codeP" src="picture.php"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
</form>

 当你完成上面的代码时候你就应该能看到在页面中加载了图片的验证码。

如果你的图片没有加载成功的话，检查文件路径或者php.ini中[extension=php_gd2.dll]这个代码是否放开了。

其次，当你完成了图片的显示，你又将要遇到另外一个问题，验证码的刷新。

相信只要是稍微理解一点js用法的人都应该想的到，给某个空间加上一个onclick事件，工作就迎刃而解了。为了方便，我将修改上面index.php的代码。

<script type="text/javascript">
function refresh() {
	document.getElementById("codeP").src = "picture.php?tm="+Math.random();
}
</script>
<form>
    <div>
        <img id="codeP" src="picture.php" onclick="refresh()"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
</form>

 当你将上述代码修改结束时，你就会发现，当你点击图片的时候，验证码就自己变了。至于说蓝色字体的tm=***:代表每次生成随机码，也就是不取缓存。

再次，当你将上面两个步骤完成之后，当你提交表单的时候，你就应该去验证你输入的验证码和图片验证码是否一致，有以下几种方法：

1.客户端验证（cookie验证，不推荐）不安全

2.服务器端验证（session，推荐）安全

关于为什么安全，为什么不安全，网上有很多帖子，可以一一膜拜，这里不细说。

下面的例子就说一下服务器端验证的代码。

在提到验证代码之前，我要先把前面提到的picture.php修正一下，以得到验证效果，着重看新添加的代码和注释。

<?php
// session有效
session_start();
// 声明一个sessoin
session_register("sessionCode");
header("Cache-Control: no-cache, must-revalidate"); 
// 声明图像大小
$img_height=70;
$img_width=25;
$authnum='';
// 验证码内容
$ychar="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
$list=explode(",",$ychar);
for($i=0;$i<4;$i++){
    $randnum=rand(0,35);
    $authnum.=$list[$randnum];
}
// 将每次生成的验证码保存在session中
$_SESSION["sessionCode"] = $authnum;
// 生成一个基本大小图像
$aimg = imagecreate($img_height,$img_width);
// 图像填充颜色
imagecolorallocate($aimg, 255,255,255);
$black = imagecolorallocate($aimg, 0,0,0);

for ($i=1; $i<=100; $i++) {    imagestring($aimg,1,mt_rand(1,$img_height),mt_rand(1,$img_width),"@",imagecolorallocate($aimg,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)));
}

//为了区别于背景，这里的颜色不超过200，上面的不小于200
for ($i=0;$i<strlen($authnum);$i++){
    imagestring($aimg, mt_rand(3,5),$i*$img_height/4+mt_rand(2,7),mt_rand(1,$img_width/2-2), $authnum[$i],imagecolorallocate($aimg,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200)));
}
imagerectangle($aimg,0,0,$img_height-1,$img_width-1,$black);//画一个矩形
Header("Content-type: image/PNG");
ImagePNG($aimg);                    //生成png格式
ImageDestroy($aimg);
?>

 图片验证的方式有两种：

1.后台验证，在你提交的页面中取得你填写的验证码和session中的验证码是否一致，在做相关操作。

  后台验证比较简单，直接贴一下代码。（假如的form表单中要提交的checked.php）

<?php
session_start();
$codeT = $_POST['codeT '];
$codeP = $_SESSION["sessionCode"];
if ($codeT==$codeP) {
   做你想要做的操作；
} else {
   验证码有误；
   相关操作；
}

2.前台验证：

如果你想在前台直接取得$_SESSION["sessionCode"]的值得话，你就大错特错了。

因为你取的值肯定实在html中隐藏起来的，但是图片实在所有html元素加载之后才加载图片的（也就是俗话说的异步加载）

所以做check的时候可以采用异步验证+提交。也就是异步验证过了之后，我在提交表单。我简单的吧代码贴在下面。

index.php

<script type="text/javascript">
function sub() {
  ajaxSubmit(test,"submitTag.php");
}
function ajaxSubmit(formName,submitURL) {
	var code = document.getElementById('codeT').value;
	var postStr = "test="+code;
	var xmlHttp = false;
	if(window.ActiveXObject){
		xmlHttp = new ActiveXObject("Microsoft.XmlHttp");
	} else if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}
	xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4){
				if(xmlHttp.status==200){
				alert(xmlHttp.responseText);
				if (xmlHttp.responseText=="success") {
					formName.action = submitURL;
					formName.submit();
				} else {
					document.getElementById("error").innerHTML ="请输入正确的验证码。";
				}
				}
			}
	}
   var url="bbb.php";
   xmlHttp.open("post",url,true);
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlHttp.send(postStr);
}
function refresh() {
	document.getElementById("codeP").src = "picture.php?tm="+Math.random();
}
</script>
<form id="test" name="test" action="">
    <div id="error"></div>
    <div>
        <img id="codeP" src="picture.php" onclick="refresh()"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
    <div><input type="button" onclick="sub()" name="apply" id="apply" value="提交" /></div>
</form>

 以上提及了bbb.php里面的内容自己对照上面的js代码稍微想一下，其实很简单。就不贴了。有什么问题的话可以m我，有什么说的不对的地方，请不要客气。