前端随机验证码安全验证sdk

前端必备工具推荐网站(免费图床、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 代码如下（示例）：

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><linkrel="icon"type="image/svg+xml"href="/vite.svg"/><metaname="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><linkrel="stylesheet"href="https://luckycola.com.cn/public/capVcode/dist/style.css"></head><body><divid="app"></div><buttonid="showSafeSDKBtn">切换sdk展现</button><scripttype="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验证失败回调函数failCallbacksdk出错回调函数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}}

标签：前端安全 jdk

本文转载自: https://blog.csdn.net/qq_48896417/article/details/135515817
版权归原作者 LuckyCola2023 所有，如有侵权，请联系我们删除。

前端随机验证码安全验证sdk

前端随机验证码安全验证sdk

前言

介绍

一、效果展示

二、使用步骤

1.引入库

2.参数说明

3.方法与事件说明

4.如何通过API获取当前用户的验证状态

发表评论

“前端随机验证码安全验证sdk”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航