• 基于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
  • 相关阅读:
    SpringMVC的自定义校验器
    Spring 国际化 异常:No message found under code 'message' for locale 'zh_CN'.
    《Redis实战》学习实践
    博客系统开发问题
    牛人博客
    Lambda表达式
    红黑树
    配置mysql的主从复制
    mysql 存储过程入门
    一个稍复杂的mysql存储过程
  • 原文地址:https://www.cnblogs.com/one-tom/p/11989933.html
Copyright © 2020-2023  润新知