大家在很多网站上应该见过这样的验证方式，用户需要拖动一个小滑块并将小滑块拼接到背景图上空缺的位置才能完成验证，这种拖动验证码时基于用户行为的，比传统在移动端有更好的体验，减少用户的输入。

目前市面上做的好的拖动验证、用户行为验证有极验验证码、网易易盾验证等，这些第三方验证一般需要收费，本文给大家介绍一款免费的拖动验证码，使用PHP+Javascript实现。

主要技术应用

1、php抠图
2、js canvas画图
3、破解干扰
4、使用webp图片格式

作者已经将代码开源，项目在github上的地址是：https://github.com/binwind8/tncode

使用方法

首先引入相关的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>

大功告成，运行页面，点击按钮，弹出滑块验证码

背景图片大家可以自己替换，在目录bg/下。

当然拖动验证码的安全性其实并不怎么样，它利用了滑块小图片的位移即偏移量，然后通过session来验证，其破解难度不是很高，所以大家还是慎用。

PHP+Javascript实现拖动滑块完成拼图验证码相关推荐

JavaScript实现拖动滑块验证（方法已封装）
前提之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...
JavaScript实现拖动滑块验证
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提之前在优化别人写的登录界面时,遇到了滑动解锁成功后发送短信验证码的场景,因为涉及到改动,所以必须要明白它是怎么实现的 ...
Android滑块拼图验证码控件
转自王小冉的文章:https://blog.csdn.net/w690333243/article/details/90311187 https://github.com/luozhanming/ ...
拖动滑块拼图背景图没显示_计划B？那是计划N…没什么。拼图于2015年问世
拖动滑块拼图背景图没显示真是一天当典型的欧洲人逐渐破产时,美国的人们开始喝咖啡. 这就是为什么我在Mark Reinhold最近的新闻中睡个好觉的原因. 他在题为" Project Ji ...
拼图java监听器,Android 简单的实现滑块拼图验证码功能
实现滑块拼图验证码功能之前已经写过一篇了,上一篇使用的是自定义控件的方式实现这个功能,主要还是想让童鞋们知其然更知其所以然,还没看的童鞋可以先看看Android实现滑块拼图验证码功能这篇. 在项目的开 ...
JAVA 完整实现滑块拼图验证码
后端随机生成抠图和带有抠图阴影的背景图片,后台保存随机抠图位置坐标前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动距离值,比如以下示例前端将用户滑动距离值传入后端,后端校验误差是否在容许范 ...
c语言拼图验证码编写,Android 简单的实现滑块拼图验证码功能
实现滑块拼图验证码功能之前已经写过一篇了,上一篇使用的是自定义控件的方式实现这个功能,主要还是想让童鞋们知其然更知其所以然,还没看的童鞋可以先看看Android实现滑块拼图验证码功能这篇. 在项目的开 ...
JAVA 模板抠图生成滑块拼图验证码原理及实现
实现效果图: 滑块验证码原理很多网站使用滑块验证码提高网站安全性,为了做到真正的验证,必须要走后台服务器. 下面是java实现滑块验证的核心步骤: 1.从服务器随机取一张底透明有形状的模板图,再随机 ...
android滑动图形验证码,Android使用更简单的方式实现滑块拼图验证码功能
实现滑块拼图验证码功能之前已经写过一篇了,上一篇使用的是自定义控件的方式实现这个功能,主要还是想让童鞋们知其然更知其所以然,还没看的童鞋可以先看看Android实现滑块拼图验证码功能这篇. 在项目的开 ...
Python实战 | 滑块拼图验证码高级版详解
目录 1.如何实现滑块拼图验证码高级版? 2.HTML代码: 3.Python代码: 4.执行后报错,解决方案: 5.完整代码,修改后如下: 1.如何实现滑块拼图验证码高级版? 2.HTML代码: & ...

PHP+Javascript实现拖动滑块完成拼图验证码

主要技术应用

使用方法

PHP+Javascript实现拖动滑块完成拼图验证码相关推荐

最新文章

热门文章