uniapp图形验证码

uniapp图形验证码实现方法

在uniapp中实现图形验证码可以通过以下方式完成：

前端生成验证码

使用canvas绘制验证码图形，生成随机验证码字符串并显示：

<template>
  <view>
    <canvas canvas-id="verifyCanvas" @tap="refreshCode"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verifyCode: ''
    }
  },
  mounted() {
    this.refreshCode()
  },
  methods: {
    refreshCode() {
      const ctx = uni.createCanvasContext('verifyCanvas', this)
      const code = this.generateRandomCode(4)
      this.verifyCode = code

      // 绘制背景
      ctx.setFillStyle('#f5f5f5')
      ctx.fillRect(0, 0, 120, 40)

      // 绘制干扰线
      for(let i = 0; i < 5; i++) {
        ctx.setStrokeStyle(this.randomColor())
        ctx.beginPath()
        ctx.moveTo(Math.random() * 120, Math.random() * 40)
        ctx.lineTo(Math.random() * 120, Math.random() * 40)
        ctx.stroke()
      }

      // 绘制验证码
      for(let i = 0; i < code.length; i++) {
        ctx.setFontSize(20)
        ctx.setFillStyle(this.randomColor())
        ctx.setTextBaseline('top')
        ctx.fillText(
          code[i],
          20 + i * 20 + Math.random() * 5,
          10 + Math.random() * 10
        )
      }

      ctx.draw()
    },
    generateRandomCode(length) {
      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      let result = ''
      for(let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      return result
    },
    randomColor() {
      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})`
    }
  }
}
</script>

服务端验证方案

1. 创建API接口生成验证码并返回给前端
2. 将验证码文本存储在session或redis中
3. 用户提交时验证输入是否匹配

Node.js示例：

const express = require('express')
const svgCaptcha = require('svg-captcha')
const session = require('express-session')

const app = express()
app.use(session({ secret: 'your-secret-key' }))

// 获取验证码
app.get('/api/captcha', (req, res) => {
  const captcha = svgCaptcha.create()
  req.session.captcha = captcha.text
  res.type('svg')
  res.status(200).send(captcha.data)
})

// 验证验证码
app.post('/api/verify', (req, res) => {
  if(req.body.code === req.session.captcha) {
    res.json({ success: true })
  } else {
    res.json({ success: false })
  }
})

第三方验证码服务

1. 使用极验、腾讯验证码等第三方服务
2. 集成SDK到uniapp项目中
3. 配置服务端验证逻辑

极验示例集成：

// 在index.html中引入极验SDK
<script src="https://static.geetest.com/static/tools/gt.js"></script>

// uniapp页面中使用
initGeetest() {
  initGeetest({
    gt: this.gt,
    challenge: this.challenge,
    offline: !this.success,
    new_captcha: true
  }, (captchaObj) => {
    captchaObj.appendTo("#captcha")
    captchaObj.onSuccess(() => {
      const result = captchaObj.getValidate()
      // 提交result到服务端验证
    })
  })
}

安全注意事项

1. 验证码应设置有效期，通常2-5分钟
2. 限制验证码尝试次数，防止暴力破解
3. 验证通过后立即销毁session中的验证码
4. 避免使用简单数字组合，增加复杂度
5. 考虑添加滑动验证等交互方式增强安全性

性能优化建议

1. 使用缓存减少重复生成开销
2. 前端生成减轻服务器压力
3. 合理设置验证码过期时间
4. 考虑使用Web Worker处理复杂图形生成

以上方法可根据实际项目需求选择组合使用，纯前端方案适合简单场景，重要业务建议采用服务端验证或第三方专业验证服务。