Thinkphp5下引用极验验证码

来源:互联网 发布:广电网络业绩 编辑:程序博客网 时间:2024/06/07 03:07

1、下载
git 命令下载
git clone https://github.com/GeeTeam/gt3-php-sdk.git

2、配置接口
GeetestLib共有四个接口,分别是:

1.     1. 预处理接口pre_process    2. 获取验证字符串接口get_response_str    3. 二次验证接口success_validate    4. 本地二次验证接口failback_validate

在调用GeetestLib前请正确配置从极验3.0后台注册获取的公钥(id)和私钥(key)

修改配置:
用git命令下载下来的是不用修改的

内容

public function pre_process($user_id = null, $new_captcha=1){$data = array('gt'=>$this->captcha_id,'new_captcha'=>$new_captcha);if (($user_id != null) and (is_string($user_id))) {$data['user_id'] = $user_id;}$query = http_build_query($data);$url = "http://api.geetest.com/register.php?" . $query;$challenge = $this->send_request($url);if (strlen($challenge) != 32) {$this->failback_process();return 0;}$this->success_process($challenge);return 1;}
/*** 正常模式获取验证结果** @param $challenge* @param $validate* @param $seccode* @param null $user_id* @return int*/public function success_validate($challenge, $validate, $seccode, $user_id = null, $data='', $userinfo='', $json_format=1){if (!$this->check_validate($challenge, $validate)) {return 0;}$query = array("seccode" => $seccode,"data"=>$data,"timestamp"=>time(),"challenge"=>$challenge,"userinfo"=>$userinfo,"captchaid"=>$this->captcha_id,"json_format"=>$json_format,"sdk" => self::GT_SDK_VERSION);if (($user_id != null) and (is_string($user_id))) {$query["user_id"] = $user_id;}$url = "http://api.geetest.com/validate.php";$codevalidate = $this->post_request($url, $query);$obj = json_decode($codevalidate);if ($obj->{'seccode'} == md5($seccode)) {return 1;} else {return 0;}}/*** 宕机模式获取验证结果** @param $challenge* @param $validate* @param $seccode* @return int*/public function fail_validate($challenge, $validate, $seccode){if(md5($challenge) == $validate){return 1;}else{return 0;}}

3 下载下来的sdk放到extend目录下 重命名为geetest
将geetest下lib目录下的class.geetestlib.php 重命名为GeetestLib.php,且类GeetestLib 的命名空间设为namespace geetest\lib;

将web目录下 StartCaptchaServiet.php 命名空间设为 namespace geetest\web;
将web目录下 VerifyLoginServiet.php 命名空间设为 namespace geetest\web;
4 如果要做登录验证
这里写图片描述
在User控制器下use geetest\lib\GeetestLib,并且定义你申请的ID 和 KEY
如下图
这里写图片描述
并在User控制器下增加如下方法
这里写图片描述
5 fetch 的login.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>gt-php-sdk-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>极验验证SDKDemo</h1><form class="popup" action="../extend/geetest/web/VerifyLoginServlet.php" method="post">    <h2>嵌入式Demo,使用表单形式提交二次验证所需的验证结果值</h2>    <br>    <p>        <label for="username2">用户名:</label>        <input class="inp" id="username2" type="text" value="极验验证">    </p>    <br>    <p>        <label for="password2">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>        <input class="inp" id="password2" 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 src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script><script src="/static/index/js/gt.js"></script><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的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode        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: "checkGeetest?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: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效                offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注                // 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config            }, handlerEmbed);        }    });</script></body></html>

将geetest中static中gt.js放到public/static/index/js中

以上就是本次引用的簡單總結,後續會繼續發表自己的一些體會