Node.js使用 svg-captcha 生成图形验证码完成前端登录验证

最新推荐文章于 2024-07-18 15:34:09 发布

南穑

最新推荐文章于 2024-07-18 15:34:09 发布

阅读量2.7k

点赞数 1

文章标签： vue.js html5 javascript 前端 css

本文链接：https://blog.csdn.net/qq_48009509/article/details/124051429

版权

本文介绍了如何在Node.js环境中利用svg-captcha库生成SVG格式的验证码，并在Express框架下创建对应的接口。同时，展示了在Vue前端应用中如何通过动态改变src属性实现图片验证码的刷新功能。该方法适用于需要验证码验证的Web应用开发。

摘要由CSDN通过智能技术生成

svg-captcha ：可以很轻松的生成日常使用的 svg 格式的图片验证码，灵活的参数配置能够满足项目特别的需求。
GitHub文档地址：https://github.com/produck/svg-captcha/blob/HEAD/README_CN.md

Node环境

1、安装方法

npm install svg-captcha

2、使用方法（express）

const svgCaptcha = require('svg-captcha');   // 引入模块
// 生成验证码的接口
exports.svgCode = (req, res) => {
  const captcha = svgCaptcha.create({
    size: 4, //验证码长度
    noise: 1, //干扰线条数目
    width: 300, //宽度
    height: 50, //高度
    inverse: false, // 翻转颜色
    fontSize: 65, // 字体大小
    color: true, // 验证码字符颜色（需设置背景色）
    background: '#ccc', // 背景
  });
  code = captcha.text; // 存储验证码数值（这里使用变量来存储生成的验证码，其实可以使用session来进行存储）
  res.type('svg'); // 响应的类型
  res.send(captcha.data);
};

Vue中使用

// src="http://localhost:8000/svgCode"  为接口路径
<img
  src="http://localhost:8000/svgCode"  
  alt="看不清？点击刷新"
  @click="getSvgCode"
  ref="captcha"
  class="vercode"
/>

getSvgCode() {
 // 每次指定的src要不一样，img才会重新请求，可以使用 Date.now() 或者随机数 Math.random()
 this.$refs.captcha.src =
   'http://localhost:8000/svgCode?time=' + Date.now();
}