[聚合文章] PHP 实现验证码制作（二）

PHP 验证码校验实例

一、实验介绍

1.1 实验内容

通过上节课的学习，相信你，也一定想大展身手一番。正如你所愿，本次实验就是对上节课的验证码的校验实例。本次实验的内容，由于是初级教程，所以在此并没有使用框架，而是用原生的PHP，在登录页面进行验证码的校验。

1.2 实验知识点

• 编写 HTML 页面，在页面中创建一个表单，用于输入用户登录信息和验证码
• 使用上节课封装好的 ValidateCode 验证码类
• 利用尝过的 Session 技术验证用户提交的验证码
• 使用 jquery 技术在不刷新页面的情况下，更换验证码，优化用户体验
• 使用 ajax 技术进行数据传递

1.3 实验环境

• 实验楼在线环境：Ubuntu 14.04.5
• apache: apache 2.4.7
• PHP：PHP5.5.9
• 代码编辑器：可使用在线环境Brackets 文本编辑器。

1.4 适合人群

本课程难度为一般，属于初级级别课程，适合具有PHP基础的用户，熟悉PHP基础知识加深巩固。

1.5 代码获取

你可以通过下面命令将代码下载到实验楼环境中，作为参照对比进行学习。

$ wget http://labfile.oss.aliyuncs.com/courses/986/jiaoyanshili.zip

二、实验原理

在上一节实验课中我们已经实现了，相对淡一点颜色的部分，相对鲜艳的部分就是这节课需要实现的。通过 SESSION 存储验证码内容，即在服务端记录验证码信息，与之用户输入的验证码进行校验。

三、开发准备

首先打开 Xfce 终端，启动服务

启动 Apache 服务器:

$ sudo service apache2 start;

我们使用的是 Apache 服务器，所以为了访问的方便，我们需要将我们的代码文件放到它的根目录下。 Apache 默认的web根目录位于 /var/www/html 。因为我们要在该目录下写入文件，所以首先我们需要修改 html 目录的权限：

$ sudo chmod -R 777 /var/www/html

首先进入 /var/www/html 目录

$ cd /var/www/html

然后再下载压缩包

保存上节实验环境下载这个压缩包：

$ wget http://labfile.oss.aliyuncs.com/courses/986/save.zip

没有保存上节实验环境下载这个压缩包

$ wget http://labfile.oss.aliyuncs.com/courses/986/noSave.zip

再就是解压你所下载的压缩包 save.zip 或 noSave.zip

$ unzip 压缩包

四、项目文件结构

五、实验步骤

5.1 添加验证码到HTML页面

首先可以通过 火狐浏览器 ，输入 localhost/login.php 进入登录页面。

然而此时的验证码仅仅是 yanzhengma.png 图片，点击图片也不会变换心得验证码。同时输入账号密码以及验证码点击登录也没有什么反应。因为，这是静态页面。

首先就是把这张验证码图片替换成动态生成的真实验证码。

通过 Brackets 编辑器打开文件夹 /var/www/html

编辑 文件 login.php

·
    ·
    ·
    <div class="input-group" >

        <input type="text" name="validateCode" class="form-control" placeholder="请输入验证码" >
        <img src="validateCode.php" id="oimg">
    </div><br>
    ·
    ·
    ·

为了保持文章的篇幅简洁，我会将一些不必要的代码使用竖排的 . 来代替，你在复制本文代码块的时候，切记不要将 . 也一同复制进去。切记在使用的时候记得比对自己现已有的代码。只需要复制所需要的代码即可。

通过编辑我们仅仅改变了 img 标签的路径为 validateCode.php

此时可以在火狐浏览器刷新页面 localhost/login.php 可以看到验证码的动态变化。

发现显示的动态验证码，样式有点不协调，需要调整一下。

所以要 修改 文件 validateCode.php

<?php
// 调用ValidateCode类
include 'ValidateCode.class.php';

//实例化ValidateCode类，同时调用doimg方法生成验证码
$validateCode = new ValidateCode($height = 110, $width = 33);
$validateCode->doimg();
?>

进过调试 height 为110， width 为33较为合适，你也可以自行调试你认为合适。打开 火狐浏览器 刷新。

此时你会发现我只能刷新整个页面才能使得验证码才可以刷新。点击验证码图片而不能使其发生变化。

接下来就使用jquery技术在不刷新页面的情况下，更换验证码，优化用户体验

编辑 文件 login.php

·
    ·
    ·
</body>   
<script type="text/javascript">
    // 点击验证码图片使之产生新的随机验证码
    $('#oimg').click(function () {
        $(this).attr('src', 'validateCode.php?random=' + Math.random());
    });    
</script>
</html>

在 body 标签下，添加 jquery 代码。该代码的目的是通过 click 点击事件绑定在id选择器 oimg ,使得 img 标签的 src 发生变化。路径后面携带了 random 参数，通过数学随机数来使得每次点击刷新出来的 ValidateCode.php 页面都不一样。

此时你可以再次刷新页面来点击图片尝试一下。

5.2 验证码的校验

已经实现了验证码的显示，接下来就是对服务端存储的该端字符与用户输入的验证码进行比对校验。

首先对服务端的这段字符保存在session中。

编辑 文件 ValidateCode.class.php

定义 并 实现 方法 getCode

<?php
class ValidateCode
{
    ·
    ·
    ·

    public function getCode()
    {
        return strtolower($this->code);
    }
}

编辑 文件 validateCode.php

<?php
//前面不能有输出，因此至于顶部
session_start();
// 调用ValidateCode类
include 'ValidateCode.class.php';

//实例化ValidateCode类，同时调用doimg方法生成验证码
$validateCode = new ValidateCode($height = 110, $width = 33);
// 把该端字符保存在session中，用于校验
$code = $validateCode->getCode();

$_SESSION['session_validate_code'] = $code;
$validateCode->doimg();
?>

然后是通过 jquery 语法的 ajax 对数据传输。

编辑 文件 login.php

如果你是通过复制代码粘贴到 剪切板 里，然后粘贴到 Brackets 编辑器中，会对中文会为 ??? 的形式显示。所以需要将一下代码的中文部分需要你自己用在线环境里输入法打出来。

·
    ·
    ·
    <div >
         <input class="form-control btn btn-info" type="button" onclick="onLoginClick()" value="登录"/>
    </div>
    ·
    ·
    ·
</body>   
<script type="text/javascript">
    ·
    ·
    ·

    function onLoginClick() {
    // 帐号、验证码
    var username = $('input[name=username]').val();
    var password = $('input[name=password]').val();
    var validateCode = $('input[name=validateCode]').val();
      $.ajax({
      type: "POST",
      url: 'loginController.php',
      dataType: 'json',
      cache: false,
      data: {username: username, password: password, validateCode: validateCode},
      success: function(data) {
      if(data == '0'){
        alert('验证码错误！');
      }else if(data == '00'){
        alert('账号或密码错误！');
      }else{
        location.href = "https://www.shiyanlou.com/";
      }
      },
      error: function(xhr, status, error) {
        console.log(xhr);
        console.log(status);
        console.log(error);
      }
    });
}
</script>
</html>

通过在 登录 按钮加入点击事件 onclick 触发 onLoginClick 函数,传到 loginController.php 文件,然后 loginController.php 文件返回有关数据，来对数据进行交互。

再就是通过 Brackets 编辑器，创建 loginController.php 文件。用于对传过来的数据进行校验并通过 ajax 返回数据。

由于我们本次实验的重心是在比对校验验证码，所以用户名和密码就不创建数据库，然后比对校验。规定正确的用户名 username 为 shiyanlou ，同时密码 password 也为 shiyanlou

在 loginController.php 文件中

<?php
//前面不能有输出，因此至于顶部
session_start();
// 接收ajax传递过来的数据
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

// 接收到的验证码，全部转换为小写
$validateCode = strtolower($_REQUEST['validateCode']);

// 首先判断验证码是否存在
if(!isset($_SESSION['session_validate_code'])){
  echo json_encode('0');
  exit;
}
//取出保存在类属性code中的这段字符
$session_validate_code = $_SESSION['session_validate_code'];

// 进行对比校验
if($validateCode != $session_validate_code){
  echo json_encode('0');
  exit;
}

//账号密码校验默认为shiyanlou
if($username != 'shiyanlou' || $password != 'shiyanlou'){
  echo json_encode('00');
  exit;
}

// 销毁保存在session中的本次验证码
if(isset($_SESSION['session_validate_code'])){
  unset($_SESSION['session_validate_code']);
}

echo json_encode('1');
?>

验证码、用户名以及密码都正确后，会跳转到 实验楼首页

六、实验总结

相信对本次实验的过后对于验证码的操作，有了一定的了解。编程是技能，不是知识，技能只有在不断练习下才会有进步。你的编码学习之路，只能从你敲打下第一行代码开始。这个有点像学打篮球，我们知道，看再多的 NBA视频，你都无法成为篮球高手。你的篮球学习，只有当你站着球场上，真真实实地拍打篮球，才算开始。刻意练习需要有反馈，在重复练习时，挑战自己：做完一次实验需要多久的时间，以及可以自己找几个差不多的项目，进行对验证码这部分的实现。起初可能你还需要依赖教程，通过自己多练习几遍后，你会发现潜意识知道该做什么。这就说明你的练习在不知不觉中提升了自己编写验证码这部分的能力。

七、参考链接

• PHP实现验证码的制作与校验