✨ 传统验证码登录方案
传统方案的核心是session上下文，整个流程高度依赖后端渲染页面。
生成流程
- 前端发起验证码请求。
- 后端生成验证码图片，并将验证码文本存储在session中。
- 返回验证码图片给前端显示。
验证流程
- 用户输入用户名、密码和验证码。
- 后端从session中取出验证码文本进行比对。
- 验证通过后，后端跳转页面。
这种方案适合单体应用，但前后端分离后，session跨域问题和页面跳转逻辑会变得棘手。
🐛 前后端分离的分布式解决方案
在分布式环境中，我们引入Redis存储验证码（取代session），并生成唯一标识符（key）来关联请求。同时，登录成功后返回token，前端负责页面跳转。
生成流程
- 前端请求验证码。
- 后端生成验证码图片和文本，将文本与唯一key关联存储到Redis。
- 返回Base64编码的图片和key给前端。
对比传统方案，增加了Redis和key机制，确保分布式一致性。
验证流程
- 用户输入用户名、密码、验证码和key。
- 后端从Redis中根据key取出验证码文本进行验证。
- 验证通过，返回token；失败则提示错误。
- 前端根据token处理后续逻辑（如跳转）。
这一方案解耦了前后端，适用于微服务和云部署环境。
👻 项目案例
为了让大家上手更轻松，我以webman框架为例，集成我的开源插件tinywan/captcha。该插件专为webman设计，
安装插件
在webman项目根目录执行：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
composer require tinywan/captcha安装后，Composer会自动加载依赖。确保你的PHP环境支持GD或Imagick扩展（用于图片生成）。
生成验证码
插件使用Captcha::base64()方法生成Base64编码的验证码，直接嵌入HTML标签。
示例控制器代码（IndexController.php）：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
<?php
/**
* @desc IndexController
* @author Tinywan(ShaoBo Wan)
*/
declare(strict_types=1);
namespaceapp\home\v1\controller;
usesupport\Request;
usesupport\Response;
class IndexController
{
/**
* @desc: 图片验证码
* @param Request $request
* @return Response
* @throws \Exception
* @author Tinywan(ShaoBo Wan)
*/
publicfunction captcha(Request $request): Response
{
$captcha = \Tinywan\Captcha\Captcha::base64();
return json($captcha);
}
}访问http://127.0.0.1:8288/home/v1/index/captcha，响应示例：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
{
"key": "$2y$10$3bSPqTNT33WdwOQnG7TXQOfqlTBJKhv5AwcDFrQZQxuGKVArJcszy",
"base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAA+BAMAAADwuxusAAAAG1BMVEXz+/5NND7e4uaLfoa0sLZhTFbJyc6gl552ZW6wM8bHAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACjUlEQVRYhe1Xz2/TMBgtzq8eeWyFHROJDY4rIMEx2ei4LkNDPbZoII4N07QdG2kT/NmznXrMnyvFcYJ28TtVX/35+fv17IxGHh4eHh4eFBdPSf4LufVadvDlw6DkMXBqufLyDsCkJ99Pyv7Kzq+ARD/yK5Lp2jacIdh/AIeaYQmsrDyXgnveq+480VhrljHwwso1A07SPtyj0T5wq2/Bz7Njrouvj6jpGeBKrvwq7NK/plt2DUvgHbFFwMKNPFDh1WK+dLKMdgKPnJNjjxh5iXI39gLfmh8ldi5LPazALHwlu5tw8XUrdnGddiZnUI09lftOUv1PEmbSzNbasJ7DzFM7xg+Myy0bV7SgESZ5CDzXNwkbV0tl1PdH026bsF7qZPI0N6kyJDgTWSLssSM7a/xWzUEm74m4JvI0s0cJOU5FqxCeZpd53pWdB7c72wTPPqc8/fqEl7zwM5IQHjvl4cLgIjc88Yes/jfWSzL0XMGvVGkUeJ5PyDYlOZ8dYnkvRg96zqdZH7GoGYT8kYmJ4SCXX20qlQX2ZVID1elvajo2oUEuVoNeP1Pbu5h4CfaxatepKey1wRSao8ELuOVCaEPYRFGoiKfmlcpV4DcxlX+OqQoVhvhaIJN5/QSlKYVxf/C8GKYD2YypfkaHZ1WNDTYnjxfGEkYjl4iI1GcODxuuJXtvt+m2jafG7nLB8xOficfb+W1Xz4Dof+TAXooIMpd2zQhb/NF477QhkfOVObTr69LlyAb7qWjXruw3fyFK1heVKF53oZBDkvZmj8ULvLtEC42we+e3g94r7ajxdTEQOev+JGHfB+KWUr8ebLPOCGy/1f4LEufPkEFQ9fzs7od4/pTsHh4eHh4efXEP4hlXg7Y3KSYAAAAASUVORK5CYII="
}key：唯一标识，用于后续验证。base64：图片数据，可直接用于<img src="...">。
预览图片：复制base64到浏览器或在线工具查看。
示例验证码图片：
或者浏览器直接输出
截图
验证验证码
在登录接口中使用Captcha::check()验证：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
use Tinywan\Captcha\Captcha;
$code = $request->get('code'); // 用户输入的验证码
$key = $request->get('key'); // 之前生成的验证码 key
if (false === Captcha::check($code, $key)) {
// 验证失败
return '验证码错误';
}
// 验证通过，返回token或其他逻辑
return '验证码正确';验证通过后，可生成JWT token返回给前端，实现无状态认证。
📦 小结
这个分布式验证码登录方案的优势显而易见：
- 高可用性：Redis确保验证码在分布式节点间一致。
- 安全性：Base64避免文件存储风险，key机制防止伪造。
- 高效集成 ：webman的协程特性让生成/验证极速。