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

发布时间：2020-12-12 20:25:22 所属栏目：PHP教程来源：网络整理

导读：需要修改的几个文件： ①register.php 生成随机数和加密值把register.html改为register.php，并开启session；把register.js中生成随机数的函数写在register.php中，并改用php方法 .... //生成随机数函数 function showval(){ $num = "";for($i=0;$i4;$i++)

需要修改的几个文件：

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

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

把register.js中生成随机数的函数写在register.php中，并改用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;
?>

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

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

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

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

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

修改为：

//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的完整代码为：

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);

//字体大小
$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),150));

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

}

//生成干扰码
for($i = 0;$i<2200;$i++){
$randcolor = imagecolorallocate($numimage,rand(200,255),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位验证码的图片

  $(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()
  },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

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

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参数

用图可表示为：

（未完待续）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!