插件3-滑动验证(geetest)

在这里插入图片描述
一、说明
1.geetest网站:https://docs.geetest.com/install/deploy/server/python
2.安装geetest : pip install geetest
3.使用过程中可能出现模块不存在的问题:请查看requirements.txt安装相应模块
4.下载demo:https://github.com/GeeTeam/gt3-python-sdk/archive/master.zip
5.实例演示如上图
6.ID和KEY要在它们的官网申请.demo里面的只供参考。

二、在Django中使用
1.模板文件中定义一个放置滑动块的部分popup-captcha和一个按钮login-button
在这里插入图片描述
2.模板文件中引入该公司的js文件
<script src="http://static.geetest.com/static/tools/gt.js"></script>
3.模板文件中使用js添加两个功能
（1）点击按钮开始验证时候,向后台请求滑块内容 (为了方便请引入jquery）

 $.ajax({
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerPopup);
        }
    });

（2）滑块验证成功后，发送用户数据到后台进行校验,并返回数据

var handlerPopup = function (captchaObj) {

        // 成功的回调
        captchaObj.onSuccess(function () {
            var username = $("#username").val();
            var password = $("#password").val();

            var validate = captchaObj.getValidate();
            $.ajax({
                url: "{% url 'blog:login' %}", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    username: username,
                    password: password,
                    csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val(),
                    geetest_challenge: validate.geetest_challenge,
                    geetest_validate: validate.geetest_validate,
                    geetest_seccode: validate.geetest_seccode
                },
                success: function (data) {
                    console.log(data)
                    if (data.status) { //验证错误
                        $(".login-error").text(data.msg);
                    } else { //验证成功
                        location.href=data.msg;
                    }
                }
            });
        });
        $("#login-button").click(function () { //点击按钮，显示滑块
            captchaObj.show();
        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#popup-captcha");
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };

4 后端处理两个url请求
a.配置路由
在这里插入图片描述
b. 在views.py中定义各自的视图函数
第一个url对应的视图

# 第三方滑动校验
from geetest import GeetestLib
# 请在官网申请ID使用，示例ID不可使用
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

def pcgetcaptcha(request): #生成滑动校验内容
    print('hhhhh')
    user_id = 'test'
    gt = GeetestLib(pc_geetest_id, pc_geetest_key)
    status = gt.pre_process(user_id)
    request.session[gt.GT_STATUS_SESSION_KEY] = status
    request.session["user_id"] = user_id
    response_str = gt.get_response_str()
    return HttpResponse(response_str)

第二个url对应的视图


def login(request):
    """
    滑动拖块校验+用户数据校验
    :param request:
    :return:
    """
    if request.method == "POST":
        # 初始化一个给ajax的返回数据:
        ret = {"status":0,"msg":""}
        # 滑动块部分
        gt = GeetestLib(pc_geetest_id, pc_geetest_key)
        challenge = request.POST.get(gt.FN_CHALLENGE, '')
        validate = request.POST.get(gt.FN_VALIDATE, '')
        seccode = request.POST.get(gt.FN_SECCODE, '')
        status = request.session[gt.GT_STATUS_SESSION_KEY]
        user_id = request.session["user_id"]

        if status:
            result = gt.success_validate(challenge, validate, seccode, user_id)
        else:
            result = gt.failback_validate(challenge, validate, seccode)

        if result:
          # 自己填充自己的逻辑部分 begin
          # 自己填充自己的逻辑部分 end
        else:
            ret['status'] = 1
            ret['msg'] = "验证码错误"

        return JsonResponse(ret)
    return render(request,"模板文件.html")

三、扩展
1.不仅支持pc端，也支持移动端
2.demo实例请自己下载研究,比较简单上手
3.更多geetest插件问题请访问 https://www.geetest.com/

插件3-滑动验证(geetest)

猜你喜欢