有胆量你就来跟着路老师卷起来！ -- 纯干货，技术知识分享
路老师给大家分享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
创建登录文件，并将验证码放进去：
<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
顾名思义，是校验登录和验证码的逻辑文件：
//启动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 登录成功页面
date_default_timezone_set('PRC'); session_start(); //如果cookie不存在，那就是第一次访问网站 if(!isset($_SESSION["username"])){ echo "<script>alert('请先登录'); window.location.href='login.php';</script>"; } <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"> echo $_SESSION['username']; </span> 大佬，你好厉害！ </h1> <p><a class="btn btn-warning btn-lg" href="logout.php" role="button">退出登录</a></p> </div> </body> </html>
2.4 操作案例
1 验证码输入框里输入一个空格，点击登录：
编辑
返回结果提示，验证码不能为空
编辑
2 输入验证码错误的时候
编辑
提示验证码输入不正确
编辑
3 输入正确的验证码后
编辑
成功登录，并进入index.php页面
编辑
下一篇 JpGraph图像绘制库
