python

-----------------  滑块接口  -----------------

0：大体思路：点击登陆按钮的时候会进行第一次验证（滑块验证），然后访问后台滑块接口，并返回验证结果，如果滑块接口通过则进入第二次验证（登陆的用户名密码验证），访问登陆接口，并返回验证结果

一：前端

1. HTMl

        <form action="" method="post" class="layui-form">
            {% csrf_token %}
            <input name="email" id="username" placeholder="输入电子邮箱"  type="text" lay-verify="required" class="layui-input" value="{{ email }}">
            <hr class="hr15">
            <input name="password" id="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" value="{{ password }}">
            <hr class="hr15">
            <div id="popup-captcha"></div>　　# 这个是滑块显示的div 
            <input value="登录" lay-submit lay-filter="login" id="login" style="100%;" type="button">　　# 这里需要设置 id="login"
            <hr class="hr15" >
            <span style="color: red;" id="error">{{ error_login }}</span>
            <hr class="hr15" >
            <a href="/register/retrieve" style="float: left">忘记密码?</a>
            <a href="/register" style="float: right">立即注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </form>

2. js 文件

// 引入滑块的 js 文件
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
        $(function(){

            // 登陆验证结果   ajax
            var handlerPopup = function (captchaObj) {
            // 成功的回调
            captchaObj.onSuccess(function () {
                var validate = captchaObj.getValidate();
                let username = $('#login_user_name').val();　// 要验证的用户名
                let password = $('#login_password').val();　 // 要验证的密码

                        // 账号

                $.ajax({
                    url: "/login/", // 进行二次验证（登陆验证），输入验证登陆的用户名和密码的接口
                    type: "post",
                    async : false,
                    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.res){
                            console.log(data);
                            location.href = data.url
                        }else{
                            $('#user_res').addClass('show_error')
                        }
                    }
                });
                });

                $("#login").click(function () {
                    captchaObj.show();
                });
                // 将验证码加到id为captcha的元素里
                captchaObj.appendTo("#popup-captcha");
                // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
            };


            // 滑块显示
            $.ajax({
                url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
                type: "get",
                dataType: "json",
                async : false,
                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);
                }
            });
        })
    </script>

二：Python 后端

  - URL

urlpatterns = [
    # 登陆   
    re_path('^login/$',views.login),    

    # 滑块接口
    re_path('^pc-geetest/register',views.get_geetest),   
]

 

  - Views

from geetest import GeetestLib

# 滑块验证
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

def get_geetest(request):
    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)