【记】滑动拼图验证码在搜索中的作用

开头

验证码应用于我们生活、工作的方方面面,比如注册登录账号、支付订单、修改密码等。下面我是在一次项目中利用滑动拼图验证码和搜索功能“合作共赢”的记录。

验证码展示

请在此添加图片描述

具体实现

前端代码

// 引入js
<script src="captcha.js?appid=XXX"></script>
<script>
kg.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton",

    // 验证成功事务处理
    success: function (e) {
        // 验证成功,直接提交表单
        // form1.submit();
        console.log(e);
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
</script>

<a id="captchaButton"></a>

验证结果说明

请在此添加图片描述

字段名数据类型描述
codenumber返回code信息
msgstring验证结果信息
ridnumber用户的验证码应用id
sensenumber是否开启无感验证,0-关闭,1-开启
tokenstring验证成功才有:token
weightnumber错误严重性,0正常错误,可以继续操作,1一般错误,刷新/重新加载拼图,2严重错误,错误次数过多拒绝访问

Python代码

from wsgiref.simple_server import make_server
from KgCaptchaSDK import KgCaptcha
def start(environ, response):
    # 填写你的 AppId,在应用管理中获取
    AppID = "AppId"
    # 填写你的 AppSecret,在应用管理中获取
    AppSecret = "AppSecret"
    request = KgCaptcha(AppID, AppSecret)
    # 填写应用服务域名,在应用管理中获取
    request.appCdn = "https://cdn.kgcaptcha.com"
    # 请求超时时间,秒
    request.connectTimeout = 10
    # 用户id/登录名/手机号等信息,当安全策略中的防控等级为3时必须填写
    request.userId = "kgCaptchaDemo"
    # 使用其它 WEB 框架时请删除 request.parse,使用框架提供的方法获取以下相关参数
    parseEnviron = request.parse(environ)
    # 前端验证成功后颁发的 token,有效期为两分钟
    request.token = parseEnviron["post"].get("kgCaptchaToken", "")  # 前端 _POST["kgCaptchaToken"]
    # 客户端IP地址
    request.clientIp = parseEnviron["ip"]
    # 客户端浏览器信息
    request.clientBrowser = parseEnviron["browser"]
    # 来路域名
    request.domain = parseEnviron["domain"]
    # 发送请求
    requestResult = request.sendRequest()
    if requestResult.code == 0:
        # 验证通过逻辑处理
        html = "验证通过"
    else:
        # 验证失败逻辑处理
        html = f"{requestResult.msg} - {requestResult.code}"
    response("200 OK", [("Content-type", "text/html; charset=utf-8")])
    return [bytes(str(html), encoding="utf-8")]
httpd = make_server("0.0.0.0", 8088, start)  # 设置调试端口  http://localhost:8088/
httpd.serve_forever()

最后

SDK开源地址:KgCaptcha (KgCaptcha) · GitHub,顺便做了一个演示:凯格行为验证码在线体验

3 声望
1 粉丝
0 条评论
推荐阅读
滑动拼图验证码水印Logo修改
还在苦恼怎么让你的验证码显示Logo吗,KgCaptcha 这个验证码产品,你可以随心所欲地设置你想要的Logo图片、链接地址、位置等。下面我就给大家介绍一下如何设置吧?

宙哈哈阅读 288

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.8k评论 9

3 声望
1 粉丝
宣传栏