ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Midway 验证码组件(@midwayjs/captcha)完整实战指南:图片、算式、短信邮件验证码与缓存校验原理

Midway 验证码组件(@midwayjs/captcha)完整实战指南:图片、算式、短信邮件验证码与缓存校验原理 后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载本指南以 Midway 官方验证码组件midwayjs/captcha对应仓库 packages/captcha 及官方文档 site/docs/extensions/captcha.md为核心系统讲解其在 Koa / Express / Web / FaaS 等框架下的安装启用、image/formula/text/set/check五大核心 API 的调用方式、全部配置参数与默认值并结合组件源码剖析其基于midwayjs/cache-manager的存储与一次性校验机制。读完本文你将能独立为应用接入图形验证码、算术算式验证码并基于纯文本验证码实现短信、邮件验证能力。组件定位与适用场景midwayjs/captcha是 Midway 的通用验证码子包README 中自述为 midway captcha(verification code) module见 packages/captcha/README.md适用于midwayjs/faas、midwayjs/web、midwayjs/koa和midwayjs/express等多种框架支持图片验证码SVG 图形内嵌随机字符输出可直接放入img标签的 base64 数据计算表达式验证码例如图像内容为12要求用户填入3纯文本验证码不生成图片直接返回随机文本可在此基础上实现短信验证码、邮件验证码注意组件本身不含发送短信、邮件的能力发送动作需由业务自行完成。组件可作为标准项目、Serverless 与一体化应用使用不包含独立主框架与独立日志。安装与启用组件安装依赖$ npm i midwayjs/captcha4 --save或者在package.json中增加如下依赖后重新安装{ dependencies: { midwayjs/captcha: ^4.0.0 } }当前仓库中该包的版本为4.2.4其运行时依赖包括midwayjs/cache-manager缓存存储、svg-captcha-fixed图形生成、mini-svg-data-uriSVG 转 data URI与nanoid验证码 id 生成详见 packages/captcha/package.json。启用组件在项目入口src/configuration.ts中引入组件import * as captcha from midwayjs/captcha; Configuration({ imports: [ // ...other components captcha ], }) export class MainConfiguration {}组件自身通过Configuration({ namespace: captcha, imports: [cacheComponent], importConfigs: [...] })注册并在内部自动引入midwayjs/cache-manager组件同时注入默认配置见 packages/captcha/src/configuration.ts。核心服务与五大 API组件对外暴露的核心类是CaptchaService位于 packages/captcha/src/service.ts。该类被标注为Provide()且作用域为Scope(ScopeEnum.Singleton)即全局单例可直接通过Inject()注入使用。它内部注入了名为captcha的缓存客户端InjectClient(CachingFactory, captcha)以及captcha配置项。import { Controller, Inject, Get, Post } from midwayjs/core; import { CaptchaService } from midwayjs/captcha; Controller(/) export class HomeController { Inject() ctx; Inject() captchaService: CaptchaService; // ... }1. 获取图像验证码image()// 示例获取图像验证码 Get(/get-image-captcha) async getImageCaptcha() { const { id, imageBase64 } await this.captchaService.image({ width: 120, height: 40 }); return { id, // 验证码 id imageBase64, // 验证码 SVG 图片的 base64 数据可以直接放入前端的 img 标签内 } }源码实现中image()会将default配置、image配置与调用时传入的options三者按顺序合并后者覆盖前者随后调用svg-captcha-fixed的create()生成 SVG 与答案文本把答案写入缓存获得id最后通过mini-svg-data-uri将 SVG 转为 data URI 形式的 base64 返回。其中type参数number/letter/mixed会映射为ignoreCharsletter类型时排除数字、number类型时排除字母mixed则不做排除从而保证生成内容与类型声明一致。2. 获取计算表达式验证码formula()// 示例获取计算表达式验证码 Get(/get-formula-captcha) async getFormulaCaptcha() { const { id, imageBase64 } await this.captchaService.formula({ noise: 1 }); return { id, // 验证码 id imageBase64, // 验证码 SVG 图片的 base64 数据可以直接放入前端的 img 标签内 } }formula()同样合并default、formula与入参后调用svg-captcha-fixed的createMathExpr()生成算式图形答案如3被写入缓存前端展示图片、用户输入计算结果即可完成校验。3. 生成纯文本验证码text()// 示例短信验证码 Post(/sms-code) async sendSMSCode() { const { id, text: code } await this.captchaService.text({ size: 4 }); await sendSMS(18888888888, code); // 发送动作由业务自行实现 return { id } } // 示例邮件验证码 Post(/email-code) async sendEmailCode() { const { id, text: code } await this.captchaService.text({ type: number }); await sendEmail(adminexample.com, code); return { id } }与image()不同text()不依赖图形库而是根据type从字符池中随机抽取number使用0123456789letter使用大小写英文字母mixed使用字母与数字的组合字符池定义见 packages/captcha/src/constants.ts然后按size长度拼接生成明文最后同样写入缓存返回id与明文。这一能力是短信/邮件验证码的基础。4. 写入任意文本set()// 示例将任意文本内容塞入验证码中 Get(/test-text) async testText() { // 存入内容获取验证码id const id: string await this.captchaService.set(123abc); // 根据验证码id校验内容是否正确 const passed: boolean await this.captchaService.check(id, 123abc); return { passed: passed true, } }set()是底层写入方法以nanoid()生成唯一id将文本转小写后按(cacheOptions?.expirationTime ?? this.captcha.expirationTime) * 1000毫秒的过期时间写入缓存并返回该id。image()、formula()、text()三个生成方法最终都调用它完成答案存储因此你完全可以自定义任意内容如业务单号、一次性口令走同样的存储与校验链路。5. 校验验证码check()// 验证验证码是否正确 Post(/check-captcha) async getCaptcha() { const { id, answer } this.ctx.request.body; const passed: boolean await this.captchaService.check(id, answer); if (passed) { return passed; } return error; }check()的校验规则在源码中有三个关键点若id或value任一为空直接返回false从缓存读取存入的小写文本与用户输入转小写后比较不相等即返回false因此校验对大小写不敏感校验成功后立即从缓存删除该验证码this.captchaCaching.del(storeId)保证验证码一次性有效防止重放攻击。缓存 key 由getStoreId()拼接默认前缀为midway:vc最终 key 形如midway:vc:nanoid 生成的 id若配置了idPrefix或传入cacheOption.idPrefix则前缀随之变化。配置详解与默认值组件全部配置收敛在CaptchaOptions接口见 packages/captcha/src/interface.ts默认值定义于 packages/captcha/src/config/config.default.tsinterface CaptchaOptions { default?: { // 默认配置会被 image/formula/text 的配置合并覆盖 // 验证码字符长度默认 4 个字符 size?: number; // 干扰线条的数量默认 1 条 noise?: number; // 宽度默认为 120 像素 width?: number; // 高度默认为 40 像素 height?: number; }, image?: { // 图像验证码配置最终会合并 default 配置 size?: number; // 验证码字符长度默认 4 个字符 type?: mixed | letter | number; // 字符类型默认 mixed noise?: number; // 干扰线条的数量默认 1 条 width?: number; // 宽度默认为 120 像素 height?: number; // 高度默认为 40 像素 }, formula?: { // 计算公式验证码配置最终会合并 default 配置 noise?: number; width?: number; height?: number; }, text?: { // 纯文本验证码配置最终会合并 default 配置 size?: number; // 验证码字符长度默认 4 个字符 type?: mixed | letter | number; // 字符类型默认 mixed }, // 验证码过期时间单位秒默认 3600即 1 小时 expirationTime?: number; // 验证码存储的 key 前缀默认 midway:vc idPrefix?: string; }对应组件加载的默认配置实体为export default { captcha: { default: { size: 4, noise: 1, width: 120, height: 40 }, image: { type: mixed }, formula: {}, text: {}, expirationTime: 3600, idPrefix: midway:vc, }, cacheManager: { clients: { captcha: { store: memory }, }, }, };需要注意的是default、image、formula、text各组配置在调用对应方法时会依次合并后者覆盖前者这正是官方文档中可以只改 default 也能改 image两种写法等效的原因。同时packages/captcha/index.d.ts 通过declare module midwayjs/core将captcha配置注册进全局MidwayConfig因此可以在config/config.default.ts或config.default.ts中直接以captcha: {...}键书写配置并获得类型提示。配置示例一5 位纯字母、200×50 的图像验证码由于image会与default合并可以只修改defaultexport const captcha: CaptchaOptions { default: { size: 5, noise: 3, width: 200, height: 50 }, image: { type: letter } }也可以不改default将尺寸参数直接放进image效果相同export const captcha: CaptchaOptions { image: { size: 5, noise: 3, width: 200, height: 50, type: letter } }配置示例二100×60、2 条干扰线的算式验证码同理formula会与default合并export const captcha: CaptchaOptions { default: { noise: 2, width: 100, height: 60 } }等效写法export const captcha: CaptchaOptions { formula: { noise: 2, width: 100, height: 60 } }除上述参数外组件基于svg-captcha-fixed实现官方文档说明其支持的更多图形参数可参考该库本身的配置项。调用image()/formula()时亦可直接传入覆盖参数例如await this.captchaService.image({ width: 120, height: 40 })。存储机制与缓存替换验证码答案的存储基于midwayjs/cache-manager组件。组件默认注册了一个名为captcha的缓存客户端将数据存储在进程内存memory中见上文config.default.ts中的cacheManager.clients段。如果要替换为 Redis 或其他缓存服务只需参照midwayjs/cache-manager组件对cacheManager配置进行扩展例如export default { cacheManager: { clients: { captcha: { store: redis, // 替换为 redis 或其他 store // ... 该 store 的实例化参数 }, }, }, };替换后验证码答案的读写仍通过CaptchaService内部注入的captcha缓存实例完成业务代码无需任何改动适合多实例部署时共享验证码状态的场景。由于验证码默认过期时间为 1 小时对于短信/邮件验证码这类安全敏感场景建议按业务需要调小expirationTime单位秒。源码级校验流程与测试佐证生成—存储—校验的完整链路综合 packages/captcha/src/service.ts一次验证码交互的底层链路为前端请求image()/formula()/text()服务端合并配置生成内容调用set()nanoid()生成 id → 内容转小写 → 写入captcha缓存key 带midway:vc:前缀TTL 为expirationTime秒→ 返回id前端提交id 用户输入服务端调用check(id, value)读取缓存值并小写比较 → 成功则立即del删除 key实现一次性使用。测试用例印证组件的单元测试位于 packages/captcha/test/index.test.ts覆盖了文本验证码的写入与校验先POST /text写入文本返回id再POST /check提交id code断言返回true图像验证码与算式验证码生成断言响应同时包含id与imageBase64纯文本验证码生成断言响应包含id与明文text过期时间生效将expirationTime配置为 1 秒写入后立刻校验通过sleep(1000)后再校验返回false。测试中同时演示了如何在配置中覆盖默认参数如noise: 4、image.size: 6以及如何通过globalConfig注入captcha配置测试夹具见 packages/captcha/test/fixtures/koa/src/configuration.ts其中HomeController完整展示了text/check/img/formula四个接口的最小可运行写法可作为接入参考。注意事项为防止机器学习轻易破解图形验证码组件使用的svg-captcha包为安全修复后的版本即依赖中的svg-captcha-fixed使用时应保持该依赖不被替换为未修复的旧版本组件本身不含发送短信、邮件的能力text()仅负责生成并存储验证码明文发送动作需由业务模块对接第三方短信/邮件服务完成校验对大小写不敏感存储与比较均转小写且校验成功后验证码即失效无法重复使用默认缓存为进程内存memory多实例部署或需要持久化时应按上文方式将captcha缓存客户端替换为 Redis 等共享存储验证码过期时间单位是秒默认 3600可在captcha.expirationTime或调用set()/check()时通过cacheOption.expirationTime临时覆盖。至此你已掌握midwayjs/captcha的安装、配置、五大核心 API 的调用方式以及底层缓存校验原理可立即在项目中落地图形验证码、算式验证码与短信/邮件验证码方案。赞分享后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载相关推荐使用斜面命令 子代理 记忆 MCP使用斜面命令 子代理 记忆 MCP 用户: /review pr Claude: 1. 加载项目记忆编码规范 2. 通过 GitHub MCP教程文档zfile多因素认证短信/邮件验证码配置zfile多因素认证短信/邮件验证码配置 引言为什么需要多因素认证 在当今数字化时代账户安全面临着越来越多的威胁。传统的用户名密码认证方式已经无法满足安后端文件存储网盘企业应用CodeIgniter CAPTCHA Helper 使用指南从验证码生成到数据库校验的完整实战CodeIgniter CAPTCHA Helper 使用指南从验证码生成到数据库校验的完整实战 CAPTCHA全自动区分计算机和人类的图灵测试是表单防机后端Web框架创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表