领购物优惠券9块9包邮
首页 > 编程语言 > PHP教程

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

   2015-09-03 0
核心提示：本文主要是对上一篇文章模进行改进，把验证码写入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.phpnum=<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.phpnum=<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.phpnum="+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
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • php-fpm进程管理的三种模式 phpfpm子进程
    php-fpm进程管理的三种模式 phpfpm子进程
    php-fpm解读-进程管理的三种模式—程序媛大丽标明转载以示尊重 感谢原作者的分享。php-fpm进程管理一共有三种模式：ondemand、static、dynamic，我们可以在同一个fpm的master配置三种模式，看下图1。php-fpm的工作模式和nginx类似，都是一个master，多个worke
    03-08
  • nginx和php-fpm 是使用 tcp socket 还是 unix s
    tcp socket允许通过网络进程之间的通信，也可以通过loopback进行本地进程之间通信。unix socket允许在本地运行的进程之间进行通信。分析从上面的图片可以看，unix socket减少了不必要的tcp开销，而tcp需要经过loopback，还要申请临时端口和tcp相关资源。但是
    03-08
  • [PHP8] 我参加了PHP8工程师认证初学者考试beta考试
    [PHP8] 我参加了PHP8工程师认证初学者考试beta
    前几天，2022/08/05，PHP工程师认证机构PHP8 技术员认证初级考试宣布实施考试将于 2023 年春季开始。和 beta 测试完成于 2022/09/11所以我收到了。一般社团法人BOSS-CON JAPAN（代表理事：Tadashi Yoshimasa，地点：东京都世田谷区，以下简称“BOSS-CON JAPAN
    03-08
  • 将 PHP Insights 放入旧版 PJ 不是很好吗？谈论
    将 PHP Insights 放入旧版 PJ 不是很好吗？谈论
    介绍在最近的PHP系统开发中，感觉故事在理所当然包含静态分析工具的前提下进行。我的周围现有代码很脏，我很久以前安装了工具，但几乎没有检查已经观察到许多这样的案例。 （这是小说。而不是像 0 或 100 这样不允许单行错误的静态分析，一点一点，逐渐我想介
    03-08
  • PHP基于elasticsearch全文搜索引擎的开发 php使
    1.概述：全文搜索属于最常见的需求，开源的 Elasticsearch （以下简称 Elastic）是目前全文搜索引擎的首选。Elastic 的底层是开源库 Lucene。但是，你没法直接用 Lucene，必须自己写代码去调用它的接口。Elastic 是 Lucene 的封装，提供了 REST API 的操作接
    02-09
  • php视图操作
    一、视图的基本介绍         视图是虚拟的表。与包含数据的表不一样，视图只包含使用时动态检索数据的查询。        使用视图需要MySQL5及以后的版本支持。        下面是视图的一些常见应用：        重用SQL语句；        简化复杂的S
    02-09
  • php中图像处理的常用函数 php图形图像处理技术
    php中图像处理的常用函数 php图形图像处理技术
    1.imagecreate()函数imagecreate()函数是基于一个调色板的画布。?php $im = imagecreate(200,80);　　　　　　　　　　　　　　　　//创建一个宽200，高80的画布。$white = imagecolorallocate($im,225,35,180);　　　　　//设置画布的背景颜色imagegif($im);
    02-09
  • PHP安全之webshell和后门检测
    PHP安全之webshell和后门检测
    基于PHP的应用面临着各种各样的攻击：XSS：对PHP的Web应用而言，跨站脚本是一个易受攻击的点。攻击者可以利用它盗取用户信息。你可以配置Apache，或是写更安全的PHP代码（验证所有用户输入）来防范XSS攻击SQL注入：这是PHP应用中，数据库层的易受攻击点。防范
    02-09
  • php使用时间戳保存时间的意义 PHP获取时间戳
    时间戳记录的是格林尼治时间，使用date格式化的时候会根据你程序设置的不同时区显示不同的时间。如果使用具体时间，则还需要进行多一步转换。
    02-09
  • PHP 获取提交表单数据方法
    PHP $_GET 和 $_POST变量是用来获取表单中的信息的，比如用户输入的信息。PHP表单操作在我们处理HTML表单和PHP表单时，我们要记住的重要一点是：HTML页面中的任何一个表单元素都可以自动的用于PHP脚本：表单举例： htmlbodyform action="welcome.php" method
    02-09
更多>PHP教程
php-fpm进程管理的三种模式 phpfpm子进程 [PHP8] 我参加了PHP8工程师认证初学者考试beta考试
更多>C/C++教程
VScode运行C++中文终端乱码的解决方案 vscode错误提示中文 C++ LeetCode1945题解字符串转化后的各位数字之和
更多>Java教程
Java项目导出数据为 PDF 文件的操作代码 盘点Java中延时任务的多种实现方式 java 延时队列怎么实现
更多>ASP.NET
使用WebClient自动填写并提交ASP.NET页面表单的源代码 asp.net mvc多条件+分页查询解决方案 asp.net mvc多条件+分页查询解决方案
更多>JSP编程
JSP通用高大上分页代码(超管用) JSP验证码动态生成方法
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报