首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onOctober 14, 2014

需要修改的几个文件：

①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;?>' >

因此在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'];

显示的效果如图：

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

总结：

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

用图可表示为：

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

（未完待续）

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

- Author -

小dee

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
phpBB BBcode处理的漏洞
Oct 09 PHP
PHP simple_html_dom.php+正则 采集文章代码
Dec 24 PHP
PHP读取数据库并按照中文名称进行排序实现代码
Jan 29 PHP
在Win7 中为php扩展配置Xcache
Oct 08 PHP
php实现格式化多行文本为Js可用格式
Apr 15 PHP
php结合curl实现多线程抓取
Jul 09 PHP
FastCGI 进程意外退出造成500错误
Jul 26 PHP
分享五个PHP7性能优化提升技巧
Dec 07 PHP
php删除数组中重复元素的方法
Dec 22 PHP
PHP使用curl制作简易百度搜索
Nov 03 PHP
CI框架(CodeIgniter)操作redis的方法详解
Jan 25 PHP
php+laravel依赖注入知识点总结
Nov 04 PHP
PHP+jQuery 注册模块开发详解
Oct 14 #PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
Oct 14 #PHP
php中动态修改ini配置
Oct 14 #PHP
php中的ini配置原理详解
Oct 14 #PHP
9段PHP实用功能的代码推荐
Oct 14 #PHP
五款PHP代码重构工具推荐
Oct 14 #PHP
ThinkPHP 表单自动验证运用示例
Oct 13 #PHP
项目打包(2) vue-router-link(1) scss(1) KVM(1) 监听(2) Jmerte(1) TimePickerView(1) vue-cli3.x(1) watch(1) Yolov5(1)
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP的PDO连接讲解
2019/01/24 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）
2011/01/12 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
20招让你的Python飞起来!
2016/09/27 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
耐克波兰官方网站：Nike波兰
2019/09/03 全球购物
澳大利亚香水在线商店：City Perfume
2020/09/02 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
使用Python开发冰球小游戏
2022/04/30 Python