npm 包 think-svg-captcha 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常常需要使用验证码来保证用户的安全性和防止恶意攻击。而一个好用的验证码库可以大大减轻开发者的工作量和提高用户体验。今天，我们来介绍一款基于 Node.js 平台的验证码库——think-svg-captcha，它可以生成 SVG 格式的验证码，并提供多种自定义选项。

1. 安装

我们可以使用 npm 包管理器安装 think-svg-captcha：

npm install think-svg-captcha --save

2. 使用方法

2.1. 基本用法

生成一个默认配置的验证码很简单，只需要调用 thinkSvgCaptcha()，它会返回一个 SVG 格式的字符串，例如：

const thinkSvgCaptcha = require('think-svg-captcha');

// 生成验证码
const captcha = thinkSvgCaptcha();

// 将验证码返回给客户端
res.type('svg');
res.status(200).send(captcha);

2.2. 配置选项

think-svg-captcha 提供了一系列选项可以用于自定义验证码的生成。

2.2.1. 验证码长度

我们可以使用 size 选项来指定验证码的长度，默认值为 4。

const captcha = thinkSvgCaptcha({
  size: 6 // 验证码长度为 6
});

2.2.2. 字符源

默认情况下，验证码会使用数字、大写字母和小写字母作为字符源，但我们也可以通过 charPreset 选项指定自定义的字符源。

const captcha = thinkSvgCaptcha({
  charPreset: '0123456789' // 字符源为数字0~9
});

2.2.3. 噪点数量

我们可以使用 noise 选项设置验证码中噪点的数量，默认为 2。

const captcha = thinkSvgCaptcha({
  noise: 3 // 验证码中有3个噪点
});

2.2.4. 字体大小和颜色

think-svg-captcha 提供了 fontSize 和 color 选项来自定义验证码的字体大小和颜色。

const captcha = thinkSvgCaptcha({
  fontSize: 48, // 字体大小为48px
  color: '#ff0000' // 字体颜色为红色
});

2.2.5. 字体类型

我们可以使用 fontPath 选项设置自定义字体，它需要传递一个字体文件的路径。

const captcha = thinkSvgCaptcha({
  fontPath: '/path/to/custom_font.ttf' // 使用自定义字体
});

2.3. 验证码验证

在客户端提交表单时，我们需要对用户输入的验证码进行验证，验证方法如下：

const checkCaptcha = thinkSvgCaptcha.check(text, req);

if (checkCaptcha) {
  // 验证成功
} else {
  // 验证失败
}

其中，text 是客户端提交的验证码内容，req 是请求对象。

3. 示例代码

最后，附上一段完整的使用示例代码：

-- -------------------- ---- -------
----- ------- - -------------------
----- --------------- - -----------------------------
----- --- - ----------

-- ---------
------------------- ----- ---- -- -
  ----- ------- - ------------------

  -- ----------
  ----------------
  ------------------------------
---

-- ---------
------------------ ----- ---- -- -
  ----- - --------- --------- ------- - - ---------

  -- -------------------------------- ----- -
    ------ ----------------------
      ------ ------------------
      -------- -------
    ---
  -

  -- -------------
---

---------------- -- -- -
  ------------------- ------- -- ------------------------
---

现在，我们已经学会了如何在 Node.js 平台上使用 think-svg-captcha 生成和验证验证码了。同时，也介绍了一些常见的自定义选项，你可以根据自己的需求进行定制。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055d3f81e8991b448db0b6