有胆量你就来跟着路老师卷起来! -- 纯干货,技术知识分享
路老师给大家分享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>
2.4 操作案例
1 验证码输入框里输入一个空格,点击登录:
返回结果提示,验证码不能为空
2 输入验证码错误的时候
提示验证码输入不正确
3 输入正确的验证码后
成功登录,并进入index.php页面
下一篇 JpGraph图像绘制库