Slider Captcha SDK

纯JavaScript滑块验证码SDK和密码校验工具，无外部依赖，支持多种模块格式。

✨ 特性

• 🚀 零依赖 - 纯JavaScript实现，无外部依赖（除密码校验需要JSEncrypt）
• 🎨 可定制 - 丰富的配置选项和样式定制
• 📦 多格式 - 支持UMD、ES Module、CommonJS
• 💪 TypeScript - 完整的TypeScript类型定义
• 🔧 易集成 - 简单的API，快速集成
• 🛡️ 安全可靠 - 防暴力破解，多重验证
• 🔐 密码校验 - 内置RSA加密密码校验功能
• ⚡ 高性能 - 优化的代码结构和缓存机制

📦 安装

npm install slider-captcha-sdk

或者使用yarn：

yarn add slider-captcha-sdk

🚀 快速开始

滑块验证码

ES Module

import { PopupSliderCaptcha } from 'slider-captcha-sdk'

const captcha = new PopupSliderCaptcha({
  apiUrl: '/api/captcha',
  verifyUrl: '/api/captcha/verify',
  onSuccess: (data) => {
    console.log('验证成功:', data)
  },
  onFail: (error) => {
    console.log('验证失败:', error)
  }
})

// 显示验证码
captcha.show()

UMD (浏览器直接引入)

<script src="https://unpkg.com/slider-captcha-sdk/dist/index.min.js"></script>
<script>
  const captcha = new PopupSliderCaptcha({
    apiUrl: '/api/captcha',
    verifyUrl: '/api/captcha/verify'
  })
  captcha.show()
</script>

使用baseUrl配置域名

// 方式1：使用baseUrl自动拼接域名
const captcha = new PopupSliderCaptcha({
  baseUrl: 'https://api.example.com',
  apiUrl: '/api/captcha',        // 自动拼接为 https://api.example.com/api/captcha
  verifyUrl: '/api/captcha/verify' // 自动拼接为 https://api.example.com/api/captcha/verify
})

// 方式2：直接使用完整URL（优先级更高）
const captcha2 = new PopupSliderCaptcha({
  baseUrl: 'https://api.example.com',
  apiUrl: 'https://other-api.com/api/captcha', // 使用完整URL，不会拼接baseUrl
  verifyUrl: '/api/captcha/verify' // 仍会拼接为 https://api.example.com/api/captcha/verify
})

CommonJS

const { PopupSliderCaptcha } = require('slider-captcha-sdk')

const captcha = new PopupSliderCaptcha()
captcha.show()

密码校验

ES Module

import { PasswordValidator, validatePassword } from 'slider-captcha-sdk'

// 方式1：使用类
const validator = new PasswordValidator({
  publicKeyUrl: '/api/getPublicKey',
  validateUrl: '/api/validatePassword'
})

const result = await validator.validatePassword('password123', 'username')

// 方式2：使用便捷函数
const result = await validatePassword('password123', 'username', {
  publicKeyUrl: '/api/getPublicKey',
  validateUrl: '/api/validatePassword'
}, {
  // additionalData 可选
})

// 方式3：使用baseUrl配置域名
const validator = new PasswordValidator({
  baseUrl: 'https://api.example.com',
  publicKeyUrl: '/microservice/strongPassword/getPublicKey', // 自动拼接为 https://api.example.com/microservice/strongPassword/getPublicKey
  validateUrl: '/microservice/strongPassword/checkPassword'  // 自动拼接为 https://api.example.com/microservice/strongPassword/checkPassword
})

📖 API文档

滑块验证码 (PopupSliderCaptcha)

配置选项

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|---------| | width | number | 320 | 验证码宽度 | | height | number | 155 | 验证码高度 | | sliderSize | number | 38 | 滑块大小 | | maxRetries | number | 3 | 最大重试次数 | | timeout | number | 30000 | 超时时间(ms) | | apiUrl | string | '/api/captcha' | 获取验证码接口 | | verifyUrl | string | '/api/captcha/verify' | 验证接口 | | baseUrl | string | '' | 基础域名，如果apiUrl和verifyUrl不包含域名则拼接此域名 | | throttleDelay | number | 16 | 节流延迟(ms) | | clickMaskClose | boolean | false | 点击遮罩关闭 | | onSuccess | function | undefined | 验证成功回调 | | onFail | function | undefined | 验证失败回调 | | onClose | function | undefined | 关闭回调 |

实例方法

show(): Promise<any>

显示验证码弹窗

hide(): void

隐藏验证码弹窗

refresh(): Promise<void>

刷新验证码

destroy(): void

销毁实例，清理所有事件监听器

静态属性

PopupSliderCaptcha.DEFAULTS

默认配置对象

PopupSliderCaptcha.CSS_CLASSES

CSS类名映射

PopupSliderCaptcha.ERROR_TYPES

错误类型枚举

密码校验 (PasswordValidator)

配置选项

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|---------| | publicKeyUrl | string | '/microservice/strongPassword/getPublicKey' | 获取公钥接口 | | validateUrl | string | '/microservice/strongPassword/checkPassword' | 密码校验接口 | | baseUrl | string | '' | 基础域名，如果URL不包含域名则拼接此域名 | | timeout | number | 10000 | 超时时间(ms) | | headers | object | {} | 请求头 | | cacheDuration | number | 300000 | 缓存时长(ms) |

实例方法

validatePassword(password, userName, additionalData): Promise<Object>

校验密码

参数：

• password (string): 密码
• userName (string): 用户名
• additionalData (object): 额外数据（可选）

返回值：

{
  success: boolean,
  data: any,
  message: string,
  code: string,
  originalResponse: object
}

encryptPassword(password, publicKey): string

加密密码

getPublicKey(): Promise<string>

获取公钥

destroy(): void

销毁实例

静态方法

validatePassword(password, userName, options, additionalData): Promise<Object>

便捷的密码校验函数

参数：

• password (string): 密码
• userName (string): 用户名
• options (object): 配置选项
• additionalData (object): 额外数据（可选）

🔧 服务端接口

滑块验证码接口

获取验证码 (POST /api/captcha)

请求格式：

{
  "timestamp": 1640995200000
}

响应格式：

{
  "success": true,
  "data": {
    "id": "captcha_id",
    "backgroundImage": "data:image/png;base64,...",
    "sliderImage": "data:image/png;base64,...",
    "y": 120,
    "nonceStr": "random_string"
  }
}

验证接口 (POST /api/captcha/verify)

请求格式：

{
  "loginVo": {
    "nonceStr": "random_string",
    "value": 200
  },
  "dragEventList": [
    {"time": 100, "position": 50},
    {"time": 200, "position": 100},
    {"time": 300, "position": 200}
  ]
}

响应格式：

{
  "success": true,
  "message": "验证成功",
  "data": {
    "token": "verification_token"
  }
}

密码校验接口

获取公钥 (GET /microservice/strongPassword/getPublicKey)

响应格式：

{
  "success": true,
  "data": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA...\n-----END PUBLIC KEY-----"
}

密码校验 (POST /microservice/strongPassword/checkPassword)

请求格式：

{
  "userName": "username",
  "password": "encrypted_password",
  "timestamp": 1640995200000
}

响应格式：

{
  "success": true,
  "message": "密码校验成功",
  "data": {
    "valid": true
  }
}

🎨 自定义样式

你可以通过CSS覆盖默认样式：

/* 使用CSS类名 */
.slider-captcha-modal {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.slider-captcha-btn {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
}

/* 或者使用CSS变量 */
:root {
  --sc-primary: #409eff;
  --sc-success: #67c23a;
  --sc-danger: #f56c6c;
  --sc-border: #e4e7eb;
  --sc-bg: linear-gradient(90deg, #f7f9fa 0%, #e8f4fd 100%);
  --sc-text: #333;
  --sc-text-light: #999;
  --sc-shadow: 0 4px 20px rgba(0,0,0,.3);
  --sc-radius: 8px;
  --sc-transition: .3s ease;
}

🔧 开发

安装依赖

npm install

开发模式

npm run dev

构建

npm run build:prod

代码检查

npm run lint
npm run lint:fix

完整检查

npm run check

📄 许可证

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如果你觉得这个项目有用，请给它一个 ⭐️

📝 更新日志

v1.0.20

• ✅ 添加密码校验功能
• ✅ 优化代码结构和性能
• ✅ 添加ESLint配置
• ✅ 完善TypeScript类型定义
• ✅ 修复并发请求问题
• ✅ 优化打包配置