ThinkPHP5使用极验验证码

Posted 2021-05-29 车车大人

第一步：将极验的SDK包放入TP框架的extend目录（使用SDK包请联系作者）

第二步：在框架的某一个控制器下，自定义方法完成获取验证码的操作

    //验证码
    public function getGtCode(){
        //引入第三方文件的方式
        Loader::import(\'jiyan.web.StartCaptchaServlet\');
        //实例化类文件
        $obj = new \\StartCaptchaServlet();
        //获取验证码数据内容
        $res = $obj->getData();
        //输出内容即可
        echo $res;
    }

第三步：在前端页面，将CSS样式放入头文件中

<style>
        #embed-captcha {
            width: 300px;
            padding-left: 0.8em;
        }
        .show {
            text-align: center;
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
        .changepwd {
            margin-left: 150px;
        }
    </style>

第四步：引入jQuery和极验的JS文件，但是要记得，jQuery文件必须在极验文件的前边

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/gt/gt.js"></script>
（极验的文件可以去SDK中找到，放在public目录的static目录下就可以了）

第五步：在页面中嵌入html标签

<!--行为验证开始-->
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
<p id="notice" class="hide">请先完成验证</p>
<!--行为验证结束-->

第六步：JS内容如下，当然个别地方需要进行修改

var handlerEmbed = function (captchaObj) {
        //给按钮点击事件
        $(".sui-btn").click(function () {
            //获取账号密码（自行更改取值）
            var uname = $("#uname").val();
            var upwd = $("#upwd").val();
            //非空验证
            if (uname == "") {
                alert("用户名不能为空");
                return false;
            }
​
            if (upwd == "") {
                alert("密码不能为空");
                return false;
            }
            //智能验证
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                return false;
            }
​
            //请求登录接口（自行更改ajax内容）
            $.ajax({
                url:"{:url(\'Login/login\')}",
                type:"post",
                data:{uname:uname,upwd:upwd},
                dataType:\'json\',
                success:function(e){
                   if(e.code!=0){
                       alert(e.msg);
                       return false;
                   }
​
                   location.href="http://www.tpshop.com/index.php/home/index/index.html"
                }
            })
​
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");//将极验组件与页面元素相关联
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";//初始化操作处理p标签
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
​
    //页面刚刚加载的时候请求极验接口（只需要更改接口地址就可以了）
    $(document).ready(function(){
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            url: "{:url(\'Login/getGtCode\')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (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/);
                },handlerEmbed)
            }
        });
    });