如何构建VonaJS验证码体系的疑问?
摘要:VonaJS的内置模块a-captcha提供了通用的验证码体系,使用Captcha Provider支持各种验证码方式,并且使用Captcha Scene支持不同场景的验证码使用策略
验证码体系
VonaJS的内置模块a-captcha提供了通用的验证码体系,使用Captcha Provider支持各种验证码方式,并且使用Captcha Scene支持不同场景的验证码使用策略
特性
Captcha Provider:使用Captcha Provider支持各种验证码方式,如:文字图形验证码、短信验证码,等等
Captcha Scene:使用Captcha Scene支持不同场景的验证码使用策略。比如,在某个场景下,可以在多个 Captcha Provider 中进行轮替,或者根据用户状态使用不同难度的 Captcha Provider,等等
立即验证:前端可以对用户输入的验证码进行立即验证。立即验证之后在提交表单时仍然要进行二次验证
表单验证:前端可以将用户输入的验证码与表单数据一起发往后端验证
bean.captcha
模块a-captcha提供了全局 Bean bean.captcha,可以通过统一的方式使用所有 Provider/Scene 提供的验证码能力
模块a-captchasimple提供了一个 Provider a-captchasimple:imageText,基于svg-captcha实现文字图片的验证码能力
模块a-captchasimple提供了一个 Scene a-captchasimple:simple。该 Scene 只使用一个 Provider,即a-captchasimple:imageText
下面演示如何使用模块a-captchasimple提供的验证码能力
1. create
// create captcha
const captcha = await this.bean.captcha.create('a-captchasimple:simple');
返回值类型:ICaptchaData
export interface ICaptchaData {
id: string;
provider: keyof ICaptchaProviderRecord;
token?: unknown;
payload: unknown;
}
名称
说明
id
本次验证码数据的id标识
provider
本次验证码所使用的Provider名称
token
本次验证码数据的token,用于比对用户输入值。在开发环境可以通过修改系统配置,将token发往前端,用于调试
payload
本次验证码的负载内容,不同的Provider有不同的payload类型
2. refresh
// refresh captcha
const captchaNew = await this.bean.captcha.refresh(captchaId, 'a-captchasimple:simple');
如果一个 Scene 配置了多个 Provider,那么在刷新 capthca 时可以基于策略选取不同的 Provider
3. verify
// verify captcha
const passed = await this.bean.captcha.verify(captchaId, '1234', 'a-captchasimple:simple');
4. verifyImmediate
前端可以对用户输入的验证码进行立即验证。
