滑动拼图验证,摆脱烦人的验证码输入

简介: 你最近是否遇到过令人头疼的验证码?为何不让滑动拼图成为你的新选择呢?通过完成一个有趣的滑动拼图来验证你的身份,既能锻炼大脑,又能保护你的隐私。

前言

探索滑动拼图的世界!让我们一起揭开滑动拼图验证码背后的谜团,分享如何应对这个有趣而挑战性的验证方式。滑动拼图验证码已经成为了我们与数字世界互动的一部分,帮助保护着网站和应用的安全。让我们一起讨论如何轻松地解决滑动拼图验证码的挑战吧!

你最近是否遇到过令人头疼的验证码?为何不让滑动拼图成为你的新选择呢?通过完成一个有趣的滑动拼图来验证你的身份,既能锻炼大脑,又能保护你的隐私。

1.png

HTML 代码

<script src="captcha.js"></script>
<script>
kg.captcha({
    
    
    // 绑定元素,验证框显示区域
    bind: "#captchaBox",
    // 验证成功事务处理
    success: function(e) {
    
    
        console.log(e);
    },
    // 验证失败事务处理
    failure: function(e) {
    
    
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function(e) {
    
    
        console.log(e);
    }
});
</script>

<div id="captchaBox">载入中 ...</div>

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开源地址:https://github.com/KgCaptcha,顺便做了一个演示:https://www.kgcaptcha.com/demo/

相关文章
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
JavaScript Java
java生成验证码并进行验证
java生成验证码并进行验证
|
网络协议 JavaScript 前端开发
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名1
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名
799 0
|
11月前
jcaptcha集群时验证码不能验证的问题
jcaptcha集群时验证码不能验证的问题
100 3
|
11月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
1715 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
存储 NoSQL Java
使用redis进行手机验证码的验证、每天只能发送三次验证码 (redis安装在虚拟机linux系统中)
该博客文章展示了如何在Linux虚拟机上使用Redis和Jedis客户端实现手机验证码的验证功能,包括验证码的生成、存储、验证以及限制每天发送次数的逻辑,并提供了测试结果截图。
使用redis进行手机验证码的验证、每天只能发送三次验证码 (redis安装在虚拟机linux系统中)
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
JavaScript 前端开发 网络协议
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名3
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名
776 0
|
安全 开发工具 UED
告别验证码烦恼,轻松完成文字点选验证
文字点选验证码,作为一种创新的验证方式,正在逐渐取代传统的输入文字或数字的验证方式,为用户带来了更简单、直观的验证体验。它通过点击包含特定文字或物体的图片来完成验证,摆脱了繁琐的输入过程,让用户告别验证码的烦恼。
|
前端开发
图形验证码验证行式的笔记
最近在做关于验证码项目的时候,从交互的角度梳理了验证码的验证行式,今天总结一下验证码在产品中出现的验证行式。
图形验证码验证行式的笔记