KgCaptcha 行为验证码自定义类型设置

简介: KgCaptcha 行为验证码自定义类型设置

前言

现在大部分的网站和手机软件都会使用到验证码的登录、注册、操作提醒功能。但是,你知道验证码到底有多少类型吗?今天小编就利用KgCaptcha中的设置给你详细介绍一下。

滑动拼图

滑动拼图验证是在滑块验证码的基础上增加了一个随机滑动距离,用户需要将滑块滑到拼图的缺口处,使拼图完整,才能通过验证码。

01.png

1.PNG

文字点选

文字点选验证码使用上,用户只要根据提示,按照顺序点击图中文字,即可完成验证。

21.png

3.PNG

语序点选

语序点选验证码使用上,用户需按照常用语的顺序点击正确的文字,即可完成验证。

41.png

5.PNG

字体识别

在字体识别验证码使用上,点击与其它字符不同字体的文字,用户仅需一次点击,即可进行安全验证。

61.png

7.PNG

空间推理

在空间推理验证码使用上,根据提示,点击对应的元素,即可进行安全验证。

81.png

9.PNG

代码片段

下面,我以滑动式和点选式验证码为示例。

滑动式验证码

鼠标移动滑块,限制右侧的拖出范围,获取css样式中left值,然后计算出滑动距离。最后当鼠标松开,发送数据并验证。

/* 鼠标移动 onmousemove|ontouchmove */functioneventMove(e){
/* 相关元素基本属性设置 */kg.show(sDiv[1], 1); /* 显示拉出进度条 */kg.html(sDiv[5], "");
sDiv[1].style.width="0px";
slide.style.borderColor="#2A62FF";  /* 小箭头边框颜色 */slide.style.backgroundImage='url("'+kgConfig["icon"][3] +'")';
/* 拉出进度条长度 */sDiv[1].style.width=strip.offsetLeft+20+"px";  /* 20 为按钮下的重叠部分 *//* 滑动条箭头位置移动 */slide.style.left= (kg.os==="Phone"?e.changedTouches[0].clientX : e.clientX) -offsetX+"px";  /* 小箭头位置移动 */if (slide.offsetLeft<=-kgConfig["border"][0]) {
slide.style.left="-"+kgConfig["border"][0] +"px";
    }
varsMax=kgConfig["bgSize"][0] -50-kgConfig["border"][0]*3/* 50 按钮宽度 */if (slide.offsetLeft>sMax) {
slide.style.left=sMax+"px";
    }
/* 同步拼图长条位置移动 */strip.style.left=slide.offsetLeft+"px";  /* 拼图长条位置移动 */if (strip.offsetLeft<=0) {  /* 左侧拖出限制 */strip.style.left="0px";
    }
vartMax=kgConfig["bgSize"][0] -62/* 右侧拖出限制,52为拼图小方块内容大小/72为条形宽度 */if (strip.offsetLeft>tMax) {
strip.style.left=tMax+"px";
    }
}


点选式验证码

点击文字,记录用户每次点击的位置并生成数字圆点和点击次数,当点击次数达到指定次数则发送数据并进行验证。

/* 点击文字事件 */KgDisplay[2].addEventListener("mousedown", function (e) {
if (clickCount===0){
startTime=newDate().getTime();  /* 记录第一次点击时间 */    }
e=e||window.event/* 获取点击位置 */varclickCoord=kg.clickCoord(KgDisplay[2], e);
if (strxy){strxy+=", "}
strxy+="["+clickCoord["x"] +", "+clickCoord["y"] +"]";  /* 记录每次点击的坐标值 */clickCount++;  /* 当前点击次数 *//* 生成数字圆点 */varcube=document.createElement('div');
cube.className="SmallCube";
cube.style.left=clickCoord["x"]-14+"px";  /* (宽24px + 边2px*2)/ 2 */cube.style.top=clickCoord["y"]-14+"px";
cube.innerHTML=clickCount.toString();
KgDisplay[2].parentNode.insertBefore(cube, KgDisplay[2].nextSibling);
if (clickCount>=kgConfig["strCount"]){  /* 4次点完了 *//* 发送数据并验证 */...    }
});


相关链接

官方地址:凯格行为验证码(KgCaptcha)滑动拼图验证,无感验证码,文字点选验证码

在线体验:凯格行为验证码在线体验

开发文档:凯格行为验证码-开发文档

相关文章
|
Web App开发 自然语言处理 安全
文字点选行为验证码(KgCaptcha快速入门)
凯格行为验证码 - KgCaptcha,采用业界通用的API接口方式,对接轻松简单,即可享受带来的产品服务能力。自定义样式及风控等级,完全个性化的设置,与你的应用完美融合。自由定义验证场景、安全策略、素材管理、自定义底图、拼图素材、验证模式、验证偏好、背景图片、Logo、跳转链接。定制需求由业务专家制定解决方案,支持私有化部署、多语言切换。
432 0
文字点选行为验证码(KgCaptcha快速入门)
|
API PHP 开发工具
laravel中短信发送验证码的实现方法
在做用户注册和个人中心的安全管理时常常需要用到短信发送验证码,下面这篇文章主要给大家介绍了关于laravel中短信发送验证码的实现方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
3602 0
|
9月前
|
安全 PHP 开发工具
文字验证码:简单有效的账号安全守卫!
文字验证码不仅是一种简单易懂的验证方式,同时也是保护您的账号安全的重要工具。通过输入正确的文字组合,您可以有效地确认自己的身份,确保只有真正的用户才能访问您的账号。
|
10月前
|
存储 前端开发 NoSQL
TienChin 验证码响应结果分析&验证码生成接口分析
首先从前端开始进行分析,进入到登录页面,打开开发者工具(f12),找到 network,f5 刷新一下页面,然后,筛选一下,筛选内容为 Fetch/XHR:
67 0
TienChin 验证码响应结果分析&验证码生成接口分析
|
安全 开发工具
【干货】验证码的常见类型总结
验证码是一种区分用户是计算机和人的公共全自动程序。简单来说,验证码就是验证操作是人还是机器。下面我就总结一下常见的验证码类型都有哪些?
【干货】验证码的常见类型总结
|
JavaScript 开发工具
同一页面生成多个验证码
一个页面需要两个验证码,使用同一个验证码调用两次会导致有前一个失效。那么我们需要创建不同的两个验证码,分别做验证。
同一页面生成多个验证码
|
安全 UED
行为验证码验证类型的讲解
最近在开发行为验证码,经常触及到关于验证类型的相关内容。但使用起来不太熟练,闲暇之余,总结一下我对行为验证码验证类型的理解。
行为验证码验证类型的讲解
KgCaptcha 行为验证码自定义语言/预警信息设置
KgCaptcha 行为验证码自定义语言/预警信息设置
KgCaptcha 行为验证码自定义语言/预警信息设置
|
安全 前端开发 定位技术
推荐一个非常好的行为验证码项目!
KgCaptcha 结合了设备指纹、行为特征、访问频率、地理位置等多项技术,有效的拦截恶意登录、批量注册,阻断机器操作,拦截非正常用户。较传统验证码相比,用户无需再经过思考或输入操作,只需轻轻一滑即可进行验证。
推荐一个非常好的行为验证码项目!
|
搜索推荐 前端开发 API
这个验证码合集,从图形到行为验证,你想要的都有-KgCaptcha
凯格行为验证码 - KgCaptcha,采用业界通用的API接口方式,对接轻松简单,即可享受带来的产品服务能力。自定义样式及风控等级,完全个性化的设置,与你的应用完美融合。
这个验证码合集,从图形到行为验证,你想要的都有-KgCaptcha