山东省建设厅执业注册中心网站医院网站改版建设方案
前端随机验证码安全验证sdk
- 前言
- 介绍
- 一、效果展示
- 二、使用步骤
- 1.引入库
- 2.参数说明
- 3.方法与事件说明
- 4.如何通过API获取当前用户的验证状态
前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/
前言
验证码：是一种校验区分用户是计算机还是人的公共全自动程序。
作用：防止刷票、论坛灌水、刷页、防止黑客恶意破解密码、盗取用户数据和防止恶意注册登录等等
介绍
这是一款开箱即用、维护简单、接入简单的前端随机验证码安全验证sdk模块.
一、效果展示
在线效果展示地址:点击即可跳转>>>
二、使用步骤
1.引入库
- 引入https://luckycola.com.cn/public/capVcode/dist/style.css 与https://luckycola.com.cn/public/capVcode/dist/mlcapsafesdk.umd.js 文件
- 在需要的地方初始化
- 参考在线demo:
https://luckycola.com.cn/public/capVcode/index.html
代码如下（示例）：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title><style>#showSafeSDKBtn {padding: 10px 20px;border-radius: 4px;background-color: blue;color: white;font-size: 16px;margin-top: 20px;}</style><link rel="stylesheet" href="https://luckycola.com.cn/public/capVcode/dist/style.css"></head><body><div id="app"></div><button id="showSafeSDKBtn">切换sdk展现</button><script type="text/javascript" src="https://luckycola.com.cn/public/capVcode/dist/mlcapsafesdk.umd.js"></script><script>console.log('MlcapSafesdk:', MlcapSafesdk);let mySafeSdk = MlcapSafesdk.getSafeSdk({// 模式 弹窗模式(dialog) 嵌入模式(default)mode: 'dialog',// 验证key,请前往官网(http://luckycola.com.cn/)获取colaKey: 'AObOe764B7jCH01702230314446epH9YaJNEc',// 模块容器 传id 字符串(嵌入模式时候比需传入)container: '#app',// 验证类型 算式(2)、随机字符(1)capType: 1,capConfig: {// 字体大小(px) 默认110CaptchaSize: 140,// 噪声线条数 默认3CaptchaNoise: 6,// 随机验证字符数量 默认5 最多不超过15个CaptchaNum: 5,},// 初始化成功的回调函数initSuccCallback: (data) => {console.log('initSuccCallback 初始化成功:', data);},// 验证成功回调函数validateSucCallback: (data)=> {console.log('validateSucCallback 验证成功:', data);},// 验证失败回调函数validateFailCallback: (data)=> {console.log('validateFailCallback 验证失败:', data);},// sdk出错回调函数failCallback: (err)=> {console.log('sdk出错:', err);}});document.querySelector('#showSafeSDKBtn').addEventListener('click', () => {// 1、手动切换展现与隐藏// mySafeSdk && mySafeSdk.showSdk('show');// mySafeSdk && mySafeSdk.showSdk('hide');// 2、自动切换展现与隐藏mySafeSdk && mySafeSdk.toggleShowSdk();})</script></body>
</html>注意!!!: 如果您还没有Colakey,请先请前往官网获取
官网地址:http://luckycola.com.cn/
2.参数说明
| 参数 | 是否必须 | 值 | 说明 | |
|---|---|---|---|---|
| colaKey | 是 | string | 唯一的验证key,请前往官网(http://luckycola.com.cn/)获取 | |
| mode | 是 | boolean | 模式 弹窗模式(dialog) 嵌入模式(default) | |
| container | 否 | string | 模块容器 传id 字符串(嵌入模式时候必须传入) | |
| capType | 否 | number | 验证类型 算式(2)、随机字符(1) | |
| capConfig | 否 | object | 验证码自定义配置,object具体参数在表后说明 |
capConfig: {// 字体大小(px) 默认110CaptchaSize: 140,// 噪声线条数 默认3CaptchaNoise: 6,// 随机验证字符数量 默认5 最多不超过15个CaptchaNum: 5,},
3.方法与事件说明
| 事件或方法 | 调用或者触发时机 | ||
|---|---|---|---|
| initSuccCallback | 初始化成功的回调函数,返回参数中可以拿到cuid参数,该参数用于后端通过接口查询当前用户是否通过了验证 | ||
| validateSucCallback | 验证成功回调函数 ,返回参数中可以拿到cuid参数,该参数用于后端通过接口查询当前用户是否通过了验证 | ||
| validateFailCallback | 验证失败回调函数 | ||
| failCallback | sdk出错回调函数 | ||
| showSdk | 手动切换sdk展现与隐藏,展现传参数“show“,隐藏传入“hide“ | ||
| toggleShowSdk | 自动切换展现与隐藏,无需参数 |
4.如何通过API获取当前用户的验证状态
可以通过下面这个接口查询用户是否通过了验证
请求方式: POST
https://luckycola.com.cn/captcha/getCaptchaV2Status
请求参数如下:
| 参数 | 说明 | ||
|---|---|---|---|
| ColaKey | 唯一的验证key,请前往官网(http://luckycola.com.cn/)获取 | ||
| cuid | 要查询的用户的标识,验证码sdk的回调函数中可以获得 |
响应案例:
{"code": 0,"msg": "验证状态获取成功","data": {// 被查询的用户标识"cuid": "7c4d70ecf67dfc83010533dc2499a",// 用户的验证状态,如果该用户已经通过验证则为true, 没有通过验证则为false"validateStatus": false}
}