AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ThinkPHP 验证码扩展库的使用，以及多应用模式下，如何自定义验证码校验规则

2024-09-27 23
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了在ThinkPHP框架中使用验证码扩展库的方法，包括安装验证码扩展库、在页面中使用验证码、自定义验证码配置以及校验验证码的步骤和代码示例。

一、安装

首先，验证码扩展库是需要view扩展的

composer require topthink/think-view

安装完成后，接着安装验证码扩展库

composer require topthink/think-captcha

视图使用的说明：
在这里插入图片描述

二、页面使用

页面使用的话，两种方式

<div>{:captcha_img()}</div>

<!--或者 -->

<div><img src="{:captcha_src()}" alt="captcha" /></div>

侧重说明一下，使用第二种方式

我们只需要在控制器中提供一个方法，用于验证码的生成，然后前端将img的src属性修改为对应的方法路径即可

在这里插入图片描述

在这里插入图片描述

三、验证码相关配置属性

属性说明：

参数 描述 默认
codeSet 验证码字符集合 略
expire 验证码过期时间 （s）
math 使用算术验证码 false
useZh 使用中文验证码 false
zhSet 中文验证码字符串 略
useImgBg 使用背景图片 false
fontSize 验证码字体大小(px) 25
useCurve 是否画混淆曲线 true
useNoise 是否添加杂点 true
imageH 验证码图片高度，设置为0为自动计算 0
imageW 验证码图片宽度，设置为0为自动计算 0
length 验证码位数 5
fontttf 验证码字体，不设置是随机获取 空
bg 背景颜色 [243, 251, 254]
reset 验证成功后是否重置 true

1. 自定义验证码配置

安装验证码扩展后，在当前项目中的全局配置文件config目录中，会多出一项captcha.php用于配置验证码的相关配置。

在这里插入图片描述

在单应用模式下，我们可以直接通过config/captcha.php 来配置项目中的验证码相关配置。

多应用模式下的话，将config/captcha.php 拷贝一份到每个应用中的config目录中，然后在根据不同的应用去修改相应的验证码配置。

2. 自定义验证码（一）普通验证码

<?php
  // +----------------------------------------------------------------------
  // | Captcha配置文件
  // +----------------------------------------------------------------------

  return [
  //验证码位数
  'length'   => 4,
  // 验证码字符集合
  'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
  // 验证码过期时间
  'expire'   => 1800,
  // 是否使用中文验证码
  'useZh'    => false,
  // 是否使用算术验证码
  'math'     => false,
  // 是否使用背景图
  'useImgBg' => false,
  //验证码字符大小
  'fontSize' => 25,
  // 是否使用混淆曲线
  'useCurve' => false,
  //是否添加杂点
  'useNoise' => false,
  // 验证码字体 不设置则随机
  'fontttf'  => '',
  //背景颜色
  'bg'       => [243, 251, 254],
  // 验证码图片高度
  'imageH'   => 0,
  // 验证码图片宽度
  'imageW'   => 0,

  // 添加额外的验证码设置
  // verify => [
  //     'length'=>4,
  //    ...
  //],
  ];

在这里插入图片描述

3. 自定义验证码（二）算数验证码

<?php
// +----------------------------------------------------------------------
// | Captcha配置文件
// +----------------------------------------------------------------------

return [
    //验证码位数
    'length'   => 4,
    // 验证码字符集合
    'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
    // 验证码过期时间
    'expire'   => 1800,
    // 是否使用中文验证码
    'useZh'    => false,
    // 是否使用算术验证码
    'math'     => true,
    // 是否使用背景图
    'useImgBg' => false,
    //验证码字符大小
    'fontSize' => 25,
    // 是否使用混淆曲线
    'useCurve' => false,
    //是否添加杂点
    'useNoise' => false,
    // 验证码字体 不设置则随机
    'fontttf'  => '',
    //背景颜色
    'bg'       => [243, 251, 254],
    // 验证码图片高度
    'imageH'   => 0,
    // 验证码图片宽度
    'imageW'   => 0,

    // 添加额外的验证码设置
    // verify => [
    //     'length'=>4,
    //    ...
    //],
];

在这里插入图片描述

4. 自定义验证码（三）中文验证码

<?php
  // +----------------------------------------------------------------------
  // | Captcha配置文件
  // +----------------------------------------------------------------------

  return [
  //验证码位数
  'length'   => 4,
  // 验证码字符集合
  'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
  // 验证码过期时间
  'expire'   => 1800,
  // 是否使用中文验证码
  'useZh'    => true,
  // 是否使用算术验证码
  'math'     => false,
  // 是否使用背景图
  'useImgBg' => false,
  //验证码字符大小
  'fontSize' => 25,
  // 是否使用混淆曲线
  'useCurve' => false,
  //是否添加杂点
  'useNoise' => false,
  // 验证码字体 不设置则随机
  'fontttf'  => '',
  //背景颜色
  'bg'       => [243, 251, 254],
  // 验证码图片高度
  'imageH'   => 0,
  // 验证码图片宽度
  'imageW'   => 0,

  // 添加额外的验证码设置
  // verify => [
  //     'length'=>4,
  //    ...
  //],
  ];

在这里插入图片描述

5. 验证校验

这里为了简单演示，就使用一个表单校验一下：

  1. 页面部分
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <form action="http://robinadmin.com/index.php/index/check" method="get">
      <input name="yzm" type="text"> <div style="display: inline-block">{:captcha_img()}</div>
      <input type="submit" value="提交">
      <p>{$rs}</p>
    </form>
  </body>
</html>
  1. 后台校验部分
<?php
declare (strict_types = 1);

namespace app\admin\controller;

use think\facade\View;
use think\Request;

class Index
{
   
    public function index()
    {
   
        return View::fetch();
    }

    public function hello()
    {
   
        return view::fetch('hello',[
            'rs'=>' '
        ]);
    }

    // 验证
    public function check(Request $request){
   
        // 1.获取验证码
        $yzm = $request->param('yzm');
        // 2.比对校验
        if(!captcha_check($yzm)){
   
            return view::fetch('hello',[
                'rs'=>'验证码错误'
            ]);
        }
        // 3.返回结果
        return view::fetch('hello',[
            'rs'=>'验证码正确'
        ]);
    }
}

上面的验证规则也可以修改如下，然后多提一嘴，实时验证的功能就是前端不断的发送请求给后端，当你的输入框的值改变时。

    public function check(Request $request){
   
        // 比对校验 input('请求方式.验证码输入框name名称')
        if(!captcha_check(input('get.yzm'))){
   
            return view::fetch('hello',[
                'rs'=>'验证码错误'
            ]);
        }
        // 返回结果
        return view::fetch('hello',[
            'rs'=>'验证码正确'
        ]);
    }

在这里插入图片描述

文章标签：
PHP
前端开发
关键词：
验证码校验
thinkphp验证码
验证码模式自定义
验证码自定义
thinkphp验证码校验
杀死一只知更鸟debug
目录
相关文章
何雨晨
|
1月前
|
C#
C# 图形验证码实现登录校验代码
C# 图形验证码实现登录校验代码
何雨晨
75 2
奔跑的数据
|
1月前
|
数据采集 机器人 测试技术
SeleniumBase在无头模式下绕过验证码的完整指南
本文详细介绍了如何在SeleniumBase的无头模式下绕过验证码，通过使用代理IP（以爬虫代理为例）、设置User-Agent和Cookie等手段提升爬虫效率。文章首先分析了无头模式下面临的验证码挑战，然后提供了具体的策略和代码示例，包括浏览器设置、代理IP配置及模拟用户行为的方法。最后，通过一个访问大众点评网站并绕过验证码的完整代码示例，展示了如何在实际场景中应用这些技术，应对现代网站的反爬虫机制。此外，还提供了一些提高爬虫效率的实用技巧，如代理池轮换、设置合适延迟和分布式爬虫等。
奔跑的数据
139 1
热爱技术的小郑
|
3月前
|
NoSQL Java Redis
认证服务---整合短信验证码，验证码倒计时，验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务，包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用，以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
热爱技术的小郑
114 0
多多!
|
5月前
|
缓存 NoSQL Java
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
多多!
108 5
香蕉麻花皮
|
6月前
|
前端开发 JavaScript
vue3实现验证码校验的功能
最近想实现使用vue3实现一个简易的前端验证码校验的功能，就花了点时间实现了，这只是一个简易版的，但是用在项目中是没有啥问题的，废话不多说，先来看下最终实现的效果。写着玩的 哈哈
香蕉麻花皮
360 0
.29.
|
6月前
|
存储 前端开发 Java
①实现基于session的登录流程：发送验证码、登录注册、校验登陆状态
①实现基于session的登录流程：发送验证码、登录注册、校验登陆状态
.29.
184 0
热爱技术的小郑
|
3月前
|
存储 NoSQL 数据库
认证服务---整合短信验证码，用户注册和登录 ，密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程，重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库，以及用户登录时的远程服务调用和密码匹配校验的实现细节。
热爱技术的小郑
90 1
认证服务---整合短信验证码，用户注册和登录 ，密码采用MD5加密存储 【二】
木子0204
|
1月前
|
Java
Java 登录输入的验证码
Java 登录输入的验证码
木子0204
24 1
六卿
|
2月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程，包括生成验证码、账号密码验证以及token验证和过期处理。
六卿
47 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
风吹落叶花飘荡
|
3月前
|
资源调度 JavaScript API
nest.js + sms 实现短信验证码登录
本文介绍了在Nest.js框架中集成短信验证码登录的实现方案，详细阐述了使用阿里云短信服务的配置流程、资质申请、短信模板设置，并提供了API调用示例和工程代码的运行步骤。
风吹落叶花飘荡
215 1
nest.js + sms 实现短信验证码登录