网站对接极验验证之实现ajax

浩瀚博客

发布于 2022-03-23 15:14:03

9400

发布于 2022-03-23 15:14:03

文章被收录于专栏：浩瀚博客

前言

实现步骤

1. 引入类库

首先前台需要引入jquery与极验库js

<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="//static.geetest.com/static/tools/gt.js"></script>

2. 标签head内加入css

<style>
    body {
        margin: 50px 0;
        text-align: center;
        font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    }

    .inp {
        border: 1px solid #cccccc;
        border-radius: 2px;
        padding: 0 10px;
        width: 278px;
        height: 40px;
        font-size: 18px;
    }

    .btn {
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid #cccccc;
        border-radius: 2px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #666;
        cursor: pointer;
        background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
    }

    .btn:hover {
        background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
    }

    #captcha {
        width: 300px;
        display: inline-block;
    }

    label {
        vertical-align: top;
        display: inline-block;
        width: 80px;
        text-align: right;
    }

    #wait {
        text-align: left;
        color: #666;
        margin: 0;
    }
</style>

3. 按钮定义 id="btn"

<input type="button" id="btn" class="nya-btn" style="width:45%" value="按钮">

4. body尾部加入demo js

<script>
    var handler = function (captchaObj) {
        captchaObj.onReady(function () {
            $("#wait").hide();
        }).onSuccess(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
            $.ajax({
                url: 'gt/validate-slide',//二次验证接口，见SDK中/web/VerifyLoginServlet.php，在验证成功处加入自己要执行的代码
                type: 'POST',
                dataType: 'json',//返回的格式
                data: {
                    username: $('#username2').val(),
                    password: $('#password2').val(),
                    geetest_challenge: result.geetest_challenge,//极验验证参数，不能少
                    geetest_validate: result.geetest_validate,//极验验证参数，不能少
                    geetest_seccode: result.geetest_seccode//极验验证参数，不能少
                },
                success: function (data) {//ajax回调
                    if (data.status === 'success') {
                        setTimeout(function () {
                            alert('登录成功');//提示
                        }, 1500);
                    } else if (data.status === 'fail') {
                        setTimeout(function () {
                            alert('登录失败，请完成验证');//提示
                            captchaObj.reset();
                        }, 1500);
                    }
                }
            });
        });
        $('#btn').click(function () {
            // 调用之前先通过前端表单校验
            captchaObj.verify();
        });
    };
    $.ajax({
        url: "gt/register-slide?t=" + (new Date()).getTime(), // 一次验证接口，见SDK中/web/StartCaptchaServlet.php,加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                product: "bind", // 产品形式，包括：float，popup
                width: "300px",
                https: true
            }, handler);
        }
    });
</script>