IT技术社区_专业开发者平台_最新编程教程与解决方案 -沐辰社区

PHP项目ThinkPHP验证码生成与使用

wen PHP项目 69

本文目录导读：

PHP项目ThinkPHP验证码生成与使用

  1. 安装验证码扩展包
  2. 配置验证码
  3. 后端生成验证码
  4. 前端显示验证码
  5. 验证码验证
  6. 高级用法
  7. 完整示例
  8. 后端模板文件（login.html）
  9. 注意事项

在ThinkPHP框架中，验证码的生成和使用主要通过think\captcha扩展包实现,下面是完整的使用指南：

安装验证码扩展包

composer require topthink/think-captcha

配置验证码

1 默认配置（config/captcha.php）

<?php
return [
    // 验证码字符集合
    'codeSet' => '2345678abcdefhjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ',
    // 验证码字体大小(px)
    'fontSize' => 25,
    // 是否画混淆曲线
    'useCurve' => true,
    // 验证码图片高度
    'imageH' => 0,
    // 验证码图片宽度
    'imageW' => 0,
    // 验证码位数
    'length' => 4,
    // 验证成功后是否重置
    'reset' => true
];

2 自定义配置

在config/captcha.php中自定义配置参数：

return [
    'codeSet' => 'abc123456',
    'fontSize' => 20,
    'useCurve' => false,
    'useNoise' => true, // 是否添加杂点
    'imageH' => 60,
    'imageW' => 200,
    'length' => 5,
    'bg' => [243, 251, 254], // 背景颜色
];

后端生成验证码

1 控制器方法

<?php
namespace app\index\controller;
use think\Controller;
use think\captcha\Captcha;
class Login extends Controller
{
    /**
     * 生成验证码
     */
    public function verify()
    {
        $captcha = new Captcha();
        // 可以在这里设置验证码配置
        $captcha->fontSize = 25;
        $captcha->length = 4;
        $captcha->useNoise = true;
        // 生成并输出验证码
        return $captcha->entry();
    }
    /**
     * 登录处理
     */
    public function checkLogin()
    {
        $code = input('post.code');
        if (!captcha_check($code)) {
            $this->error('验证码错误');
        }
        // 验证通过，继续处理登录逻辑
        // ...
    }
}

2 使用助手函数

// 直接输出验证码
public function verify()
{
    return captcha();
}
// 或者指定配置
public function verify()
{
    return captcha('config1'); // 使用config1配置
}

前端显示验证码

1 HTML代码

<!-- 基础显示 -->
<div class="form-group">
    <label>验证码：</label>
    <input type="text" name="code" placeholder="请输入验证码">
    <img src="{:url('index/login/verify')}" alt="验证码" 
         onclick="this.src='{:url('index/login/verify')}?time='+Math.random()" 
         id="captcha_img">
</div>

2 点击刷新验证码

<script>
$(document).ready(function() {
    $('#captcha_img').click(function() {
        var url = "{:url('index/login/verify')}";
        url += '?time=' + new Date().getTime();
        $(this).attr('src', url);
    });
});
// 或者使用更简洁的写法
function refreshCaptcha() {
    document.getElementById('captcha_img').src = 
        "{:url('index/login/verify')}?time=" + Math.random();
}
</script>

验证码验证

1 使用助手函数验证

// 控制器中验证
public function login()
{
    if(request()->isPost()){
        $data = input('post.');
        // 第一种验证方式：助手函数
        if(!captcha_check($data['code'])){
            return json(['code'=>0, 'msg'=>'验证码错误']);
        }
        // 第二种验证方式：手动验证
        $captcha = new Captcha();
        if(!$captcha->check($data['code'])){
            return json(['code'=>0, 'msg'=>'验证码错误']);
        }
        // 验证通过，处理登录逻辑
        // ...
    }
}

2 使用验证器验证

// 创建验证器类（app/validate/Login.php）
namespace app\validate;
use think\Validate;
class Login extends Validate
{
    protected $rule = [
        'username' => 'require',
        'password' => 'require',
        'code' => 'require|captcha',
    ];
    protected $message = [
        'username.require' => '用户名不能为空',
        'password.require' => '密码不能为空',
        'code.require' => '验证码不能为空',
        'code.captcha' => '验证码不正确',
    ];
}
// 控制器中使用验证器
public function login()
{
    if(request()->isPost()){
        $data = input('post.');
        $validate = Validate::rule([
            'username' => 'require',
            'password' => 'require',
            'code' => 'require|captcha',
        ]);
        if(!$validate->check($data)){
            return json(['code'=>0, 'msg'=>$validate->getError()]);
        }
        // 验证通过
        // ...处理登录逻辑
    }
}

高级用法

1 中文验证码

// 配置中文验证码
$config = [
    'useZh' => true,  // 使用中文
    'fontSize' => 20, // 字体大小需要适当增大
    'length' => 4,    // 中文字数
];
return captcha($config);

2 AJAX验证示例

<script>
function checkCode() {
    var code = $('#code').val();
    $.ajax({
        url: "{:url('index/login/checkCode')}",
        type: 'post',
        data: {code: code},
        dataType: 'json',
        success: function(res){
            if(res.code == 1){
                alert('验证码正确');
            }else{
                alert(res.msg);
                refreshCaptcha(); // 刷新验证码
            }
        }
    });
}
</script>

3 多次验证控制

// 控制验证码验证次数
public function checkCode()
{
    $code = input('post.code');
    // 验证验证码
    if(!captcha_check($code)){
        return json(['code'=>0, 'msg'=>'验证码错误']);
    }
    return json(['code'=>1, 'msg'=>'验证码正确']);
}

完整示例

<?php
namespace app\index\controller;
use think\Controller;
use think\captcha\Captcha;
use think\Validate;
class Login extends Controller
{
    // 显示登录页面
    public function index()
    {
        return $this->fetch();
    }
    // 生成验证码
    public function verify()
    {
        $config = [
            'fontSize' => 25,
            'length' => 4,
            'useNoise' => true,
            'useCurve' => true,
            'bg' => [243, 251, 254],
        ];
        $captcha = new Captcha($config);
        return $captcha->entry();
    }
    // 处理登录
    public function doLogin()
    {
        $data = input('post.');
        // 验证器验证
        $validate = new Validate([
            'username' => 'require|length:3,20',
            'password' => 'require|length:6,20',
            'code' => 'require|captcha',
        ], [
            'username.require' => '用户名不能为空',
            'password.require' => '密码不能为空',
            'code.require' => '验证码不能为空',
            'code.captcha' => '验证码错误',
        ]);
        if (!$validate->check($data)) {
            return json(['code' => 0, 'msg' => $validate->getError()]);
        }
        // 验证通过，处理登录逻辑（这里省略）
        return json(['code' => 1, 'msg' => '登录成功']);
    }
}

后端模板文件（login.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">登录页面</title>
    <style>
        .form-group { margin: 10px 0; }
        .captcha-img { cursor: pointer; vertical-align: middle; }
        .captcha-input { width: 120px; padding: 5px; }
    </style>
</head>
<body>
    <form id="loginForm">
        <div class="form-group">
            <label>用户名：</label>
            <input type="text" name="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label>验证码：</label>
            <input type="text" name="code" class="captcha-input" placeholder="请输入验证码">
            <img src="{:url('index/login/verify')}" class="captcha-img" 
                 onclick="this.src='{:url('index/login/verify')}?time='+Math.random()">
        </div>
        <button type="button" onclick="doLogin()">登录</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    function doLogin() {
        $.post("{:url('index/login/doLogin')}", $('#loginForm').serialize(), function(res){
            alert(res.msg);
            if(res.code == 1){
                window.location.href = "{:url('index/index/index')}";
            } else {
                // 刷新验证码
                $('.captcha-img')[0].src = "{:url('index/login/verify')}?time=" + Math.random();
            }
        }, 'json');
    }
    </script>
</body>
</html>

注意事项

  1. 安全性：验证码在服务器端存储，每次验证成功后会自动重置（可以在配置中设置'reset' => false禁用）。

  2. 兼容性：确保PHP安装了GD库,否则验证码无法生成。

  3. 样式调整：可以通过配置参数调整验证码的字体大小、背景色、干扰元素等。

  4. 多语言：如果使用中文验证码,需要确保服务器支持相应字体。

通过以上方法,你可以在ThinkPHP项目中轻松实现验证码功能。

版权声明：NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 NBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 CBA直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播 英超直播

上一篇PHP项目ThinkPHP重定向与跳转

下一篇PHP项目ThinkPHP会话与Cookie管理

相关文章

抱歉，评论功能暂时关闭!

友情链接攻略窝 · 礼包窝 · 配置窝 · 换算窝 · 算法窝 · 查文窝 · 手册窝 · 问答窝 · 全文搜 · 手册库
相关站点礼包窝 · 查文窝