php滑动拼图验证码(极验)

        现在验证码的种类样式特别的多，最近比较流行滑块拼图验证码，下面我们就通过Geetset来实现滑块拼图验证码。

效果如图所示：点击提交之后，就会显示出来滑块验证！


1、首先去 http://www.geetest.com   注册账号，分别获取网页版与移动端的ID与KEY.

2、通过git命令获取github上最新的php版本的sdk。最新版：https://github.com/GeeTeam/gt3-php-sdk.git 

3、将核心sdk类（lib/lass.geetestlib.php）放置到项目中

4、通过define来配置网页端与移动端的ID与KEY。

冷暖自知一抹茶ck

5、前端引入说明。

    ①引入初始化函数

<script src="static/gt.js"></script>

    ②通过div的id指定验证码要显示的位置

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

    ③通过ajax先进行初始化验证（通过failback的接口initGeetest方法），执行回调函数handlerEmbed。

$.ajax({
    // 获取id，challenge，success（是否启用failback）
    url: "web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加随机数防止缓存
    type: "get",
    dataType: "json",
    success: function (data) {
        console.log(data);
        // 使用initGeetest接口
        // 参数1：配置参数
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
        initGeetest({
            gt: data.gt,
            challenge: data.challenge,
            new_captcha: data.new_captcha,
            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
            offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            width: '100%',
            // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
        }, handlerEmbed);
    }
});

    ④点击弹出验证码，并通过ajax对验证后进行二次验证（验证码验证）。

var handlerEmbed = function (captchaObj) {
    $("#popup-submit").click(function (e) {
        var username = $("#username").val();
        var password = $("#password").val();

        var validate = captchaObj.getValidate();
        if (!validate) {
            $("#notice")[0].className = "show";
            setTimeout(function () {
                $("#notice")[0].className = "hide";
            }, 2000);
            e.preventDefault();
        }
        // 提交验证码信息，比如登陆页面，你需要提交登陆信息，用户名和密码等登陆数据
        $.ajax({
            url: "web/VerifyLoginServlet.php",
            type: "post",
            dataType: "json",
            data: {
                // 用户名和密码等其他数据，自己获取，不做演示
                username:username,
                password:password,
                // 验证码数据，这些数据不用自己获取
                // 这是二次验证所需的三个值
                // 当然，你也可以直接设置验证码单独校验，省略其他信息
                geetest_challenge: validate.geetest_challenge,
                geetest_validate: validate.geetest_validate,
                geetest_seccode: validate.geetest_seccode,
            },
            // 这里是正确返回处理结果的处理函数
            // 假设你就返回了1，2，3
            // 当然，正常情况是返回JSON数据
            success: function (data) {
                if (data && (data.status == 1)) {
                    $(document.body).html('<h1>验证码验证失败！</h1>');
                }
                else if(data && (data.status == 2)){
                    $(document.body).html('<h1>登陆成功！！</h1>');
                }
                else if(data && (data.status == 3)){
                    $(document.body).html('<h1>用户名或密码错误！</h1>');
                }else{
                    $(document.body).html('<h1>登陆错误！</h1>');
                }

            }
        });
    });
    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
    captchaObj.appendTo("#popup-captcha");
    captchaObj.onReady(function () {
        $("#wait")[0].className = "hide";
    });
    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
};

    6.后台初始化验证示例代码。

    方法说明：

    GeetestLib($captcha_id, $private_key): 构造函数

    pre_process($user_id=null) : 预处理接口

    get_response_str() : 获取预处理结果的接口

require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php';
require_once dirname(dirname(__FILE__)) . '/config/config.php';
$GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
session_start();

$data = array(
      "user_id" => "test", # 网站用户id
      "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
      "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP
   );

$status = $GtSdk->pre_process($data, 1);
$_SESSION['gtserver'] = $status;
$_SESSION['user_id'] = $data['user_id'];
echo $GtSdk->get_response_str();

    7.二次验证示例代码（验证码校验）。

    方法说明：

        success_validate($challenge, $validate, $seccode, $user_id=null) : 极验服务器状态正常的二次验证接口

        fail_validate($challenge, $validate) : 极验服务器状态宕机的二次验证接口

    返回说明：

        status为success为成功，status为fail为失败，供前端判断使用。

require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php';
require_once dirname(dirname(__FILE__)) . '/config/config.php';
session_start();
$GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);


$data = array(
        "user_id" => $_SESSION['user_id'], # 网站用户id
        "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
        "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP
    );

// 比如你设置了一个验证码是否验证通过的标识
$code_flag=false;
if ($_SESSION['gtserver'] == 1) {   //服务器正常
    $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $data);
    if ($result) {
        // 验证码验证成功
        $code_flag=true;
    }
}else{  //服务器宕机,走failback模式
    if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
        // 验证码验证成功
        $code_flag=true;
    }
}

// 如果验证码验证成功，再进行其他校验
if($code_flag){
    if($_REQUEST['username'] == 'admin' &&  $_REQUEST['password'] == '123456'){
       echo json_encode(array('status'=>2));
    }else{
        echo json_encode(array('status'=>3));
    }

}else{
    // 验证码验证失败，返回1，这里和上面相呼应，当然我的项目没有简单的返回1，而是返回了JSON数据
    echo json_encode(array('status'=>1));
}
exit;

demo示例：链接：http://pan.baidu.com/s/1kUXUuDh   密码：dygd


更多内容，查看官方文档：http://docs.geetest.com/install/overview/ 

官方git示例代码：https://github.com/GeeTeam/gt3-php-sdk

本文为崔凯原创文章,转载无需和我联系,但请注明来自冷暖自知一抹茶ckhttp://www.cksite.cn

冷暖自知一抹茶ck
请先登录后发表评论
  • 最新评论
  • 总共0条评论