【原创】 thinkphp整合极验验证码
栏目:ThinkPHP  作者:隆航  阅读:(2034)

thinkphp整合极验验证码,写下自己的笔记,其实很简单。

首先第一步是下载代码

http://www.geetest.com/

注册之后获得最新的ID和KEY,然后和PHP版的服务器代码

第二步就是代码整理

下载后的代码是:

blob.png

官方有对类库的说明写的很详细,这里不就不多说了。

在配置中添加配置项:

    /*验证码配置*/
    'GEE_ID'                   =>  '4c65ff2cf2d4axxxx837a91215fff77',
    'GEE_KEY'                  =>  'e9fc13ecf1178fxxxx80f8f42e5773f',

然后对核心类库添加命名空间:

namespace Org\Util;

然后修改名称为:GeetestLib.class.php

存放目录是 /ThinkPHP/Libary/Org/Util

然后就是在公共类中添加验证码初始化的方法(其实就是官方提供的稍微修改下)

    public function getVerify(){
        $GtSdk = new GeetestLib(C('GEE_ID'), C('GEE_KEY'));
        $user_id = "web";
        $status = $GtSdk->pre_process($user_id);
        session('gtserver',$status);
        session('user_id',$user_id);
        echo $GtSdk->get_response_str();
    }

然后在页面上处理下极验。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</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>
<!-- 为使用方便,直接使用jquery.js库 -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<br><br>
<hr>
<br><br>
<form action="{:U('Home/Index/test')}" method="post">
    <h2>嵌入式Demo,使用表单形式提交二次验证所需的验证结果值</h2>
    <br>
    <p>
        <label for="user">用户名:</label>
        <input id="user" type="text" value="极验验证">
    </p>
    <br>
    <p>
        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <input id="password" type="password" value="123456">
    </p>
    <div id="embed-captcha"></div>
    <p id="wait">正在加载验证码......</p>
    <p id="notice">请先拖动验证码到相应位置</p>
    <br>
    <input 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: "{:U('Home/Index/getVerify',array('t'=>time()))}", // 加随机数防止缓存
        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>

初始化完成之后的提交时前段会自动验证,然后提交给后台之后处理方法是:

    public function test()
    {
        $GtSdk = new GeetestLib(C('GEE_ID'), C('GEE_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) {
                echo 'Yes!';
            } else{
                echo 'No';
            }
        }else{
            if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
                echo "yes";
            }else{
                echo "no";
            }
        }
    }

由于这里的类库是直接实例化的,所以在头部需要use下对应的类库

use Org\Util\GeetestLib;

然后在页面上就可以看到效果了。

blob.png

这里有个坑需要注意了,现在申请的ID和KEY才能用到最新版的。我之前申请的ID和KEY死活不通过,后来换新的就好了。过几天把这个验证码替换到博客上。



山野愚人居
#209

   山野愚人居     2016-12-04 20:03    Win 7      塔吉克斯坦省市

TP框架自己写的,NB

admin

   admin     12-06 09:48    回复 @山野愚人居 中说到:

谢谢支持哈~

哈哈
#189

   哈哈     2016-08-10 18:21    Unknown      北京

不能用啊 亲测 能不能解决下

admin

   admin     08-16 13:47    回复 @哈哈 中说到:

按照上面的迁移类库就可以的,注意最下面的坑

codea
#183

   codea     2016-07-27 19:55    Linux      广东省广州市

不错,学习了!

admin

   admin     08-07 12:07    回复 @codea 中说到:

欢迎欢迎

嘿嘿
#169

   嘿嘿     2016-06-04 19:40    Win 7      湖北省武汉市

咋没看到你换这个验证码呢

admin

   admin     06-04 19:42    回复 @嘿嘿 中说到:

这不是一直没空么

撒旦
#167

   撒旦     2016-06-04 10:38    Win 10      山东省济南市

问一下,怎么制作的这个评论系统。

admin

   admin     06-04 10:59    回复 @撒旦 中说到:

使用的是thinkphp3.2和bootstrap3开发的,在博客上有开源的代码

昵称
邮箱
域名
  记住 通知博主
验证码

  程序相关

站点版本:青春博客-V 2.1.0

开源版本:青春博客-Beta v2.0

 下载  在线支付  在线工具  在线音乐

  随机文章