效果预览

验证码

安装 svg-captcha

1
npm install --save svg-captcha

API

svgCaptcha.create(options)

如果没有任何参数，则生成的 svg 图片有 4 个字符。

size: 4 // 验证码长度
ignoreChars: ‘0o1i’ // 验证码字符中排除 0o1i
noise: 1 // 干扰线条的数量
color: true // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
background: ‘#cc9966’ // 验证码图片背景颜色

该函数返回的对象拥有以下属性:
data: string // svg 路径
text: string // 验证码文字

svgCaptcha.createMathExpr(options)

和前面的 api 的参数和返回值都一样。不同的是这个 api 生成的 svg 是一个算数式，而 text 属性上是算数式的结果。不过用法和之前是完全一样的。

svgCaptcha.loadFont(url)

加载字体，覆盖内置的字体。

url: string // 字体文件存放路径 该接口会调用 opentype.js 同名的接口。 你可能需要更改一些配置才能让你得字体好看。
详见下面的这个接口：

svgCaptcha.options

这是全局配置对象。 create 和 createMathExpr 接口的默认配置就是使用的这个对象。

除了 size, noise, color, 和 background 之外，你还可以修改以下属性：

width: number // width of captcha
height: number // height of captcha
fontSize: number // captcha text size
charPreset: string // random character preset

svgCaptcha.randomText([size|options])

返回随机字符串

svgCaptcha(text, options)

返回基于 text 参数生成得 svg 路径
在 1.1.0 版本之前你需要调用上面的两个接口，但是现在只需要调用 create()

在 ThinkJS 中的实践

简单代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const Base = require('../base.js')
// 导入模块
const svgCaptcha = require('svg-captcha')
module.exports = class extends Base {
  __before() {}

  indexAction() {
    return this.json({
      msg: 'OK',
    })
  }

  async postDataAction() {
    if (this.method === 'POST') {
      const reward = this.post()
      reward.checked = -1
      if (this.session.captcha === reward.code) {
        await this.model('reward').add(reward)
        this.session.captcha = ''
        this.json({
          state: true,
          type: 'danger',
          message: '提交成功',
        })
      } else {
        this.json({
          state: false,
          type: 'success',
          message: '验证码错误或已失效',
        })
      }
    }
  }

  codeAction() {
    var captcha = svgCaptcha.createMathExpr({
      size: 4,
      ignoreChars: '0o1i',
    })
    this.session.captcha = captcha.text
    this.json(captcha.data)
  }
}

代码解析

首先我们需要导入模块：

1
const svgCaptcha = require('svg-captcha')

创建方法

1
2
3
4
5
6
7
8
codeAction() {
  let captcha = svgCaptcha.createMathExpr({
    size: 4,
    ignoreChars: '0o1i'
  });
  this.session.captcha = captcha.text;
  this.json(captcha.data);
}

在这里，我选择的是生成一个算数式的验证码，然后将得到的 captcha.text 即算术式的结果，存入到 session 中。

当前端提交表单的时候，我们将表单中提交过来的结果与后端的结果进行比对是否一致：

1
2
3
if (this.session.captcha === reward.code) {
  // TODO Something
}

这样一个简单的随机验证码的功能就实现完成了。

参考资料

svg-captcha