logo

Shellblock

php+mysql 实现简单登录页面(带验证码功能)

2021-09-08 Views 验证码 | php | mysql1827字10 min read

实现目标

1、登录界面
用户名输入框
密码输入框
验证码输入框
提交按钮

2、数据库新建一个用户表admin:
设置字段:

  • user
  • password

在数据库中手动添加一条用户记录

3、登录验证文件

  • 判断登录页面提交的用户名、密码和数据库中的用户名和密码比对,
  • 验证码和session中的验证码比对,
  • 判断提示登录成功或用户名错误、验证码错
登录界面

登录界面

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>登录</title>
  <style>
    body{
      font: 16px arial,'Microsoft Yahei','Hiragino Sans GB',sans-serif;
    }
    h1{
      margin: 0;
      color:#3a87ad;
      font-size: 26px;
    }
    .content{
      width: 45%;
      margin: 0 auto;
     
    }
    .content >div{
      margin-top: 200px;
      padding: 20px;
      background: #d9edf7;  
      border-radius: 12px;
    }
    .content dl{
      color: #2d6a88;
      line-height: 40px;
    } 
    .content div div {
      padding-bottom: 20px;
      text-align:center;
    }
  </style>
</head>
<body>
  <div class="content">
    <div>
    <form method="post" action="login.php">
      <div>用户名:<input type="text"  name="username"></div>
      <div>密码:<input type="password" name="password"></div>
      <div>验证码:<input type="text" name="verifycode" class="captcha"></div>
      <div>
        <img id="captcha_img" src="captcha.php?r=<?php echo rand();?>" alt="验证码">
        <label><a href="javascript:void(0)" rel="external nofollow" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">换一个</a> </label>
      </div>
      <div><input type="checkbox" name="autologin[]" value="1"/>自动登录</div><br>
  
      <div><button type="submit">登录</button></form></div>
    </form>
  </div>
  </div>
 </body>
</html>

验证码

captcha.php

<?php
/*PHP实现验证码*/
session_start();//开启会话
//创建画布
$image=imagecreatetruecolor(100,38);
//背景颜色
$bgcolor=imagecolorallocate($image,255,255,255);
imagefill($image,0,0,$bgcolor);
$captch_code='';//存储验证码
//随机选取4个数字
for($i=0;$i<4;$i++){
  $fontsize=10;    //
  $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//随机颜色
  $fontcontent=rand(0,9);
  $captch_code.=$fontcontent;
  $x=($i*100/4)+rand(5,10);  //随机坐标
  $y=rand(5,10);
  imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
/*//字母和数字混合验证码
for($i=0;$i<4;$i++) {
  $fontsize = 10;    //
  $fontcolor = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));//??????
  $data = 'abcdefghijklmnopqrstuvwxyz1234567890';  //数据字典
  $fontcontent = substr($data, rand(0, strlen($data)), 1);
  $captch_code.=$fontcontent;
  $x = ($i * 100 / 4) + rand(5, 10);
  $y = rand(5, 10);
  imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}*/
$_SESSION['code']=$captch_code;
//增加干扰点
for($i=0;$i<200;$i++){
  $pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
  imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);//
}
//增加干扰线
for($i=0;$i<3;$i++){
  $linecolor=imagecolorallocate($image,rand(80,280),rand(80,220),rand(80,220));
  imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
}
//输出格式
header('content-type:image.png');
imagepng($image);
//销毁图片
imagedestroy($image);
?>

登录验证

login.php

<?php
header("Content-type:text/html;charset=UTF-8");
require "conn.php";      //访问数据库
session_start();        //开启会话一获取到服务器端验证码
$username=$_POST['username'];
$password=$_POST['password'];
$autologin=isset($_POST['autologin'])?1:0;   //获取是否选择了自动登录
$verifycode=$_POST['verifycode'];
$code=$_SESSION['code'];    //获取服务器生成的验证码
/*
 * 首先进行判空操作,通过后进行验证码验证,通过后再进行数据库验证。
 * 手机号码和邮箱验证可根据需要自行添加
 * */
if(checkEmpty($username,$password,$verifycode)){
  if(checkVerifycode($verifycode,$code)){
    if(checkUser($username,$password)){
      $_SESSION['username']=$username; //保存此时登录成功的用户名
      if($autologin==1){        //如果用户勾选了自动登录就把用户名和加了密的密码放到cookie里面
        setcookie("username",$username,time()+3600*24*3);  //有效期设置为3天
        setcookie("password",md5($password),time()+3600*24*3);
      }
      else{
        setcookie("username","",time()-1);  //如果没有选择自动登录就清空cookie
        setcookie("password","",time()-1);
      }
      header("location: home.php ");      //全部验证都通过之后跳转到首页
    }
  }
}

//方法:判断是否为空
function checkEmpty($username,$password,$verifycode){
  if($username==null||$password==null){
    echo '<html><head><Script Language="JavaScript">alert("用户名或密码为空");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
  }
  else{
    if($verifycode==null){
      echo '<html><head><Script Language="JavaScript">alert("验证码为空");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
    }
    else{
      return true;
    }
  }
}
//方法:检查验证码是否正确
function checkVerifycode($verifycode,$code){
  if($verifycode==$code){
    return true;
  }
  else{
    echo '<html><head><Script Language="JavaScript">alert("验证码错误");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
  }
}
//方法:查询用户是否在数据库中
function checkUser($username,$password){
  $conn=new Mysql();
  $sql="select * from user where username='$username' and password='$password';";
  $result=$conn->sql($sql);
  if($result){
    return true;
  }
  else{
    echo '<html><head><Script Language="JavaScript">alert("用户不存在");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
  }
  $conn->close();//关闭数据库
}

//方法:手机格式验证
function checkPhoneNum($phonenumber){
  $preg="/^1[34578]{1}\d{9}$/";
  if(preg_match($preg,$phonenumber)){
    return ture; //验证通过
  }else{
    echo '<html><head><Script Language="JavaScript">alert("手机号码格式有误");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";//手机号码格式不对
  }
}
//方法:邮箱格式验证
function checkEmail($email){
  $preg = '/^(\w{1,25})@(\w{1,16})(\.(\w{1,4})){1,3}$/';
  if(preg_match($preg, $email)){
    return true;
  }else{
    echo '<html><head><Script Language="JavaScript">alert("邮箱格式有误");</Script></head></html>' . "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
  }
}

数据库连接

conn.php

<?php
class Mysql{
     private static $host="localhost";
     private static $user="root";
     private static $password="23102310";
     private static $dbName="chat";           //数据库名
     private static $charset="utf8";          //字符编码
     private static $port="3306";            //端口号
     private $conn=null;
          function __construct(){
            $this->conn=new mysqli(self::$host,self::$user,self::$password,self::$dbName,self::$port);
            if(!$this->conn)
            {
               die("数据库连接失败!".$this->conn->connect_error);
            }else{
              echo "连接成功!";
            }
            $this->conn->query("set names ".self::$charset);
          }
          //执行sql语句
          function sql($sql){
            $res=$this->conn->query($sql);
          if(!$res)
            {
               echo "数据操作失败";
            }
            else
            {
               if($this->conn->affected_rows>0)
               {
                  return $res;
               }
               else
               {
                 echo "0行数据受影响!";
               }
            }
          }
          //返回受影响数据行数
          function getResultNum($sql){
           $res=$this->conn->query($sql);
           return mysqli_num_rows($res);
           }
          //关闭数据库
          public function close()
          {
            @mysqli_close($this->conn);
          }
    }

$conn=new Mysql();
//关闭数据库
$conn->close();
?>

登录成功页面

home.php

<?php
// 开启Session
session_start();

// 首先判断Cookie是否有记住了用户信息
if(empty($_COOKIE['username'])&&empty($_COOKIE['password'])){
  if(isset($_SESSION['username']))
    echo "登录成功,欢迎您".$_SESSION['username']."<a href='logout.php'>退出登录</a>";
  else
    echo "你还没有登录,<a href='index.html'>请登录</a>";
}
else
  echo "登录成功,欢迎您:".$_COOKIE['username']."<a href='logout.php'>退出登录</a>";
?>

数据库

创建表

CREATE TABLE `user` (
`username` varchar(20) NOT NULL PRIMARY KEY,
`password` varchar(20)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

向表中添加数据

INSERT INTO `user` (`username`, `password`) VALUES
('admin', 'admin');

创建了一个用户名为admin,密码为admin的数据

EOF