PHP+Javascript实现拖动滑块完成拼图验证码
mylove136 · 849浏览量 · 发布于2020-11-05
作者binwind8,源码tncode,大家在很多网站上应该见过这样的验证方式,用户需要拖动一个小滑块并将小滑块拼接到背景图上空缺的位置才能完成验证,这种拖动验证码时基于用户行为的,比传统在移动端有更好的体验,减少用户的输入。
目前市面上做的好的拖动验证、用户行为验证有极验验证码、网易易盾验证等,这些第三方验证一般需要收费,本文给大家介绍一款免费的拖动验证码,使用PHP+Javascript实现。
主要技术应用
1、php抠图
2、js canvas画图
3、破解干扰
4、使用webp图片格式
使用方法
首先引入相关的js和css文件:
<script type="text/javascript" src="tn_code.js"></script> <link rel="stylesheet" type="text/css" href="style.css" />
然后在需要放置滑块验证码的位置加入如下代码:
<div class="tncode" style="text-align: center;margin: 100px auto;"></div>
这是一个用来点击弹出滑块验证码的按钮。
最后在页面尾部加上Javascript代码
<script> $TN.onsuccess(function(){//验证通过});</script>
大功告成,运行页面,点击按钮,弹出滑块验证码,请看在线DEMO。
背景图片大家可以自己替换,在目录bg/
下。
当然拖动验证码的安全性其实并不怎么样,它利用了滑块小图片的位移即偏移量,然后通过session来验证,其破解难度不是很高,所以大家还是慎用。
源码使用过程中,如无法搭建或有增加其他功能需求,可联系QQ:236-0248-666 ,付费搭建安装修改服务!
温馨提示:网站源码只作为学习或研究使用,如需商业使用请购买正版!
温馨提示:网站源码只作为学习或研究使用,如需商业使用请购买正版!
相关推荐
在线免费生成支付宝自定义支付收款二维码源码
相关信息
codesky · 116浏览 · 2023-05-11 15:15:19
在线检测网速流量HTML单页源码
相关信息
xiaomei1994 · 244浏览 · 2023-03-14 16:17:03
VIP视频在线解析工具网页版源码
相关信息
zhuxiaoqiang · 144浏览 · 2023-02-28 15:32:26
多线程在线检测网速流量网站HTML源码
相关信息
xiaomei1994 · 132浏览 · 2023-02-21 20:47:05
webp2jpg在线图片编辑器视频剪辑工具源码
相关信息
zhuxiaoqiang · 124浏览 · 2023-02-21 10:51:15
全功能在线截图生成器工具网页版网站源码
相关信息
xiaomei1994 · 133浏览 · 2023-02-17 15:06:43
chatGPT网页版HTML源码
相关信息
xiaomei1994 · 132浏览 · 2023-02-16 11:45:29
微信分享裂变html网站源码
相关信息
五星人 · 554浏览 · 2023-02-08 17:07:16
分类专栏
0评论