欢迎您, 来到 宁时修博客.^_^

thinkPHP3.2.3之极验验证码

2016/09/06 宁时修 php 4768
今天给大家一个非常好玩的东西,极验验证码,就是大家在各大平台登录的时候都会看到的滑动验证码.^_^

今天给大家一个非常好玩的东西,极验验证码,就是大家在各大平台登录的时候都会看到的滑动验证码.^_^

官方地址:http://www.geetest.com

效果图:QQ截图20160805161140.png

注册获取ID和key

1470303610899536.png


拿到ID 和 KEY 之后下载官方的SDK

下载地址:http://www.geetest.com/install/sections/idx-server-sdk.html#php 下载完之后

将lib/class.geetestlib.php 复制到自己的项目中

我的DEMO是放在 ThinkPHP/Library/Org/Cp/class.geetestlib.php 仅供参考!

反正你只要能放在自己能找到的地方就可以了!


实际案例

1、html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>滑动验证码DEMO</title>
  <style>
     body {
        margin: 50px 0;
        text-align: center;
     }
     .inp {
        border: 1px solid gray;
        padding: 0 10px;
        width: 200px;
        height: 30px;
        font-size: 18px;
     }
     .btn {
        border: 1px solid gray;
        width: 100px;
        height: 30px;
        font-size: 18px;
        cursor: pointer;
     }
     #embed-captcha {
        width: 300px;
        margin: 0 auto;
     }
     .show {
        display: block;
     }
     .hide {
        display: none;
     }
     #notice {
        color: red;
     }
  </style>
</head>
<body>
<h1>ThinkPHP 3.2.3整合之极验验证 Demo</h1>
<br><br>
<hr>
<br><br>
<div class="popup">
  <h2>弹出式Demo,使用<span style="color: #00be67">ajax形式</span>提交二次验证码所需的验证结果值</h2>
  <br>
  <p>
     <labe>用户名:</labe>
     <input class="inp" type="text" value="cocolait博客">
  </p>
  <br>
  <p>
     <label>密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
     <input class="inp" type="password" value="123456">
  </p>

  <br>
  <input class="btn" id="popup-submit" type="button" value="提交">

  <div id="popup-captcha"></div>
</div>

<!-- 为使用方便,直接使用jquery.js库 -->
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<script src="__PUBLIC__/js/jquery-1.11.3.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="__PUBLIC__/js/gt.js"></script>
<!--<script src="http://static.geetest.com/static/tools/gt.js"></script>-->

<script>
  var roots = "{$roots}";
  var handlerPopup = function (captchaObj) {
     $("#popup-submit").click(function () {
        var validate = captchaObj.getValidate();
        if (!validate) {
           layer.msg('请先完成验证.^_^', {
              icon: 6,
              time: 2000
           });
           return;
        }
        $.ajax({
           url: roots +  "/Home/Index/ajaxcheckCode", // 进行二次验证
           type: "post",
           // dataType: "json",
           data: {
              // 二次验证所需的三个值
              geetest_challenge: validate.geetest_challenge,
              geetest_validate: validate.geetest_validate,
              geetest_seccode: validate.geetest_seccode
           },
           //请求成功,回调处理
           success: function (result) {
              if (result.status) {
                 layer.msg(result.msg, {icon: 6,time: 2000},function(){
                    window.location.href = result.url;
                 });
              } else {
                 layer.msg(result.msg, {icon: 6,time: 2000});
              }
           }
        });
     });
     // 弹出式需要绑定触发验证码弹出按钮
     captchaObj.bindOn("#popup-submit");
     // 将验证码加到id为captcha的元素里
     captchaObj.appendTo("#popup-captcha");
     // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
  };
  $.ajax({
     // 获取id,challenge,success(是否启用failback)
     url: roots + "/Home/Index/ajaxShowCode/t/" + (new Date()).getTime(), // 加随机数防止缓存
     type: "get",
     dataType: "json",
     success: function (data) {
        // 使用initGeetest接口
        // 参数1:配置参数
        // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
        initGeetest({
           gt: data.gt,
           challenge: data.challenge,
           product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
           offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
        }, handlerPopup);
     }
  });
</script>
<br><br>
<hr>
<br><br>
<form class="popup" action="/Home/Index/postCheckCode" method="post">
  <h2>嵌入式Demo,使用<span style="color: #00be67">POST表单形式提交</span>二次验证所需的验证结果值</h2>
  <br>
  <p>
     <label for="user">用户名:</label>
     <input class="inp" id="user" type="text" value="cocolait博客">
  </p>
  <br>
  <p>
     <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
     <input class="inp" id="password" type="password" value="123456">
  </p>

  <div id="embed-captcha"></div>
  <p id="wait" class="show">正在加载验证码......</p>
  <p id="notice" class="hide">请先拖动验证码到相应位置</p>

  <br>
  <input class="btn" id="embed-submit" type="submit" value="提交">

</form>

<script>
  var handlerEmbed = function (captchaObj) {
     $("#embed-submit").click(function (e) {
        //未拖动时 检测
        var validate = captchaObj.getValidate();
        if (!validate) {
           $("#notice")[0].className = "show";
           setTimeout(function () {
              $("#notice")[0].className = "hide";
           }, 2000);
           e.preventDefault();
        }
     });
     // 将验证码加到id为captcha的元素里
     captchaObj.appendTo("#embed-captcha");
     captchaObj.onReady(function () {
        $("#wait")[0].className = "hide";
     });
     // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
  };
  $.ajax({
     // 获取id,challenge,success(是否启用failback)
     url: roots +  "/Home/Index/ajaxShowCode/t/" + (new Date()).getTime(), // 加随机数防止缓存
     type: "get",
     dataType: "json",
     success: function (data) {
        // 使用initGeetest接口
        // 参数1:配置参数
        // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
        initGeetest({
           gt: data.gt,
           challenge: data.challenge,
           product: "float", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
           offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
        }, handlerEmbed);
     }
  });
</script>
</body>
</html>


2、PHP端代码处理

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function _initialize(){
        //引入geetest SDK
        require_once THINK_PATH . 'Library/Org/Cp/class.geetestlib.php';
        $this->roots = /;
    }
    //主显示页
    public function index(){
       $this->display();
    }
    //显示滑动验证码
    public function ajaxShowCode () {
        if (IS_AJAX) {
            $GtSdk = new \GeetestLib(C('CAPTCHA_ID'), C('PRIVATE_KEY'));
            $user_id = "test";
            $status = $GtSdk->pre_process($user_id);
            $_SESSION['gtserver'] = $status;
            $_SESSION['user_id'] = $user_id;
            exit($GtSdk->get_response_str());
        }
    }
    //ajax提交验证
    public function ajaxcheckCode () {
        if (IS_AJAX) {
            $GtSdk = new \GeetestLib(C('CAPTCHA_ID'), C('PRIVATE_KEY'));
            $user_id = $_SESSION['user_id'];
            if ($_SESSION['gtserver'] == 1) {
                $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $user_id);
                if ($result) {
                    exit(json_encode(array('status'=>'1','msg'=>'验证成功','url'=>'/Home/Index/win')));
                } else{
                    exit(json_encode(array('status'=>'0','msg'=>'验证失败')));
                }
            }else{
                if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
                    exit(json_encode(array('status'=>'1','msg'=>'验证成功','url'=>'/Home/Index/win')));
                }else{
                    exit(json_encode(array('status'=>'0','msg'=>'验证失败')));
                }
            }
        }
    }
    //POST请求验证
    public function postCheckCode () {
        if (IS_POST) {
            $GtSdk = new \GeetestLib(C('CAPTCHA_ID'), C('PRIVATE_KEY'));
            $user_id = $_SESSION['user_id'];
            if ($_SESSION['gtserver'] == 1) {
                $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $user_id);
                if ($result) {
                    $this->success('验证成功,马上为您跳转...',U('win'));
                } else{
                    $this->error('验证失败,请重试...');
                }
            }else{
                if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
                    $this->success('验证成功,马上为您跳转...',U('win'));
                }else{
                    $this->error('验证失败,请重试...');
                }
            }
        }
    }
    //验证成功
    public function win(){
        header('content-type:text/html;charset=utf-8');
        echo "<h1 style='color: #1abc9c;margin: 300px auto;width: 500px;height: 300px;line-height: 300px;font-size: 85px;text-align: center;'>成功.^_^</h1>";
    }
}

3、gitee:https://gitee.com/cp.net/geetest_demo


点赞
说说你的看法

所有评论: (1)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群