php实现有验证码的登录页面

1，这里我简化了操作，没有查询数据库来判断是否是已注册的账户，而是直接在代码中给出用户名和密码来进行测试。2，如果需要了解php对数据库的操作可以参考：https://blog.csdn.net/qq_45668041/article/details/112174478涉及点：Cookie Sessiongd2扩展的相关操作效果图：需求：登录验证身份信息核对验证码单击刷新验证码注销开搞！1，log

滚去学习……

9234人浏览 · 2021-01-04 20:18:09

滚去学习…… · 2021-01-04 20:18:09 发布

1，这里我简化了操作，没有查询数据库来判断是否是已注册的账户，而是直接在代码中给出用户名和密码来进行测试。
2，如果需要了解php对数据库的操作可以参考：
https://blog.csdn.net/qq_45668041/article/details/112174478

涉及点：

Cookie Session
gd2扩展的相关操作

效果图：

在这里插入图片描述

需求：

登录
验证身份信息
核对验证码
单击刷新验证码
注销

开搞！

1，login.php —— 登录页面

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <style>
    input {
        height: 20px
    }
    tr {
        height: 20px;
    }
    table {
        border: #30F double 5px;
        padding: 50px;
        background-color: #CFF
    }
    </style>
</head>
<body>
    <div align="center">
    <!-- 创建一个表单，post方式提交到login_check.php页面 -->
        <form method="post" action="login_check.php">
            <table>
                <tr>
                    <td> 用户名：</td>
                    <td colspan="2"><input type="text" name="userName" /> </td>
                </tr>
                <tr>
                    <td> 密 码：</td>
                    <td colspan="2"><input type="password" name="PW" /></td>
                </tr>
                <tr valign="middle">
                    <td>验证码 ：</td>
                    <td valign="middle"><input type="text" name="code" size="5" /></td>
                    <!-- 输出drawcode.php页面的图像，并设置点击刷新功能 -->
                    <td><img src="drawcode.php" onclick="rcode()" id="imgcode"></td>
                </tr>
                <tr>
                    <td colspan="3" align="center"> <input name="submit" type="submit" value="登录" />
                        <input name="submit" type="reset" value="重置" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script>
    function rcode() {
        var imgcode = document.getElementById('imgcode');
        imgcode.src = "drawcode.php";
    }
    </script>
</body>
</html>

2，drawcode.php —— 输出验证码

<?php
// 启动 session
session_start();
// 导入验证码生成的文件
include 'code.php';
// 生成验证码，并返回验证码的字符串，保存在session中用于判断输入的验证码是否正确
$code=createcode();
$_SESSION['code']=$code;
?>

3，code.php —— 生成验证码

需要注意一点：没有更正则验证码图片上不能显示字符

我在当前目录下新建了文件夹fonts，存放字体文件：
$fontfile = ‘./fonts/JetBrainsMono-Regular.ttf’;
当然，也可用系统（c:/windows/font/）自带的字体，只需拷贝到fonts下，代码中修改字体名即可。
有关我这里用到的字体JetBrainsMono，介绍及安装，参见：
https://blog.csdn.net/qq_45668041/article/details/111655368

<?php
function create($count = 4)
{
    // 设置可显示字符的集合
    $charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ123456789'; // 随机因子
    // 用于保存生成的验证码
    $code = ''; 
    // 生成随机的4个字符，当作验证码
    $len = strlen($charset) - 1;
    for ($i = 0; $i < $count; ++$i) {
        $code .= $charset[mt_rand(0, $len)];
    }
    return $code;
}
// 开始画验证码图片
function show($code, $x = 100, $y = 40)
{
    // 创建图像资源
    $im = imagecreate($x, $y);
    // 随机生成背景颜色
    imagecolorallocate($im, mt_rand(50, 200), mt_rand(0, 155), mt_rand(0, 155));
    // 设置验证码文本的颜色和字体
    $fontcolor = imagecolorallocate($im, 255, 255, 255);
    $fontfile = './fonts/JetBrainsMono-Regular.ttf';
    // 在图像中绘制验证码
    for ($i = 0, $len = strlen($code); $i < $len; ++$i) {
        imagettftext($im, // 图像资源
            20, // 字符尺寸
            mt_rand(0, 20) - mt_rand(0, 25), // 随机设置字符倾斜角度
            10 + $i * 22, mt_rand(20, 40), // 随机设置字符坐标
            $fontcolor, // 字符颜色
            realpath($fontfile), // 字符样式
            $code[$i]// 字符内容
        );
    }
    // 添加8个干扰线
    for ($i = 0; $i < 8; ++$i) {
        // 随机生成干扰线颜色
        $linecolor = imagecolorallocate($im, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
        // 随机生成干扰线
        imageline($im, mt_rand(0, $x), 0, mt_rand(0, $x), $y, $linecolor);
    }
    // 添加250个噪点
    for ($i = 0; $i < 250; ++$i) {
        // 随机生成噪点位置
        imagesetpixel($im, mt_rand(0, $x), mt_rand(0, $y), $fontcolor);
    }
    // 设置消息头
    header('Content-Type: image/png');
    // 输出图片
    ob_clean();
    imagepng($im);
    // 释放图像资源
    imagedestroy($im);
}
function createcode()
{
    $code = create();
    $_SESSION['code'] = $code;
    show($code);
    return $code;
}

4，login_check.php页面 —— 验证登录信息

<?php
// 启动 session
session_start();
//判断是否点击了登录按钮
if (isset($_POST["submit"])) {
    // 获取输入的验证码，并转为大写
    $ucode = strtoupper($_POST['code']);
    // 获取 session 中保存的图片显示的验证码
    $scode = strtoupper($_SESSION['code']);
    // 比较两者是否相同，不同则提示错误信息，并跳转到登录页面重新登录
    if ($ucode != $scode) {
        echo '<script>
   			alert("验证码错误！");
   			location.href="login.php";
		</script>';
    }
    // 验证码正确，则进一步判断输入的 用户名和密码 是否对应已存在的用户
    else {
        $user = $_POST["userName"];
        $pw = $_POST["PW"];
        if ($user == "root" && $pw == 'root') {
            //将用户添加到 session 中，并跳转到主页
            $_SESSION['user'] = $user;
            header('Location:main.php');
        }
        // 用户名和密码 不对应则输出错误信息，并跳转到登录页面重新登录
        else {
            echo '<script>
   			alert("用户名或密码错误！");
   			location.href="login.php";
		</script>';}
    }
}

5，main.php —— 登录成功页面，进入主页

<?php
// 启动 session
session_start();
// 判断是否存在该用户，存在则进入显示主页内容
if (isset($_SESSION['user'])) {
    echo "欢迎您！" . $_SESSION["user"] . "<br/>";
    echo "<a href='logout.php?action=logout'>注销</a> ";
}
// 否则就是不存在该用户，则显示提示信息
else {
    echo "用户不存在！";
}

6，logout.php —— 注销页面

<?php
// 如果点击了 注销 链接
if($_GET['action'] == "logout"){
session_start();		// 启动 session
session_unset();		// 删除 session中设置的变量
session_destroy();		// 销毁 session
header("Location:login.php");		//跳转到登录页面
}	
?>