ThinkPHP5.1下使用极验验证


简单记录下如何在ThinkPHP5.1.x版本下快速调用极验验证。
其实总共就五步,非常方便快捷。

第一步

首先,要到极验官网注册账号,申请id和key,选择行为验证即可。极验官网

第二步

其次,在你的tp5项目下打开composer,使用composer require命令下载好我已经准备好的扩展包。
安装命令:composer require huelse/geetest
目前使用的环境是:php7.2thinkphp5.1.34

第三步

然后,在我们的配置config文件夹中新建一个config.php文件,将我们拿到的id和key写入其中,像这样:

第四步

然后,在我们的index控制器下写入代码:

$data = Request::param(); //传入请求数据
if(!geetest_check($data)){
    //验证失败
    return json()->data(false)->code(403);
}

在前端页面完成我们的样式编写和js处理:

CSS样式参照demo.html的style样式48-144行

<!-- 设定DIV -->
<form method="post">
  <input type="text" id="inputUserid" placeholder="账号" required>
  <input type="password" id="inputPassword" placeholder="密码" required>
  <div id="captcha">
    <div id="text">
      行为验证™ 安全组件加载中
    </div>
    <div id="wait" class="show">
      <div class="loading">
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
      </div>
    </div>
  </div>
  <input id="submit" type="button" value="登陆">
</form>

<!-- 引入js库 -->
<!-- 注意,验证码本身是不需要 jquery 库,此处使用 jquery 仅为了在 demo 中使用,减少代码量 -->
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.js";></script>
<script src="https://www.geetest.com/demo/libs/gt.js";></script>

<script>
$(document).ready(function () {
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        $("#submit").click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                alert('请完成验证');
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/', // 自定义接收url
                    dataType: 'json',
                    data: {
                        userId: $('#inputUserid').val(),
                        userPwd: $('#inputPassword').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data) {
                            alert('登陆成功');
                            // 成功后的自定义操作
                        }
                    },
                    error: function (data) {
                        alert('登陆失败');
                        // console.log(JSON.stringify(data));
                        // 失败后的自定义操作
                    },
                });
            }
        });
        window.gt = captchaObj;
    };
    $.ajax({
        url: "geetest.html?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // console.log(data);
            $('#text').hide();
            $('#wait').show();
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "float", // 产品形式,包括:float,embed,popup 等。注意只对PC版验证码有效
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注
            }, handler);
        }
    });
});
</script>

Github-geetest

声明:有限可能|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - ThinkPHP5.1下使用极验验证


Something for nothing