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

柆 · 发表于 2023-1-17 02:04:40

现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。这里主要介绍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=&#34;GBK&#34; />
  <title>网站管理系统后台</title>
  <script language=&#34;javascript&#34; type=&#34;text/javascript&#34; src=&#34;__JS__/jquery.js&#34;></script>
  <link rel=&#34;stylesheet&#34; href=&#34;__CSS__/jquery.validator.css&#34;>
  <script type=&#34;text/javascript&#34; src=&#34;__JS__/jquery.validator.js&#34;></script>
  <script type=&#34;text/javascript&#34; src=&#34;__JS__/zh_CN.js&#34;></script>
  <link href=&#34;__CSS__/admin_login.css?v20130227&#34; rel=&#34;stylesheet&#34; />
  <script>
$(document).ready(function(){
   var verifyimg = $(&#34;.verifyimg&#34;).attr(&#34;src&#34;);
   $(&#34;.reloadverify&#34;).click(function(){
      if( verifyimg.indexOf(&#39;?&#39;)>0){
      $(&#34;.verifyimg&#34;).attr(&#34;src&#34;, verifyimg+&#39;&random=&#39;+Math.random());
      }else{
      $(&#34;.verifyimg&#34;).attr(&#34;src&#34;, verifyimg.replace(/\?.*$/,&#39;&#39;)+&#39;?&#39;+Math.random());
      }
   });
});
  </script>
</head>
<body>
<div class=&#34;wrap&#34;>
  <h1><a href=&#34;javascript:;&#34; style=&#34;height: 116px; width: 250px;&#34;>后台管理中心</a></h1>
  <form method=&#34;post&#34; action=&#34;{:U(&#39;Admin/Public/cdtsh_log_smfyws&#39;)}&#34;>
<div class=&#34;login&#34;>
   <ul>
      <li>
      <input class=&#34;input&#34; id=&#34;username&#34; name=&#34;username&#34;type=&#34;text&#34; title=&#34;用户名&#34; data-rule=&#34;required;username&#34; placeholder=&#34;用户名&#34; />
      <span class=&#34;msg-box n-right&#34; style=&#34;position:absolute; left: 248px; top: 12px; &#34; for=&#34;username&#34;></span>
      </li>
      <li>
      <input class=&#34;input&#34; name=&#34;password&#34; type=&#34;password&#34; title=&#34;密码&#34; data-rule=&#34;required;password&#34; placeholder=&#34;密码&#34;/>
      <span class=&#34;msg-box n-right&#34; style=&#34;position:absolute;left: 248px; top: 12px;&#34; for=&#34;password&#34;></span>
      </li>
      <li>
      <input class=&#34;input&#34; id=&#34;verify&#34; name=&#34;verify&#34; type=&#34;text&#34; style=&#34;width:130px;&#34; title=&#34;密码&#34; data-ok=&#34; &#34; placeholder=&#34;验证码&#34; data-tip=&#34;输入验证码！&#34; title=&#34;验证码&#34; data-rule=&#34;required;text;remote[{:U(&#39;Admin/Public/check_verify&#39;)}]&#34; />
      <div class=&#34;yanzhengma_box&#34; id=&#34;verifyshow&#34;>  <img class=&#34;verifyimg reloadverify&#34; style=&#34; cursor: pointer;&#34; align=&#34;right&#34; src=&#34;{:U(&#39;public/verify&#39;)}&#34; title=&#34;点击刷新&#34;> </div>
      <span class=&#34;msg-box n-right&#34; style=&#34;position:absolute;left: 248px; top: 12px;&#34; for=&#34;verify&#34;></span>
      </li>
   </ul>
   <ul>
      
      
      <div id=&#34;captcha&#34;></div>
   </ul>
   <button type=&#34;submit&#34; class=&#34;btn&#34; id=&#34;subbtn&#34;>登录</button>
</div>
  </form>
</div>
<script src=&#34;http://static.geetest.com/static/tools/gt.js&#34;></script>
<script>
  var handler = function (captchaObj) {
// 将验证码加到id为captcha的元素里
captchaObj.appendTo(&#34;#captcha&#34;);
};
  // 获取验证码
  $.get(&#34;{:U(&#39;Admin/Public/verifys&#39;)}&#34;, function(data) {
// 使用initGeetest接口
// 参数1：配置参数，与创建Geetest实例时接受的参数一致
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
   gt: data.gt,
   challenge: data.challenge,
   product: &#34;float&#34;, // 产品形式
   offline: !data.success,
   new_captcha:&#39;true&#39;,
   width:&#39;260px&#39;,
}, handler);
  },&#39;json&#39;);
</script>
</body>
</html>

四：验证函数
/Application/Common/Common/function.php
/**
* geetest检测验证码
*/
function geetest_chcek_verify($data){
  $geetest_id = &#34;7149e2021d7938157e&#34;;
  $geetest_key = &#34;62b92039e1e9cf9455&#34;;
  $geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
  $user_id=$_SESSION[&#39;geetest&#39;][&#39;user_id&#39;];
  $ip_address=$_SESSION[&#39;geetest&#39;][&#39;ip_address&#39;];
  $dataa = array(
&#34;user_id&#34; => $user_id, # 网站用户id
&#34;client_type&#34; => &#34;web&#34;, #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
&#34;ip_address&#34; => $ip_address, # 请在此处传输用户请求验证时所携带的IP
  );
  if ($_SESSION[&#39;geetest&#39;][&#39;gtserver&#39;]==1){
$result=$geetest->success_validate($data[&#39;geetest_challenge&#39;], $data[&#39;geetest_validate&#39;], $data[&#39;geetest_seccode&#39;], $dataa);
//return $result;
if ($result) {
   //return 11;
   return true;
} else{
   //return 22;
   return false;
}
  }else{
if ($geetest->fail_validate($data[&#39;geetest_challenge&#39;],$data[&#39;geetest_validate&#39;],$data[&#39;geetest_seccode&#39;])) {
   //return 33;
   return true;
}else{
   //return 44;
   return false;
}
  }
}
//获取id地址
function GetIP() {
  if (!empty($_SERVER[&#34;HTTP_CLIENT_IP&#34;])) {
$cip = $_SERVER[&#34;HTTP_CLIENT_IP&#34;];
  } elseif (!empty($_SERVER[&#34;HTTP_X_FORWARDED_FOR&#34;])) {
$cip = $_SERVER[&#34;HTTP_X_FORWARDED_FOR&#34;];
  } elseif (!empty($_SERVER[&#34;REMOTE_ADDR&#34;])) {
$cip = $_SERVER[&#34;REMOTE_ADDR&#34;];
  } else {
$cip = &#34;无法获取！&#34;;
  }
  return $cip;
}

五：php 生成验证码并验证
//极速验证
  public function verifys(){
//require_once dirname(dirname(dirname(__FILE__))) . &#39;/lib/class.geetestlib.php&#39;;
//require_once dirname(dirname(__FILE__)) . &#39;/config/config.php&#39;;
// $GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
$geetest_id = &#34;7149e2021d7938157e9&#34;;
$geetest_key = &#34;62b92039e1e9cf&#34;;
$geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
//dump($geetest);die;
$user_id = &#34;test&#34;;
$data = array(
   &#34;user_id&#34; => $user_id, # 网站用户id
   &#34;client_type&#34; => &#34;web&#34;, #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
   &#34;ip_address&#34; => GetIP(), # 请在此处传输用户请求验证时所携带的IP
);
$status = $geetest->pre_process($data,1);
//dump($status);
$_SESSION[&#39;geetest&#39;]=array(
   &#39;gtserver&#39;=>$status,
   &#39;user_id&#39;=>$user_id,
   &#39;ip_address&#39;=>GetIP(),
   );
echo $geetest->get_response_str();
  }
public function cdtsh_log_smfyws() {
if ($_SESSION[&#39;userid&#39;]) {
   $this->redirect(&#39;Admin/Index/Index&#39;);
} else {
   if (IS_POST) {
      $username = $_POST[&#39;username&#39;];
      $password = $_POST[&#39;password&#39;];
      //$geetest_challenge = $_POST[&#39;geetest_challenge&#39;];
      //$geetest_validate = $_POST[&#39;geetest_validate&#39;];
      //$geetest_seccode = $_POST[&#39;geetest_seccode&#39;];
      $data=I(&#39;post.&#39;);
      if($data[&#39;geetest_challenge&#39;]==&#34;&#34; || $data[&#39;geetest_validate&#39;]==&#34;&#34; ||$data[&#39;geetest_seccode&#39;]==&#34;&#34; ){
      $this->error(&#39;请进行图形验证&#39;);
      }else{
      //dump(geetest_chcek_verify($data));
      if (geetest_chcek_verify($data)){
         //echo &#39;验证成功&#39;;
         if ($this->loginAdmin($username, $password)) {
            $data = M(&#34;User&#34;)->where(&#34;username=&#39;&#34;.$username.&#34;&#39; and password=&#39;&#34;.md5($password).&#34;&#39;&#34;)->find();
            if ($data[&#34;status&#34;] != 1) {
            //判断是否禁用
            $this->recordLoginAdmin($_POST[&#39;username&#39;], $_POST[&#39;password&#39;], 0, &#34;账号禁用&#34;); //记录登录日志
            $this->error(&#39;该帐号禁用&#39;);
            } else {
            $save[&#34;lastlogin_time&#34;] = time();
            $save[&#34;lastlogin_ip&#34;] = get_client_ip();
            $save[&#34;login_num&#34;] = $data[&#34;login_num&#34;] + 1;
            $status = M(&#34;user&#34;)->where(array(&#34;id&#34; => $data[&#39;id&#39;]))->save($save);
            $_SESSION[&#39;userid&#39;] = $data[&#39;id&#39;];
            $_SESSION[&#39;user&#39;] = $data[&#39;username&#39;];
            $_SESSION[&#39;rid&#39;] = $data[&#39;a_Id&#39;];
            $this->recordLoginAdmin($_POST[&#39;username&#39;], $_POST[&#39;password&#39;], 1); //记录登录日志
            $this->redirect(&#39;Admin/Index/Index&#39;);
            //$this->success(&#39;登录成功&#39;,U(&#39;Admin/Index/Index&#39;));
            }
         } else {
            $this->recordLoginAdmin($_POST[&#39;username&#39;], $_POST[&#39;password&#39;], 0, &#34;账号密码错误&#34;); //记录登录日志
            $this->error(&#39;登录失败&#39;);
         }
      }else{
         //echo &#39;图形验证失败&#39;;
         $this->error(&#39;图形验证失败&#39;);
      }
      }
   } else {
      $this->display();
   }
}
  }

效果图如下：
登录页面

点击验证后

以上内容希望帮助到大家，很多PHPer在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，包括但不限于：分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6，laravel，YII2，Redis，Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家，需要请戳这里链接 或者关注咱们下面的知乎专栏

来源https://www.cnblogs.com/zmdComeOn/archive/2019/06/18/11043037.html

應之 · 发表于 2025-6-8 17:45:18

站位支持

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

浏览过的版块