## 特点
CabloyJS提炼出了一个`验证码通用框架`,将验证码调用接口与验证码具体的实现方式隔离开来,从而具有以下特点:
1. 业务模块只需调用通用的验证码接口,不需考虑验证码实现细节
2. 可以开发不同难度、不同风格的验证码提供者,而且每个验证码提供者均是独立的模块,达到`即插即用`的效果
3. 切换不同的验证码提供者,仅需修改配置即可
## 架构图
![验证码通用框架a-captcha](https://portal.cabloy.com/api/a/file/file/download/c38df710e8c84e318333833cae6876c4.png)
## 如何配置验证码提供者
1. 可以配置不同`场景`所使用的`验证码提供者`
2. 可以添加不同的`场景`
3. 可以修改`场景`的默认值
`a-captcha/backend/src/config/config.js`
``` javascript
// provider
config.captcha = {
scenes: {
default: {
module: 'a-captchasimple',
name: 'captcha',
timeout: 20 * 60 * 1000,
},
},
};
```
|名称|说明|
|--|--|
|scenes.default|缺省场景|
- 场景
|名称|说明|
|--|--|
|module|验证码提供者模块的名称|
|name|模块提供的验证码前端渲染组件的名称|
|timeout|验证码的失效时间|
## 如何使用
### - 声明使用场景
在模块`test-party`中声明一个`场景`,配置如下:
`src/suite-vendor/test-party/modules/test-party/backend/src/config/config.js`
``` javascript
// captcha scenes
const _captchaSMS = {
module: 'a-authsms',
name: 'captcha',
};
config.captcha = {
scenes: {
formMobileVerifyTest: _captchaSMS,
formCaptchaTest: null, // means using default
// formCaptchaTest: {
// module: 'a-captchasimple',
// name: 'captcha',
// },
},
};
```
### - 前端验证码渲染
`test-party/front/src/kitchen-sink/pages/form-schema-validation/captcha.vue`
``` javascript
...
...
```
1. 模块`a-captcha`提供了一个前端组件`captchaContainer`,专门负责验证码的渲染。在这里,我们只需用组件`eb-component`来包裹渲染组件即可
> 组件`captchaContainer`会根据实际配置的使用场景,使用验证码提供者模块提供的渲染组件,如模块`a-captchasimple`提供的渲染组件`captcha`
2. 用户输入的验证码保存在变量`captcha.token`中
3. 调用后端Api接口,将变量`captcha`传入后台
### - 使用中间件captchaVerify
在后端Api接口的路由上使用中间件`captchaVerify`,中间件`captchaVerify`会自动验证前端传入的参数`captcha.token`是否正确,如果不正确会自动抛出异常
> 由于前端使用组件`eb-validate`包裹Form表单,因此会自动提示验证失败的信息
`test-party/backend/src/routes.js`
``` javascript
{ method: 'post', path: 'kitchen-sink/form-captcha/signup', controller: 'testKitchensinkFormSchemaValidation', middlewares: 'captchaVerify,validate',
meta: {
captchaVerify: { scene: { name: 'formCaptchaTest' } },
validate: { validator: 'formCaptchaTest' },
},
},
```
- captchaVerify.scene
|名称|说明|
|--|--|
|module|模块名称,默认为当前模块|
|name|场景名称|
|dataKey|从ctx.request.body.[dataKey]获取token,默认为`captcha`|
## 如何开发验证码提供者
请参考核心模块
|名称|说明|
|--|--|
|a-captchasimple|提供图片验证|
|a-authsms|提供mobile验证|
## 如何禁用验证行为
在开发阶段,如果不想每次登录都输入`验证码`,可以配置如下后端参数
`a-captcha/backend/src/config/config.js`
``` javascript
// configFront
config.configFront = {
local: {
disabled: true,
},
};
```