Vue Slide Captcha

一个安全的滑动验证码组件，适用于 Vue 3 和 Nuxt 3，具有防破解保护和移动端支持。

特性

• 🔒 高安全性: 内置防破解、反调试、行为分析等多重安全机制
• 📱 移动端优化: 完美支持触摸事件，防止页面滚动干扰
• 🎨 可自定义: 支持自定义样式、文本、尺寸等
• 🚀 轻量级: 基于 Canvas 实现，性能优异
• 🔧 易于集成: 支持 Vue 3 和 Nuxt 3，提供完整的 TypeScript 支持
• 🛡️ 防自动化: 检测并阻止自动化工具和机器人

安装

npm install vue-slide-captcha
# 或
pnpm install vue-slide-captcha
# 或
yarn add vue-slide-captcha

使用方法

Vue 3 项目

全局注册

// main.ts
import { createApp } from 'vue'
import VueSlideCaptcha from 'vue-slide-captcha'
import App from './App.vue'

const app = createApp(App)
app.use(VueSlideCaptcha)
app.mount('#app')

局部使用

<template>
  <div>
    <!-- 基础使用 -->
    <SlideCaptcha
      :width="320"
      :height="160"
      :tolerance="5"
      text="向右滑动完成验证"
      @success="handleSuccess"
      @fail="handleFail"
      @refresh="handleRefresh"
    />
    
    <!-- 图片背景 -->
    <SlideCaptcha
      :width="400"
      :height="240"
      background-image="https://picsum.photos/400/240"
      text="拖动拼图完成验证"
      @success="handleSuccess"
      @fail="handleFail"
    />
  </div>
</template>

<script setup lang="ts">
import { SlideCaptcha } from 'vue-slide-captcha'
import type { CaptchaResult } from 'vue-slide-captcha'

const handleSuccess = (result: CaptchaResult) => {
  console.log('验证成功:', result)
  // result.token 包含加密的验证信息
}

const handleFail = (result: CaptchaResult) => {
  console.log('验证失败:', result)
}

const handleRefresh = () => {
  console.log('刷新验证码')
}
</script>

Nuxt 3 项目

方法一：使用 Nuxt 模块（推荐）

在 nuxt.config.ts 中添加模块：

export default defineNuxtConfig({
  modules: [
    'vue-slide-captcha/nuxt'
  ]
});

或者手动导入模块：

import NuxtModule from 'vue-slide-captcha/nuxt';

export default defineNuxtConfig({
  modules: [
    NuxtModule
  ]
});

方法二：创建插件文件

// plugins/slide-captcha.client.ts
import VueSlideCaptcha from 'vue-slide-captcha'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSlideCaptcha)
})

2. 在页面中使用

<template>
  <div>
    <ClientOnly>
      <SlideCaptcha
        :width="320"
        :height="160"
        @success="handleSuccess"
        @fail="handleFail"
      />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import type { CaptchaResult } from 'vue-slide-captcha'

const handleSuccess = (result: CaptchaResult) => {
  console.log('验证成功:', result)
}

const handleFail = (result: CaptchaResult) => {
  console.log('验证失败:', result)
}
</script>

API 参考

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | number | 320 | 验证码宽度 | | height | number | 160 | 验证码高度 | | sliderSize | number | 60 | 滑块大小 | | tolerance | number | 5 | 验证容差（像素） | | background | string | '#f0f0f0' | 背景颜色 | | backgroundImage | string | '' | 背景图片URL，设置后将覆盖background颜色 | | text | string | '向右滑动完成验证' | 提示文本 | | successText | string | '验证成功' | 成功文本 | | failText | string | '验证失败，请重试' | 失败文本 | | refreshText | string | '刷新验证码' | 刷新按钮提示 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | success | CaptchaResult | 验证成功时触发 | | fail | CaptchaResult | 验证失败时触发 | | refresh | - | 刷新验证码时触发 |

类型定义

interface CaptchaResult {
  success: boolean
  token?: string        // 验证成功时的加密令牌
  timestamp: number     // 时间戳
}

interface CaptchaOptions {
  width?: number
  height?: number
  sliderSize?: number
  tolerance?: number
  background?: string
  backgroundImage?: string
  text?: string
  successText?: string
  failText?: string
  refreshText?: string
}

安全特性

防破解机制

• 加密验证: 使用 AES 加密算法保护验证数据
• 时间窗口: 验证令牌具有时效性，防止重放攻击
• 随机盐值: 每次验证使用不同的盐值
• 会话绑定: 验证结果与用户会话绑定

反自动化

• 行为分析: 分析鼠标轨迹和滑动行为
• 时间检测: 检测异常的操作时间
• 环境检测: 识别虚拟机、代理等可疑环境
• 反调试: 检测并阻止调试工具

移动端优化

• 触摸事件: 完整支持触摸操作
• 防滚动: 滑动时阻止页面滚动
• 响应式: 自动适配不同屏幕尺寸
• 性能优化: 针对移动设备优化渲染性能

服务端验证

建议在服务端对验证结果进行二次验证：

// Node.js 示例
const crypto = require('crypto')

function verifyToken(token, expectedPosition, tolerance = 5) {
  try {
    // 解密令牌
    const data = decryptToken(token)
    
    // 验证时间窗口（5分钟）
    const timeDiff = Date.now() - data.timestamp
    if (timeDiff > 5 * 60 * 1000) {
      return false
    }
    
    // 验证位置
    const positionDiff = Math.abs(data.position - expectedPosition)
    if (positionDiff > tolerance) {
      return false
    }
    
    return true
  } catch (error) {
    return false
  }
}

自定义样式

组件支持通过 CSS 变量自定义样式：

.slide-captcha {
  --captcha-border-color: #e0e0e0;
  --captcha-background: #f5f5f5;
  --slider-color: #1890ff;
  --slider-success-color: #52c41a;
  --slider-fail-color: #ff4d4f;
  --text-color: #45494c;
}

浏览器兼容性

• Chrome >= 60
• Firefox >= 55
• Safari >= 12
• Edge >= 79
• 移动端浏览器

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本发布
• 支持 Vue 3 和 Nuxt 3
• 完整的安全防护机制
• 移动端优化