有胆量你就来跟着路老师卷起来！-- 纯干货，技术知识分享

路老师给大家分享PHP语言的知识了，旨在想让大家入门PHP，并深入了解PHP语言。

 

入门PHP就来我这（高级）27 ~ 验证码绘制_开发语言

   上篇文章简单的介绍了PHP的图像处理技术，本文我们实现一个验证码生成技术的讲解并实现一个登录验证功能。

 1 生成验证码

验证码功能的实现方式很多，有数字验证码、图像验证码和文字验证码，今天我们使用的是图像生成的英文数字验证码。图像生成验证码常用于用户登录过程中。

1.1 创建verify.php

创建verify.php文件，用于生成验证码。第一步要先配置session存储。

//初始化session变量
  session_start();
  • 1.
  • 2.
1.2 定义验证码参数

接下来定义验证码的属性：

//图像宽和高
  $image_width = 100;
  $image_height = 30;
  //生成4个字符的验证码
  $length = 4;
  //验证码文字库不包含0 1 l o等易混淆的字符
  $str = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVW";
  $code = '';
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
1.3 选取随机4个字符

我们随机从$str中选取4个字符作为验证码，存储到Session中：

for($i = 0;$i<$length;$i++) {
    $code.=$str[mt_rand(0,strlen($str)-1)];
  }
  //将编码存储到session中
  $_SESSION["verify"] = $code;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
1.4 设置样式

此时验证码文字内容已经知道了，就需要展示到验证码图片上了。接下来是绘制图像部分代码：

//绘制图像
  $image = imagecreate($image_width,$image_height);
  //设置白色背景
  imagecolorallocate($image,255,255,255);
  //设置字体
  $fnt = "C:/Windows/Fonts/MTCORSVA.TTF";
  imageTTFText($image,30,0,15,35,$textcolor,$fnt,$code);
  //随机设置每个字符的大小和颜色
  for($i=0;$i<strlen($_SESSION["verify"]);$i++){
    $font = mt_rand(3,30);
    $x = mt_rand(2,6)+$image_width*$i/4;
    $y = mt_rand(6,$image_height/4);
    $color = imagecolorallocate($image,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
    imagestring($image,$font,$x,$y,$_SESSION["verify"][$i],$color);
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
1.5 干扰点

一般验证码里面都会有一些干扰点，同样我们也添加一些干扰点，并设置干扰点颜色：

//绘制干扰点元素
  $pixel = 30;
  $black = imagecolorallocate($image,0,200,0);
  for($i=0;$i<$pixel;$i++){
    imagesetpixel($image,mt_rand(0,$image_width-1),mt_rand(0,$image_height-1),$black);
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
1.6 产品出炉

最后，指定图像生成格式并生成验证码：

// 告诉浏览器该页面的内容是一张图片
  header('Content-Type: image/png');
  imagepng($image);
  imagedestroy($image);
  • 1.
  • 2.
  • 3.
  • 4.
1.7 效果展示

这样，验证码就能够生成出来了，看效果：

入门PHP就来我这（高级）27 ~ 验证码绘制_php基础_02

2 验证码使用

2.1 创建login.php

创建登录文件，并将验证码放进去：

<!DOCTYPE html>
<html lang="en" class="is-centered is-bold">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link href="css/login.css" rel="stylesheet">
</head>
<body>
  <section style="background: transparent;">
    <form class="box py-3 px-4 px-2-mobile"  role="form"  method="post" action="checklogin.php" onsubmit="return check()" >
   <div class="is-flex is-column is-justified-to-center">
    <h1 class="title is-3 mb-a has-text-centered">
        登录
    </h1>
    <div class="inputs-wrap py-3">
      <div class="control">
        <input class="input" type="text" id="username" name="username" placeholder="用户名"   required></input>
      </div>
      <div class="control">
        <input class="input" type="password" id="password" name="password" placeholder="密码"   required></input>
      </div>
      <div class="control">

        <input class="input" type="text" id="verify" name="verify" placeholder="验证码" style="width:80px;"  required></input>
        <a href="javascript:;" style="vertical-align: middle;">
          <!-- 显示验证码，点击重新生成验证码 -->
           <img src="verify.php" onClick="this.src=this.src+'?'+Math.random()">
        </a>
      </div>
      <div class="control">
        <button class="button is-submit is-primary is-outlined" type="submit">
          提交
        </button>
      </div>
    </div>
   </div>
    </form>
  </section>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

注意：核心代码在这里：

入门PHP就来我这（高级）27 ~ 验证码绘制_PHP基础知识_03

 效果如下：

入门PHP就来我这（高级）27 ~ 验证码绘制_开发语言_04

2.2 编写checkLogin.php

顾名思义，是校验登录和验证码的逻辑文件：

<?php 
  //启动Session
  session_start();
  header('Content-Type: text/html; charset=utf-8');
  if(isset($_POST['username']) && isset($_POST['password'])){
    $username = trim($_POST['username']);
    $password = md5(trim($_POST['password']));
    require "config.php";
    try {
      $pdo = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER,DB_PWD);

    } catch (PDOException $e) {
      echo $e->getMessage();
    }
    $check = trim($_POST["verify"]);
    if($check == ''){
      echo "<script>alert('验证码不能为空!');
      window.location.href='login.php';</script>";
    }
    if($check == $_SESSION['verify']){
      $sql = 'select * from users where username = :username and password = :password';
      $result = $pdo->prepare($sql);
      $result->bindParam(':username',$username);
      $result->bindParam(':password',$password);
      if($result->execute()){
          $rows=$result->fetch(PDO::FETCH_ASSOC);
          if($rows){
            $_SESSION['username']=$rows['username'];
            echo "<script>alert('恭喜您，登录成功！');
            window.location.href='index1.php';</script>";
          }else{
            echo "<script>alert('用户名或密码错误，登录失败！');
            history.back();</script>";
            exit();
          }
      }else{
        echo "<script>window.location.href='login.php';</script>";
      }

    } else{
      echo "<script>alert('验证码输入不正确!');
      window.location.href='login.php';</script>";
    }

    
  }
 
?>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
2.3 登录成功页面
<?php
date_default_timezone_set('PRC');
session_start();
//如果cookie不存在，那就是第一次访问网站
if(!isset($_SESSION["username"])){
    echo "<script>alert('请先登录');
           window.location.href='login.php';</script>";
}  
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
    <div class="jumbotron" style="background-color:#b1f1f3">
       <h1>
          <span style="color:white;font-weight:700">
            <?php echo $_SESSION['username']; ?>

          </span>
          大佬，你好厉害！
       </h1>
       <p><a  class="btn btn-warning btn-lg" href="logout.php" role="button">退出登录</a></p>
    </div>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
2.4 操作案例

1 验证码输入框里输入一个空格，点击登录：

入门PHP就来我这（高级）27 ~ 验证码绘制_面向对象_05

返回结果提示，验证码不能为空

入门PHP就来我这（高级）27 ~ 验证码绘制_面向对象_06

2 输入验证码错误的时候 

入门PHP就来我这（高级）27 ~ 验证码绘制_php_07

提示验证码输入不正确 

入门PHP就来我这（高级）27 ~ 验证码绘制_PHP基础知识_08

3 输入正确的验证码后 

入门PHP就来我这（高级）27 ~ 验证码绘制_面向对象_09

 成功登录，并进入index.php页面

入门PHP就来我这（高级）27 ~ 验证码绘制_php基础_10

 下一篇 JpGraph图像绘制库