ThinkPHP5使用极验进行行为验证

第一步:将极验的SDK包放入TP框架的extend目录*<u>(使用SDK包请联系作者)</u>*

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

//验证码
    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)
            }
        });
    });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值