首页-教程-开发语言

详解ThinkPHP5实现极验滑动验证码geetest功能

 3796

下面给大家详解ThinkPHP5实现极验滑动验证码geetest功能，希望对需要的朋友有所帮助！

ThinkPHP5实现极验滑动验证码geetest功能

现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。

这里主要介绍thinkphp整合系列之极验滑动验证码geetest，官网：http://www.geetest.com

具体如下：

一：注册获取key

注册；创建应用；获取key；


6066b55dc87ae.png


二：导入sdk

/ThinkPHP/Library/Org/Xb/GeetestLip.class.php（此处GeetestLip.class.php是我重新命名的geetest类文件，原名为class.geetestlib.php）


6066b5850d653.png


此处牵扯到thinkphp引入第三方类，我把第三方类放到Org/Util/Xb下面了，同时对该类文件加入命名空间如下，否则实例化类时找不到文件


6066b5a22b24a.png


三：生成验证样式

admin/view/public/cdtsh_log_smfyws.php

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="GBK" />
  5.     <title>网站管理系统后台</title>
  6.     <script language="javascript" type="text/javascript" src="__JS__/jquery.js"></script>
  7.     <link rel="stylesheet" href="__CSS__/jquery.validator.css">
  8.     <script type="text/javascript" src="__JS__/jquery.validator.js"></script>
  9.     <script type="text/javascript" src="__JS__/zh_CN.js"></script>
  10.     <link href="__CSS__/admin_login.css?v20130227" rel="stylesheet" />
  11.     <script>
  12.     $(document).ready(function(){
  13.         var verifyimg = $(".verifyimg").attr("src");
  14.         $(".reloadverify").click(function(){
  15.             if( verifyimg.indexOf('?')>0){
  16.                 $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
  17.             }else{
  18.                 $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
  19.             }
  20.         });
  21.     });
  22.     </script>
  23. </head>
  24. <body>
  25. <p class="wrap">
  26.     <h1><a href="javascript:;" style="height: 116px; width: 250px;">后台管理中心</a></h1>
  27.     <form method="post" action="{:U('Admin/Public/cdtsh_log_smfyws')}">
  28.         <p class="login">
  29.             <ul>
  30.                 <li>
  31.                     <input class="input" id="username" name="username"type="text" title="用户名" data-rule="required;username" placeholder="用户名" />
  32.                     <span class="msg-box n-right" style="position:absolute; left: 248px; top: 12px; " for="username"></span>
  33.                 </li>
  34.                 <li>
  35.                     <input class="input" name="password" type="password" title="密码" data-rule="required;password" placeholder="密码"/>
  36.                     <span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="password"></span>
  37.                 </li>
  38.                 <li>
  39.                     <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')}]" />
  40.                     <p class="yanzhengma_box" id="verifyshow">  <img class="verifyimg reloadverify" style=" cursor: pointer;" align="right" src="{:U('public/verify')}" title="点击刷新"> </p>
  41.                     <span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="verify"></span>
  42.                 </li>
  43.             </ul>
  44.             <ul>
  45.                 <!--<input type="button" value="异步验证登录" onclick="check_verify()">-->
  46.                 <!--<input type="submit" value="post提交登录">-->
  47.                 <p id="captcha"></p>
  48.             </ul>
  49.             <button type="submit" class="btn" id="subbtn">登录</button>
  50.         </p>
  51.     </form>
  52. </p>
  53. <script src="http://static.geetest.com/static/tools/gt.js"></script>
  54. <script>
  55.     var handler = function (captchaObj) {
  56.         // 将验证码加到id为captcha的元素里
  57.         captchaObj.appendTo("#captcha");
  58.     };
  59.     // 获取验证码
  60.     $.get("{:U('Admin/Public/verifys')}", function(data) {
  61.         // 使用initGeetest接口
  62.         // 参数1：配置参数，与创建Geetest实例时接受的参数一致
  63.         // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
  64.         initGeetest({
  65.             gt: data.gt,
  66.             challenge: data.challenge,
  67.             product: "float", // 产品形式
  68.             offline: !data.success,
  69.             new_captcha:'true',
  70.             width:'260px',
  71.         }, handler);
  72.     },'json');
  73. </script>
  74. </body>
  75. </html>

四：验证函数

/Application/Common/Common/function.php

  1. /**
  2.  * geetest检测验证码
  3.  */
  4. function geetest_chcek_verify($data){
  5.     $geetest_id = "7149e2021d7938157e";
  6.     $geetest_key = "62b92039e1e9cf9455";
  7.     $geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
  8.     $user_id=$_SESSION['geetest']['user_id'];
  9.     $ip_address=$_SESSION['geetest']['ip_address'];
  10.     $dataa = array(
  11.         "user_id" => $user_id, # 网站用户id
  12.         "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
  13.         "ip_address" => $ip_address, # 请在此处传输用户请求验证时所携带的IP
  14.     );
  15.     if ($_SESSION['geetest']['gtserver']==1){
  16.         $result=$geetest->success_validate($data['geetest_challenge'], $data['geetest_validate'], $data['geetest_seccode'], $dataa);
  17.         //return $result;
  18.         if ($result) {
  19.             //return 11;
  20.             return true;
  21.         } else{
  22.             //return 22;
  23.             return false;
  24.         }
  25.     }else{
  26.         if ($geetest->fail_validate($data['geetest_challenge'],$data['geetest_validate'],$data['geetest_seccode'])) {
  27.             //return 33;
  28.             return true;  
  29.         }else{
  30.             //return 44;
  31.             return false;
  32.         }
  33.     }
  34. }
  35. //获取id地址
  36. function GetIP() {
  37.     if (!empty($_SERVER["HTTP_CLIENT_IP"])) {
  38.         $cip = $_SERVER["HTTP_CLIENT_IP"];
  39.     } elseif (!empty($_SERVER["HTTP_X_FORWARDED_FOR"])) {
  40.         $cip = $_SERVER["HTTP_X_FORWARDED_FOR"];
  41.     } elseif (!empty($_SERVER["REMOTE_ADDR"])) {
  42.         $cip = $_SERVER["REMOTE_ADDR"];
  43.     } else {
  44.         $cip = "无法获取！";
  45.     }
  46.     return $cip;
  47. }

五：php生成验证码并验证

  1. //极速验证
  2. public function verifys(){
  3.     //require_once dirname(dirname(dirname(__FILE__))) . '/lib/class.geetestlib.php';
  4.     //require_once dirname(dirname(__FILE__)) . '/config/config.php';
  5.     // $GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
  6.     $geetest_id = "7149e2021d7938157e9";
  7.     $geetest_key = "62b92039e1e9cf";
  8.     $geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
  9.     //dump($geetest);die;
  10.     $user_id = "test";
  11.     $data = array(
  12.         "user_id" => $user_id, # 网站用户id
  13.         "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
  14.         "ip_address" => GetIP(), # 请在此处传输用户请求验证时所携带的IP
  15.     );
  16.     $status = $geetest->pre_process($data,1);
  17.     //dump($status);
  18.     $_SESSION['geetest']=array(
  19.         'gtserver'=>$status,
  20.         'user_id'=>$user_id,
  21.         'ip_address'=>GetIP(),
  22.     );
  23.     echo $geetest->get_response_str();
  24. }
  25.  public function cdtsh_log_smfyws() {
  26.     if ($_SESSION['userid']) {
  27.         $this->redirect('Admin/Index/Index');
  28.     } else {
  29.         if (IS_POST) {
  30.             $username = $_POST['username'];
  31.             $password = $_POST['password'];
  32.             //$geetest_challenge = $_POST['geetest_challenge'];
  33.             //$geetest_validate = $_POST['geetest_validate'];
  34.             //$geetest_seccode = $_POST['geetest_seccode'];
  35.             $data=I('post.');
  36.             if($data['geetest_challenge']=="" || $data['geetest_validate']=="" ||$data['geetest_seccode']=="" ){
  37.                 $this->error('请进行图形验证');
  38.             }else{
  39.                 //dump(geetest_chcek_verify($data));
  40.                 if (geetest_chcek_verify($data)){
  41.                     //echo '验证成功';
  42.                     if ($this->loginAdmin($username, $password)) {
  43.                         $data = M("User")->where("username='".$username."' and password='".md5($password)."'")->find();
  44.                         if ($data["status"] != 1) {
  45.                             //判断是否禁用
  46.                             $this->recordLoginAdmin($_POST['username'], $_POST['password'], 0, "账号禁用"); //记录登录日志
  47.                             $this->error('该帐号禁用');
  48.                         } else {
  49.                             $save["lastlogin_time"] = time();
  50.                             $save["lastlogin_ip"] = get_client_ip();
  51.                             $save["login_num"] = $data["login_num"] + 1;
  52.                             $status = M("user")->where(array("id" => $data['id']))->save($save);
  53.                             $_SESSION['userid'] = $data['id'];
  54.                             $_SESSION['user'] = $data['username'];
  55.                             $_SESSION['rid'] = $data['a_Id'];
  56.                             $this->recordLoginAdmin($_POST['username'], $_POST['password'], 1); //记录登录日志
  57.                             $this->redirect('Admin/Index/Index');
  58.                             //$this->success('登录成功',U('Admin/Index/Index'));
  59.                         }
  60.                     } else {
  61.                         $this->recordLoginAdmin($_POST['username'], $_POST['password'], 0, "账号密码错误"); //记录登录日志
  62.                         $this->error('登录失败');
  63.                     }
  64.                 }else{
  65.                     //echo '图形验证失败';
  66.                     $this->error('图形验证失败');
  67.                 }
  68.             }
  69.         } else {
  70.             $this->display();
  71.         }
  72.     }
  73. }

效果图如下：

登录页面

6066b75053907.png


点击验证后


6066b786964d2.png


TAG标签：
本文网址：https://www.zztuku.com/detail-8763.html
站长图库 - 详解ThinkPHP5实现极验滑动验证码geetest功能
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐