vue实现图片验证
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()
}
})验证码组件优化
可以添加以下优化功能：
- 验证码过期时间设置
- 点击验证码图片刷新
- 输入错误时清空输入框
- 响应式设计适应不同设备
验证码实现需要考虑安全性和用户体验的平衡，防止自动化工具破解的同时也要保证用户友好性。
