一个开箱即用的滑动验证码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