码上欢乐
相关内容   简体   繁体

基于PHP实现用户注册登录功能

本文转载自  查看原文  2017-12-16 15:29  2842    PHP

本文介绍的是基于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 的函数很多，不要死记硬背，多看官方文档。


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 Django实现用户注册登录 利用PHP连接数据库——实现用户登录注册功能以及管理员对用户注册的审核功能 简单使用JDBC和Servlet实现用户注册和登录功能 Flask 实现用户注册/登录表单 DjangoRestFramework实现用户注册 使用Servlet实现用户注册 jsp+servlet+Tomcat+mysql实现用户注册、登录、查看、修改实例之——用户注册 PHP注册与登录【2】用户注册 java实现用户登录注册功能(用集合框架来实现) koa2+mysql+vue实现用户注册、登录、token验证
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM