levi / laravel-rotate-captcha
laravel rotate captcha
Requires
- php: >=8.0
- laravel/framework: ^9.0|^10.0
README
一个开箱即用的滑动验证码Laravel扩展,基于[isszz/rotate-captcha]做的二次开发;结合了腾讯防水墙,增加安全策略,查看:策略 和 设计思路;提供了React前端开源组件
前端推荐使用React组件库:cgfeel/react-rotate-captcha
,[安装]、[使用]、[接口],更多资源见底部相关产品
🎙️ 演示 (Demo)
以下演示全部都一样,分别展示了多主题,多语言、多个唤起方式;在不同的环境下的演示,可根据自己的情况选择一个环境查看演示和演示的代码
- CodeSondbox:Webpack+TS+React [查看]
- CodeSondbox:Webpack+JS+React [查看]
- CodeSondbox:Vite+TS+React [查看]
- Stackblitz:ts+react [查看]
视频演示:
1701247930163032.mp4
📦 安装 (Installation)
安装此包你需要:
- Laravel 9.0及以上
- PHP 8.0及以上
- 安装有php-gd或php-imagick扩展
通过composer命令行进行安装:
composer require levi/laravel-rotate-captcha
或者将下面的配置添加到composer.json
并执行composer update
"require": {
"levi/laravel-rotate-captcha": "^1.0",
}
🎛️ 设置 (Configuration)
迁移配置文件、语言包、附件图
php artisan vendor:publish --provider="Levi\LaravelRotateCaptcha\CaptchaProvider"
添加中间件,修改App\Http\Kernel
在protected $middlewareAliases
中添加
'rotate.captcha' => \Levi\LaravelRotateCaptcha\CaptchaMiddleware::class
🔨 使用 (Usage)
默认开箱即用
提供了5个路由、1个中间件、1个控制器
url | router name | method | usage |
---|---|---|---|
/rotate.captcha |
rotate.captcha.get |
GET |
获取验证信息 |
/rotate.captcha/{id} |
rotate.captcha.load |
GET |
获取验证图片 |
/rotate.captcha/verify/{angle}/{token?} |
rotate.captcha.verify |
GET |
验证信息 |
/rotate.captcha/verify/{angle}/{token?} |
rotate.captcha.verify |
OPTIONS |
跨域提交验证信息 |
/rotate.captcha |
rotate.captcha.store |
POST |
获取验证信息,见注1 |
/rotate.captcha/test/action |
rotate.captcha.test |
any |
权限测试,默认仅供本次测试 |
- 注1:
rotate.captcha.store
和rotate.captcha.get
一样,不同在于接受2个可选请求参数:size
:默认生成的验证图片尺寸是350px
,可根据用户设备尺寸不同定制output
:默认按照配置文件输出验证图片格式(如webp
),对于一些老设备的用户可单独配置
客户端请求和接受的数据,见react-rotate-captcha
[查看]
手动设置
手动设置不是必须的,仅针对有定制需求的用户
仅修改中间件: 增加或修改中间件处理请求和响应的数据,修改配置配置config/rotate.captcha.php
中middleware
项
完全自定义: 关闭默认提供的路由和控制器
- 配置
config/rotate.captcha.php
中的routers
项,关闭对应的路由 - 参考文件
CaptchaController.php
和CaptchaMiddleware.php
- 参考:服务对象、策略、设计思路
🏞️ 更新验证图片 (Updating)
手动更新: 目录位置\storage\app\{rotate.captcha}
,其中存储引擎和位置可在配置文件中修改。
自动更新:
请通过在线的图床接口,在Laravel调度App\Console\Kernel
中schedule
方法里添加定时抓取,这里提供一个存储的方法作为参考:
// 每天0点抓取一张 $schedule->call(function () { $image = file_get_contents({custome_api_url}); app('rotate.captcha.file', ['path' => 'origin'])->prepend('costome_name.jpg', $image); }) ->daily();
安全系数:风景图 > 人物图 > 卡通图片,但不建议使用
bing
每日一图作为验证图片,因为验证的图片每天都是固定的,拿来比对就能得出结果
🗑️ 清理过期图片 (Cleanup)
请在Laravel调度App\Console\Kernel
中schedule
方法里添加定期清理,以下为参考示例:
// 清理前一天 $schedule->call(fn () => app('rotate.captcha.file')->clear())->daily(); // 清理1小时前 $schedule->call(fn () => app('rotate.captcha.file')->clear(3600))->hourly(); // 清理后返回剩余总数,请在诸如`Controller`或`artisan`中调用 app('rotate.captcha.file')->clear()->cost();
🕸️ 跨域 (Cors)
根据情况设置,以下仅供参考,修改config/cors.php
:
'paths' => ['api/*', 'sanctum/csrf-cookie', 'rotate.captcha*'], 'allowed_methods' => ['GET, POST, PATCH, PUT, OPTIONS'], // 下面是本地调试的URL,根据生产环境修改 'allowed_origins' => ['http://localhost:8686', 'http://192.168.31.204:8686'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['X-Captchatoken', 'X-Captchapolicie', 'X-Captchasid', 'X-Captchaticket'], 'exposed_headers' => ['X-Captchatoken'], 'max_age' => 0, 'supports_credentials' => true,
🗃️ 缓存 (Cache)
用于存储验证信息,默认按照Laravel
缓存配置config/cache.php
默认引擎file
- 建议配置
cache.php
中的默认缓存 - 如果要和默认缓存不一样,修改
config/rotate.captcha.php
中的cache
,采用的缓存需要提前在cache.php
配置好
🗄️ 文件驱动 (Disk)
用于存储验证图片,默认按照Laravel
文件配置config/filesystem.php
默认引擎local
- 建议配置
filesystem.php
中的驱动引擎 - 如果要和默认驱动不一样,修改
config/rotate.captcha.php
中的disk
,采用的驱动需要提前在filesystem.php
配置好
👩🎤 多语言 (Language)
提供中文和英文,默认按照Laravel
语言配置config/app.php
配置为en
- 建议修改
app.php
中的locale
- 如果要和默认语言不一样,修改
config/rotate.captcha.php
中的lang
- 如果需要默认提供外的语言包,在根目录下的
lang/vendor/rotate.captcha
,参考语言包添加语言
🚀 服务对象 (Server)
具体请查看文档:服务对象
🧪 单元测试 (PHPUnit)
在根目录phpunit.xml
中添加一组测试,如下:
<testsuite name="levi/laravel-rotate-captcha"> <directory>./vendor/levi/laravel-rotate-captcha</directory> </testsuite>
执行./artisan test
🛃 策略 (Policie)
由两部分组成: policie
默认策略,rules
策略组规则
策略规则:
limit
: 上限次数,达到峰值后重新验证,0
不限制time
: 使用期限,过期后重新验证,0
不限制routers
: 匹配要授权的路由组,null
全匹配
这里的路由是指验证通过后,要执行操作的路由,而不是验证操作时的路由
原理:
- 验证通过后将颁发:
sid
、ticket
- 执行操作时验证决定是否通过,通过就去和执行的
route
进行匹配 - 从而避免跨权,跨范围执行
优点:
- 针对不同应用场景提供验证
- 例如登录验证有效期30分钟,后台操作按次数进行身份验证
🛟 设计思路 (Design)
高级用法:
- 验证流程中
ua
实际并不局限使用User-Agent
,可以通过自定义头部加密拼接增加安全系数 - 除了头部,包括图片路径,都可以在本地通过二次加密
encryption
的方式增加安全系数
✂️ 物料 (Material)
即时设计的向量稿件,包含组件设计规范:查看
🗓️ 更新日志 (Changelog)
具体请查看文档:更新日志
🔗 相关产品 (Product)
react前端组件
推荐使用:cgfeel/react-rotate-captcha
,[安装]、[使用]、[接口]
isszz/rotate-captcha
第三方仓库,提供了react和laravel之外的生态扩展 [点击打开]
包含:
- 前端:vue、uni-app
- 后端:php、ThinkPHP