28 验证码绘制-阿里云开发者社区

28 验证码绘制

2024-11-15 156

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

RDS MySQL DuckDB 分析主实例，集群系列 4核8GB

RDS AI 助手，专业版

简介： 路老师分享了如何使用PHP生成验证码并实现登录验证功能。文章详细介绍了验证码的生成过程，包括创建 `verify.php` 文件、定义验证码参数、选取随机字符、设置样式、添加干扰点以及生成最终的验证码图像。此外，还展示了如何在登录页面 `login.php` 中使用验证码，并编写了 `checkLogin.php` 文件来校验用户输入的验证码和登录信息。最后，通过几个操作案例演示了验证码的有效性和登录流程。

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

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

编辑

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

1 生成验证码

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

1.1 创建verify.php

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

//初始化session变量
  session_start();

1.2 定义验证码参数

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

//图像宽和高
  $image_width = 100;
  $image_height = 30;
  //生成4个字符的验证码
  $length = 4;
  //验证码文字库不包含0 1 l o等易混淆的字符
  $str = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVW";
  $code = '';

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.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.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.6 产品出炉

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

// 告诉浏览器该页面的内容是一张图片
  header('Content-Type: image/png');
  imagepng($image);
  imagedestroy($image);

1.7 效果展示

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

编辑

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>

注意：核心代码在这里：

编辑

效果如下：

编辑

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>";
    }
    
  }
 
?>

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>