基于form表单的极验滑动验证小案例

01、目录展示

02、url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/',views.login),
    path('pc-geetest/register/',views.pcgetcaptcha),
    path('index/',views.index),
    # path('pc-geetest/validate/',views.pcvalidate),
]

03、view.py

from django.shortcuts import render

# Create your views here.
from django.shortcuts import HttpResponse, render, redirect
from app01.models import User
from utils.geetest import GeetestLib

pc_geetest_id = "自己注册后得到的id"
pc_geetest_key = "自己注册后得到的key"


def pcgetcaptcha(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()

    print("发到get前段的验证码数据》〉",response_str)
    return HttpResponse(response_str)



def login(request):
    if request.method == "POST":
        print(123123)
        # 前段提交的用户信息
        username = request.POST.get("username")
        pwd = request.POST.get("password")
        print("提交〉〉", username, pwd)
        ret = {"status": False, "msg": None}

        # 验证码操作
        gt = GeetestLib(pc_geetest_id, pc_geetest_key)
        challenge = request.POST.get(gt.FN_CHALLENGE, "")
        validate = request.POST.get(gt.FN_VALIDATE, "")
        secode = request.POST.get(gt.FN_SECCODE, "")
        status = request.session[gt.GT_STATUS_SESSION_KEY]
        user_id = request.session["user_id"]
        print("前端提交的验证码数据〉〉", challenge, validate, secode, status)
        print("user_id>>",user_id)
        print("status>>",status)

        if not status:
            # 失败
            result = gt.failback_validate(challenge, validate, secode)
            ret["msg"] = "验证错误"
        else:
            # 成功
            result = gt.success_validate(challenge, validate, secode)
            # 从数据库中获取用户

            userinfo = User.objects.filter(name=username, pwd=pwd).first()
            if userinfo:
                ret["status"] = True
                ret["msg"] = "登录成功----"
                return render(request, "index.html")
            else:
                ret["msg"] = "用户名或则密码错误"
                print("----", ret)

                return HttpResponse(ret["msg"])
        print("----",ret)

        # return HttpResponse(ret)

    else:

        return render(request, "login.html")

def index(request):

    return HttpResponse("首页---")

04、login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面测试</title>
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <!-- 引入封装了failback的接口--initGeetest -->
    <script src="http://static.geetest.com/static/tools/gt.js"></script>

</head>

<body>
<h1>极验证测试</h1>


<div class="geet">

    <form class="popup" method="post" action="/login/">
        {% csrf_token %}
        <br>
        <p>
            <label for="username">用户名：</label>
            <input class="inp" name="username" type="text">
        </p>
        <br>
        <p>
            <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <input class="inp" name="password" type="password">
        </p>

        <div id="embed-captcha"></div>
        <p id="wait" class="show">正在加载验证码......</p>
        <p id="notice" class="hide">请先拖动验证码到相应位置</p>

        <br>
        <input class="btn" id="embed-submit" type="submit" value="提交">
    </form>


</div>

<div id="popup-captcha">


</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

<script src="http://static.geetest.com/static/tools/gt.js"></script>

<script>

    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };


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

</body>
</html>

View Code