当前位置：首页 > VUE

vue实现图片验证

2026-02-19 06:14:18VUE

Vue 实现图片验证码功能

使用 Canvas 生成验证码图片

在 Vue 项目中可以通过 Canvas 动态生成验证码图片。创建一个验证码组件，在 mounted 钩子中绘制验证码。

<template>
  <div class="captcha">
    <canvas ref="canvas" @click="refreshCaptcha"></canvas>
    <input v-model="inputCode" placeholder="请输入验证码"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      inputCode: ''
    }
  },
  mounted() {
    this.drawCaptcha()
  },
  methods: {
    drawCaptcha() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      canvas.width = 120
      canvas.height = 40

      // 生成随机验证码
      this.code = Math.random().toString(36).substr(2, 6).toUpperCase()

      // 绘制背景
      ctx.fillStyle = '#f5f5f5'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // 绘制文字
      ctx.font = '24px Arial'
      ctx.fillStyle = '#333'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(this.code, canvas.width/2, canvas.height/2)

      // 绘制干扰线
      for(let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.getRandomColor()
        ctx.beginPath()
        ctx.moveTo(
          Math.random() * canvas.width,
          Math.random() * canvas.height
        )
        ctx.lineTo(
          Math.random() * canvas.width,
          Math.random() * canvas.height
        )
        ctx.stroke()
      }
    },
    getRandomColor() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return `rgb(${r},${g},${b})`
    },
    refreshCaptcha() {
      this.drawCaptcha()
    },
    validateCaptcha() {
      return this.inputCode.toUpperCase() === this.code
    }
  }
}
</script>

使用第三方验证码服务

可以集成第三方验证码服务如极验、腾讯云验证码等。这些服务通常提供 SDK 和 API 接口。

// 以腾讯云验证码为例
import TCaptcha from 'tcaptcha-js'

export default {
  methods: {
    initCaptcha() {
      new TCaptcha({
        appId: '你的AppID',
        callback: (res) => {
          if(res.ret === 0) {
            // 验证通过，res.ticket可用于服务端验证
            this.$emit('verified', res.ticket)
          }
        }
      }).show()
    }
  }
}

服务端验证实现

前端生成的验证码需要与后端配合验证。将用户输入的验证码与 session 中存储的验证码比对。

// 前端发送验证请求
axios.post('/api/verifyCaptcha', {
  captcha: this.inputCode
}).then(response => {
  if(response.data.success) {
    // 验证通过
  } else {
    // 验证失败
    this.refreshCaptcha()
  }
})