PHP+jQuery 注册模块的改进之一：验证码存入SESSION

/*
******* Date：2014-09-28
******* Author：小dee
******* Blog：http://www.cnblogs.com/dee0912/*/

对上一篇博文模进行改进，把验证码写入SESSION而不是把验证码的文字返回客户端的隐藏域，否则验证码的意义就不复存在啦

需要修改的几个文件：

①register.php 生成随机数和加密值

把register.html改为register.php，并开启session；

把register.js中生成随机数的函数写在register.php中，并改用php方法

 <?php session_start();?>
 ....
 <?php 

     //生成随机数函数
     function showval(){

         $num = "";
         for($i=0;$i<4;$i++){

             $tmp = rand(1,15);
             if ($tmp > 9) {
                 switch ($tmp) {
                     case(10):
                         $num .= 'a';
                         break;
                     case(11):
                         $num .= 'b';
                         break;
                     case(12):
                         $num .= 'c';
                         break;
                     case(13):
                         $num .= 'd';
                         break;
                     case(14):
                         $num .= 'e';
                         break;
                     case(15):
                         $num .= 'f';
                         break;
                     }
                 } else {
                     $num .= $tmp;
                     }
                 }
             return $num;
         }

     //生成随机数
     $mdnum = md5(showval());

     //把随机数和经过加密的随机数都存入session
     $_SESSION['num'] = showval();
     $_SESSION['mdnum'] = $mdnum;
 ?>
     <!--验证码-->
     <div class="ipt iptend">
         <input type='text' id='yzm' name='yzm' placeholder="验证码" autocomplete="off" />
         <img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' style="cursor:pointer" title="验证码" alt="验证码">
         <a style="cursor:pointer" id='changea'>
             <img id="refpic" src="templets/images/ref.jpg" alt="刷新验证码">
         </a>
         <span id='yzmchk'></span>
     </div>        

把生成的4位验证码和经过md5加密的验证码都存入session，而客户端验证码图片的src属性的参数则是那个加密过的值，因此在客户端不会出现四位验证码的文字。

②valcode.php 把随机数写入图形

在register.php中，验证码图片的地址是

<img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' style="cursor:pointer">

因此在valcode.php中，需要做相应修改，修改之处是把原来的：

//直接传送客户端输入的值
$num = $_GET['num'];

修改为：

 session_start();
 header("content-type:image/png");

     //session中保存生成的4位随机数和经过ms5加密的随机数
     if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){

         $mdnum = $_SESSION['mdnum'];

         if(isset($_GET['num']) && $_GET['num']!=""){

             //当注册页传递过来的num和session中经过加密的随机数相等时
             if($_GET['num'] == $mdnum){

                 if(isset($_SESSION['num']) && $_SESSION['num']!="")

                     //把session中保存的4位随机数赋给$num
                     $num = $_SESSION['num'];
             }
         }
 }

即客户端图片传递过来的加密的参数同session中保存的加密过的值相同时，就把session中保存的4位验证码写入图形。

valcode.php的完整代码为：

 <?php 

     session_start();
     header("content-type:image/png");

     //session中保存生成的4位随机数和经过ms5加密的随机数
     if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){

         $mdnum = $_SESSION['mdnum'];

         if(isset($_GET['num']) && $_GET['num']!=""){

             //当注册页传递过来的num和session中经过加密的随机数相等时
             if($_GET['num'] == $mdnum){

                 if(isset($_SESSION['num']) && $_SESSION['num']!="")

                     //把session中保存的4位随机数赋给$num
                     $num = $_SESSION['num'];
             }
         }
     }

     $imagewidth = 150;
     $imageheight = 54;

     //创建图像
     $numimage = imagecreate($imagewidth, $imageheight);

     //为图像分配颜色
     imagecolorallocate($numimage, 240,240,240); 

     //字体大小
     $font_size = 33;

     //字体名称
     $fontname = 'arial.ttf';

     //循环生成图片文字
     for($i = 0;$i<strlen($num);$i++){

         //获取文字左上角x坐标
         $x = mt_rand(20,20) + $imagewidth*$i/5;

         //获取文字左上角y坐标
         $y = mt_rand(40, $imageheight);

         //为文字分配颜色
         $color = imagecolorallocate($numimage, mt_rand(0,150),  mt_rand(0,150),  mt_rand(0,150));

         //写入文字
         imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]);
     }

     //生成干扰码
     for($i = 0;$i<2200;$i++){
         $randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255));
         imagesetpixel($numimage, rand()%180, rand()%90, $randcolor);
     }

     //输出图片
     imagepng($numimage);
     imagedestroy($numimage);

 ?>

③register.js进行验证

验证部分改为使用Ajax进行验证，把输入的4位验证码传递给chkyzm.php文件，和session中保存的4位验证码进行对比。

刷新图片时，重新生成4位验证码，并和加密验证码一起写入session。重新生成验证码的代码写在了refresh.php中，并在register.js中使用ajax来请求重新生产的4位验证码和加密验证码，并通过jQuery把加密验证码的值作为图片的src属性的参数，经过参数和session比对后valcode.php会重新生成4位验证码的图片

register.js验证码部分的代码为：

 //验证码按钮
 $("#refpic").hover(function(){

             $(this).attr("src","templets/images/refhover.jpg");
         },function(){

             $(this).attr("src","templets/images/ref.jpg");
         }).mousedown(function(){

             $(this).attr("src","templets/images/refclick.jpg");
         }).mouseup(function(){

             $(this).attr("src","templets/images/ref.jpg");
         });

         //刷新验证码
         function postyzm(){

             $.post("./../refresh.php",function(data,textStatus){

                 $('#yzmpic').attr("src","valcode.php?num="+data);
             })
         }

         $('#yzmpic').click(function(){

             postyzm();
         });

          $('#changea').click(function(){

             postyzm();
         });

         //验证码检验
         function yzmchk(){

             $.post("./../chkyzm.php",{

                 //要传递的数据
                 yzm : $("#yzm").val()
             },function(data,textStatus){

                 if(data == 0){

                     success($("#yzmchk"),"");
                     yzmval = true;
                 }else if(data == 1){

                     var noticeMsg = '验证码不能为空';
                     notice($("#yzmchk"),noticeMsg);
                 }else{

                     var errorMsg = '请输入正确的验证码';
                     error($("#yzmchk"),errorMsg);
                 }
             });

         }

         //验证码的blur事件
         $("#yzm").focus(function(){

             var noticeMsg = '不区分大小写';
             notice($("#yzmchk"),noticeMsg);
         }).click(function(){

             var noticeMsg = '不区分大小写';
             notice($("yzmdchk"),noticeMsg);
         }).keydown(function(){

             if(event.keyCode == 13){                

                 //检验
                 yzmchk();
             }
         }).keyup(function(){

             if(event.keyCode == 13){                

                 //提交
                 formsub();
             }
         }).blur(function(){

             yzmchk();
 });

chkyzm.php

 <?php
 session_start();
 header("charset=utf-8");

 if(isset($_POST['yzm']) && $_POST['yzm']!=""){

     $yzm = $_POST['yzm'];

     if(isset($_SESSION['num']) && $_SESSION['num']!=""){

         //当输入的验证码和session里保存的num一致时
         if(strtolower($yzm) == $_SESSION['num']){

             //输入正确
             $state = 0;
         }else{

             //输入错误
             $state = 2;
         }
     }
 }else{    

     //没有输入
     $state = 1;
 }
 echo $state;
 ?>

refresh.php

<?php 

session_start();

//生成验证码
function showval(){

    $num = "";
    for($i=0;$i<4;$i++){

        $tmp = rand(1,15);
        if ($tmp > 9) {
            switch ($tmp) {
                case(10):
                    $num .= 'a';
                    break;
                case(11):
                    $num .= 'b';
                    break;
                case(12):
                    $num .= 'c';
                    break;
                case(13):
                    $num .= 'd';
                    break;
                case(14):
                    $num .= 'e';
                    break;
                case(15):
                    $num .= 'f';
                    break;
            }
        } else {
            $num .= $tmp;
        }
    }
    return $num;
}

$_SESSION['num'] = showval();
$_SESSION['mdnum'] = md5(showval());

echo $_SESSION['mdnum'];

显示的效果如图：

总结：

5个步骤：把4位验证码写入session再生成图片，客户端图片的参数使用加密的验证码，把输入的字符同SESSION中的4位验证码进行比对，刷新图片重新生成4位验证码并存入session，把重新生产的加密验证码作为图片的src参数

用图可表示为：

（未完待续）

作者：小dee

出处：http://www.cnblogs.com/dee0912/

说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！