本文介绍的是基于PHP实现用户注册登录功能,本项目分为四部分内容:1前端页面制作,2验证码制作,3实现注册登陆,4功能完善。具体情况可以往下看。
验证码制作
一、实验简介
本次实验将会带领大家使用面向对象的思想封装一个验证码类。并在注册和登陆界面展示使用。通过本次实验的学习,你将会领悟到 PHP 的 OOP 思想,以及 GD 库的使用,验证码生成。
1.1 涉及到的知识点
- PHP
- GD库
- OOP编程
1.2 开发工具
sublime,一个方便快速的文本编辑器。点击桌面左下角: 应用程序菜单/开发/sublime
二、封装验证码类
2.1 建立目录以及准备字体
在 web 目录下建立一个 admin 目录作为我们的后台目录,存放后台代码文件。在 admin 下建立一个 fonts 目录,用于存放制作验证码所需字体。
在 admin 下新建一个 Captcha.php 文件,这就是我们需要编辑的验证码类文件。
当前目录层次结构:
编辑 Captcha.php 文件:
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
/**
* Captcha class
*/
class Captcha
{
function __construct()
{
# code...
}
}
|
添加该类的私有属性和构造方法:
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
|
<?php
/**
* Captcha class
*/
class Captcha
{
private $codeNum ; //验证码位数
private $width ; //验证码图片宽度
private $height ; //验证码图片高度
private $img ; //图像资源句柄
private $lineFlag ; //是否生成干扰线条
private $piexFlag ; //是否生成干扰点
private $fontSize ; //字体大小
private $code ; //验证码字符
private $string ; //生成验证码的字符集
private $font ; //字体
function __construct( $codeNum = 4, $height = 50, $width = 150, $fontSize = 20, $lineFlag = true, $piexFlag = true)
{
$this ->string = 'qwertyupmkjnhbgvfcdsxa123456789' ; //去除一些相近的字符
$this ->codeNum = $codeNum ;
$this ->height = $height ;
$this ->width = $width ;
$this ->lineFlag = $lineFlag ;
$this ->piexFlag = $piexFlag ;
$this ->font = dirname( __FILE__ ). '/fonts/consola.ttf' ;
$this ->fontSize = $fontSize ;
}
}
|
字体文件可通过以下命令下载到 fonts 目录:
$ wget http://labfile.oss.aliyuncs.com/courses/587/consola.ttf
接下来开始编写具体的方法:
创建图像资源句柄
1
2
3
4
5
|
//创建图像资源
public function createImage(){
$this ->img = imagecreate( $this ->width, $this ->height); //创建图像资源
imagecolorallocate( $this ->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100)); //填充图像背景(使用浅色)
}
|
用到的相关函数
- imagecreate:新建一个基于调色板的图像
- imagecolorallocate:为一幅图像分配颜色
- mt_rand:生成更好的随机数
创建验证码字符串并输出到图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//创建验证码
public function createCode(){
$strlen = strlen ( $this ->string)-1;
for ( $i =0; $i < $this ->codeNum; $i ++) {
$this ->code .= $this ->string[mt_rand(0, $strlen )]; //从字符集中随机取出四个字符拼接
}
$_SESSION [ 'code' ] = $this ->code; //加入 session 中
//计算每个字符间距
$diff = $this ->width/ $this ->codeNum;
for ( $i =0; $i < $this ->codeNum; $i ++) {
//为每个字符生成颜色(使用深色)
$txtColor = imagecolorallocate( $this ->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
//写入图像
imagettftext( $this ->img, $this ->fontSize, mt_rand(-30,30), $diff * $i +mt_rand(3,8), mt_rand(20, $this ->height-10), $txtColor , $this ->font, $this ->code[ $i ]);
}
}
|
用到的相关函数
- imagecreate:新建一个基于调色板的图像
- imagecolorallocate:为一幅图像分配颜色
- mt_rand:生成更好的随机数
创建验证码字符串并输出到图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//创建验证码
public function createCode(){
$strlen = strlen ( $this ->string)-1;
for ( $i =0; $i < $this ->codeNum; $i ++) {
$this ->code .= $this ->string[mt_rand(0, $strlen )]; //从字符集中随机取出四个字符拼接
}
$_SESSION [ 'code' ] = $this ->code; //加入 session 中
//计算每个字符间距
$diff = $this ->width/ $this ->codeNum;
for ( $i =0; $i < $this ->codeNum; $i ++) {
//为每个字符生成颜色(使用深色)
$txtColor = imagecolorallocate( $this ->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
//写入图像
imagettftext( $this ->img, $this ->fontSize, mt_rand(-30,30), $diff * $i +mt_rand(3,8), mt_rand(20, $this ->height-10), $txtColor , $this ->font, $this ->code[ $i ]);
}
}
|
用到的相关函数:
- imagettftext:用 TrueType 字体向图像写入文本
创建干扰线条
1
2
3
4
5
6
7
|
//创建干扰线条(默认四条)
public function createLines(){
for ( $i =0; $i < 4; $i ++) {
$color = imagecolorallocate( $this ->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155)); //使用浅色
imageline( $this ->img,mt_rand(0, $this ->width),mt_rand(0, $this ->height),mt_rand(0, $this ->width),mt_rand(0, $this ->height), $color );
}
}
|
用到的相关函数:
- imageline:画一条线段
创建干扰点
1
2
3
4
5
6
7
|
//创建干扰点 (默认一百个点)
public function createPiex(){
for ( $i =0; $i < 100; $i ++) {
$color = imagecolorallocate( $this ->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
imagesetpixel( $this ->img,mt_rand(0, $this ->width),mt_rand(0, $this ->height), $color );
}
}
|
使用的相关函数:
- imagesetpixel:画一个单一像素
对外输出图像:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
public function show()
{
$this ->createImage();
$this ->createCode();
if ( $this ->lineFlag) { //是否创建干扰线条
$this ->createLines();
}
if ( $this ->piexFlag) { //是否创建干扰点
$this ->createPiex();
}
header( 'Content-type:image/png' ); //请求页面的内容是png格式的图像
imagepng( $this ->img); //以png格式输出图像
imagedestroy( $this ->img); //清除图像资源,释放内存
}
|
用到的相关函数:
- imagepng:以 PNG 格式将图像输出到浏览器或文件
- imagedestroy:销毁一图像
对外提供验证码:
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
public function getCode(){
return $this ->code;
}
完整代码如下:
<?php
/**
* Captcha class
*/
class Captcha
{
private $codeNum ;
private $width ;
private $height ;
private $img ;
private $lineFlag ;
private $piexFlag ;
private $fontSize ;
private $code ;
private $string ;
private $font ;
function __construct( $codeNum = 4, $height = 50, $width = 150, $fontSize = 20, $lineFlag = true, $piexFlag = true)
{
$this ->string = 'qwertyupmkjnhbgvfcdsxa123456789' ;
$this ->codeNum = $codeNum ;
$this ->height = $height ;
$this ->width = $width ;
$this ->lineFlag = $lineFlag ;
$this ->piexFlag = $piexFlag ;
$this ->font = dirname( __FILE__ ). '/fonts/consola.ttf' ;
$this ->fontSize = $fontSize ;
}
public function createImage(){
$this ->img = imagecreate( $this ->width, $this ->height);
imagecolorallocate( $this ->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));
}
public function createCode(){
$strlen = strlen ( $this ->string)-1;
for ( $i =0; $i < $this ->codeNum; $i ++) {
$this ->code .= $this ->string[mt_rand(0, $strlen )];
}
$_SESSION [ 'code' ] = $this ->code;
$diff = $this ->width/ $this ->codeNum;
for ( $i =0; $i < $this ->codeNum; $i ++) {
$txtColor = imagecolorallocate( $this ->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
imagettftext( $this ->img, $this ->fontSize, mt_rand(-30,30), $diff * $i +mt_rand(3,8), mt_rand(20, $this ->height-10), $txtColor , $this ->font, $this ->code[ $i ]);
}
}
public function createLines(){
for ( $i =0; $i < 4; $i ++) {
$color = imagecolorallocate( $this ->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155));
imageline( $this ->img,mt_rand(0, $this ->width),mt_rand(0, $this ->height),mt_rand(0, $this ->width),mt_rand(0, $this ->height), $color );
}
}
public function createPiexs(){
for ( $i =0; $i < 100; $i ++) {
$color = imagecolorallocate( $this ->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
imagesetpixel( $this ->img,mt_rand(0, $this ->width),mt_rand(0, $this ->height), $color );
}
}
public function show()
{
$this ->createImage();
$this ->createCode();
if ( $this ->lineFlag) {
$this ->createLines();
}
if ( $this ->piexFlag) {
$this ->createPiexs();
}
header( 'Content-type:image/png' );
imagepng( $this ->img);
imagedestroy( $this ->img);
}
public function getCode(){
return $this ->code;
}
}
|
以上就是验证码类的全部代码。看起来确实挺简单的,不过用的图像处理函数比较多,上面相关的函数我也做了必要的链接和用途说明。这些函数也不用死记硬背,遇到不清楚的,随时查阅 PHP 官方文档,最重要的是还有中文文档。
2.2 使用验证码
既然已经封装完毕,那就可以开始使用了。这里为了方便,直接在 Captcha 类的下方调用该类:
1
2
3
|
session_start(); //开启session
$captcha = new Captcha(); //实例化验证码类(可自定义参数)
$captcha ->show(); //调用输出
|
三、前端展示
后端已经准备好了验证码,前端界面就可以展示了,修改 index.php 中的注册与登陆表单的验证码部分:
1
2
3
4
5
6
|
<div class = "form-group" >
<div class = "col-sm-12" >
<img src= "admin/Captcha.php" alt= "" id= "codeimg" onclick= "javascript:this.src = 'admin/Captcha.php?'+Math.random();" >
<span>Click to Switch</span>
</div>
</div>
|
img 标签添加了点击事件的 js 代码,这样就可以实现点击更换验证码的功能!
效果图:
四、完善
到目前为止,我们的验证码模块基本就完成了。学习到这里,大家应该对面向对象编程有了进一步的理解。也领悟到了一丝 OOP 思想。OOP 的三大特征:封装,继承,多态。我们这里只用到了一点封装的思想。大家可以继续完善和改进这个验证码类,设计出更加完美的类。这个实验也告诉我们,PHP 的函数很多,不要死记硬背,多看官方文档。