English | 简体中文
基于TypeScript的验证码生成模块，提供简单、可靠且易于集成的验证码解决方案。
- 🚀 基于TypeScript开发，提供完整的类型支持
- 🎨 支持多种验证码样式和自定义配置
- 🔒 安全可靠的验证机制
- 🔧 易于集成和使用
- ⚡️ 基于Webpack 4构建，确保稳定性
- 📦 支持模块化引入
- 🛠 提供完整的开发环境
mlVocdeProject/
├── vcode/ # 前端验证码模块
│ ├── src/ # 源代码目录
│ │ ├── api/ # API接口
│ │ ├── config/ # 配置文件
│ │ ├── enum/ # 枚举定义
│ │ ├── interface/ # 接口定义
│ │ ├── static/ # 静态资源
│ │ ├── utils/ # 工具函数
│ │ ├── main.ts # 入口文件
│ │ └── global.d.ts # 全局类型声明
│ ├── webpack.config.js # Webpack配置
│ └── tsconfig.json # TypeScript配置
└── server/ # 后端服务
- Node.js >= 16.0.0
- Yarn >= 1.22.0
- 克隆项目
git clone git@github.com:mingle98/machine-vcode-ts.git
cd machine-vcode-ts- 安装依赖
cd mlVocdeProject/vcode
yarn install- 启动开发服务器
yarn serve服务器将在 http://localhost:3000 启动
- 构建生产版本
yarn buildyarn serve: 启动开发服务器yarn build: 构建生产版本yarn dev: 以开发模式启动（无自动打开浏览器）
src/api: API接口封装src/config: 项目配置文件src/enum: 枚举类型定义src/interface: TypeScript接口定义src/static: 静态资源文件src/utils: 工具函数集合
webpack.config.js: Webpack构建配置tsconfig.json: TypeScript编译配置tslint.json: TypeScript代码规范配置
- 引入构建后的文件：
<script src="path/to/api/built.js"></script>温馨提示: 如果希望使用在线的built.js请参考以下这个使用文档: https://luckycola.com.cn/public/docs/shares/sdk/ml-vcodes.html
- 初始化验证码：
<div id="myVcodeContainer"></div>
<script>
window.onload = function() {
const mlVcode = boostrapFn({
// 验证码类型：支持点选验证码(clickVcode)、转图验证码(roateVcode)和拼图验证码(puzzleVcode)
vcodeType: ['puzzleVcode', 'clickVcode', 'roateVcode'],
// 模式：dialog(弹窗模式) 或 不填(嵌入模式)
mode: 'dialog',
// 验证码容器ID
container: '#myVcodeContainer',
// 是否开启服务端验证（默认false）
serverVerify: false,
// 成功回调
successFn: (rsp) => {
console.log('验证成功');
},
// 失败回调
failFn: (rsp) => {
console.log('验证失败');
}
}).render();
}
</script>clickVcodeConfig: {
// 验证码文字
fontList: '姐姐姐姐姐姐介绍岁',
// 背景图片列表（URL数组）
imgList: []
}puzzleVcodeConfig: {
// 拼图形状：'puzzle' | 'rect' | 'round' | 'triangle'
puZshape: 'puzzle',
// 提示文案
puZoperateTip: '请拖动完成拼图验证',
// 背景图片列表（URL数组）
puZimgList: []
}roateVcodeConfig: {
// 提示文案
roateOperateTip: '请拖动将图片转正完成验证',
// 图片列表（URL数组）
roateimgList: []
}customTxt: {
// 标题配置
headerConfig: {
text: '安全验证',
url: 'https://your-website.com'
},
// 底部配置
footerConfig: {
text: '关于我们',
url: 'https://your-website.com/about'
}
}如果需要开启服务端验证（serverVerify = true），可以通过以下配置自定义验证接口：
collectionDataOptios: {
// 开启自定义服务端验证接口
open: true,
// 数据上报接口（POST）
postUrl: '/api/mlvcode',
// 数据上报回调
postUrlFn: function(resData) {
console.log('数据上报响应:', resData);
},
// 初始化接口（POST）
initpostUrl: '/api/initmlvcode',
// 初始化接口回调
postInitUrlFn: function(initSuccessHook, resData) {
if (resData.data.code === 0) {
initSuccessHook();
}
},
// 验证接口（POST）
verifypostUrl: '/api/verify',
// 验证接口回调
verifypostUrlFn: function(resData, verifySuccessHook, verifyFailHook) {
if (resData.data.code === 0) {
verifySuccessHook();
} else {
verifyFailHook();
}
},
// 请求参数前置处理
apiDataPreFn: function(apiData) {
// 可以在这里对请求参数进行加密等处理
return apiData;
}
}访问 在线演示 查看验证码效果。
我们非常欢迎社区贡献！如果您想为项目做出贡献，请：
- Fork 本仓库
- 创建您的特性分支 (
git checkout -b feature/AmazingFeature) - 提交您的更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
- 确保代码符合TypeScript规范
- 添加必要的注释和文档
- 确保所有测试通过
- 遵循现有的代码风格
- v1.0.0 - 初始版本发布
- 基础验证码生成功能
- TypeScript支持
- Webpack 4构建支持
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
- @mingleZhou
感谢所有为这个项目做出贡献的开发者！
如有问题或建议，欢迎提出 Issue 或 Pull Request。