站长图库向大家介绍了ThinkPHP5,极验滑动验证码,geetest功能等相关知识,希望对您有所帮助
下面给大家详解ThinkPHP5实现极验滑动验证码geetest功能，希望对需要的朋友有所帮助！
ThinkPHP5实现极验滑动验证码geetest功能
现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。
这里主要介绍thinkphp整合系列之极验滑动验证码geetest，官网：http://www.geetest.com
具体如下：
一：注册获取key
注册；创建应用；获取key；
二：导入sdk
/ThinkPHP/Library/Org/Xb/GeetestLip.class.php（此处GeetestLip.class.php是我重新命名的geetest类文件，原名为class.geetestlib.php）
此处牵扯到thinkphp引入第三方类，我把第三方类放到Org/Util/Xb下面了，同时对该类文件加入命名空间如下，否则实例化类时找不到文件
三：生成验证样式
admin/view/public/cdtsh_log_smfyws.php
<!doctype html><html><head> <meta charset="GBK" /> <title>网站管理系统后台</title> <script language="javascript" type="text/javascript" src="__JS__/jquery.js"></script> <link rel="stylesheet" href="__CSS__/jquery.validator.css"> <script type="text/javascript" src="__JS__/jquery.validator.js"></script> <script type="text/javascript" src="__JS__/zh_CN.js"></script> <link href="__CSS__/admin_login.css?v20130227" rel="stylesheet" /> <script> $(document).ready(function(){ var verifyimg = $(".verifyimg").attr("src"); $(".reloadverify").click(function(){ if( verifyimg.indexOf('?')>0){ $(".verifyimg").attr("src", verifyimg+'&random='+Math.random()); }else{ $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random()); } }); }); </script></head><body><p class="wrap"> <h1><a href="javascript:;" style="height: 116px; width: 250px;">后台管理中心</a></h1> <form method="post" action="{:U('Admin/Public/cdtsh_log_smfyws')}"> <p class="login"> <ul> <li> <input class="input" id="username" name="username"type="text" title="用户名" data-rule="required;username" placeholder="用户名" /> <span class="msg-box n-right" style="position:absolute; left: 248px; top: 12px; " for="username"></span> </li> <li> <input class="input" name="password" type="password" title="密码" data-rule="required;password" placeholder="密码"/> <span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="password"></span> </li> <li> <input class="input" id="verify" name="verify" type="text" style="width:130px;" title="密码" data-ok=" " placeholder="验证码" data-tip="输入验证码！" title="验证码" data-rule="required;text;remote[{:U('Admin/Public/check_verify')}]" /> <p class="yanzhengma_box" id="verifyshow"> <img class="verifyimg reloadverify" style=" cursor: pointer;" align="right" src="{:U('public/verify')}" title="点击刷新"> </p> <span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="verify"></span> </li> </ul> <ul> <!--<input type="button" value="异步验证登录" onclick="check_verify()">--> <!--<input type="submit" value="post提交登录">--> <p id="captcha