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="width: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)