vue图形验证码实现

1.第一种方法

1.1 安装 vue-captcha：

npm install vue-captcha --save

1.2 导入组件使用

import VueCaptcha from 'vue-captcha'
Vue.use(VueCaptcha)

1.3 在模板中使用

<template>
  <div>
    <vue-captcha :height="300" :width="100" />
  </div>
</template>

1.4 调用生成验证码

this.$refs.captcha.getCaptcha()

1.5 判断验证

const captcha = this.$refs.captcha.getCaptcha()
const userInput = req.body.captcha || ''  //这里写的方法是后端获取的，前端自己判断可以读取文本框自己输入的
if (captcha && userInput) {
  if (captcha.solution === userInput) {
    // 验证成功，返回成功响应
  } else {
    // 验证失败，返回错误响应
  }
} else {
  // 验证码未提供或无效，返回错误响应
}

2.第二种方法

如果你需要字母加数字的图形验证码，你可以使用 captcha 库来生成这种类型的验证码。以下是一个示例：

<div id="captcha"></div>

<script src="https://cdn.jsdelivr.net/npm/captcha@4.1.6/dist/captcha.min.js"></script>
<script>
  // 生成字母加数字的验证码
  captcha.generate('my-id', {
    type: 'image', // 验证码类型，可选为：image（图片）、slider（滑块）、plain（纯文本）
    width: 120, // 验证码宽度
    height: 60, // 验证码高度
    font: 'Arial', // 验证码字体
    fontSize: 36, // 验证码字体大小
    background: '#ffffff', // 验证码背景颜色
    foreground: '#6495ed', // 验证码前景颜色
    grid: true, // 是否显示网格线
    gridSize: 20, // 网格线间距
    letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 可选，验证码字母和数字集合
    lines: 10, // 可选，滑块数量
    backgroundSolid: false, // 可选，是否显示滑块背景
    timeInterval: 3000, // 可选，滑块时间间隔，单位为毫秒
    callback: function(id, code) {
      // 验证滑块验证码
      captcha.verify(id, code);
    }
  });
</script>

在上面的示例中，我们使用 captcha.generate 方法生成了一个字母加数字的图形验证码。你可以根据自己的需求调整验证码的类型、大小、颜色、滑块数量等参数。回调函数会在用户验证完验证码后调用，它会传入生成器ID和验证码内容。你可以使用这个 ID 和验证码内容调用 captcha.verify 方法进行验证。