下载第三方模块

导入模块social-auth-app-django 和geetest 提前去官网下载gt.js或者引入http://static.geetest.com/static/tools/gt.js

pip install social-auth-app-django

pip install geetest

在django引用

1.目录结构

2.html层

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

    <style>

        .error{

    color: red;

    }

    </style>

</head>

<body>

<h3>登录</h3>

<!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 -->

<script type="text/javascript" src="/static/bootstrap/js/jquery-3.3.1.js"></script>

<script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>

<!-- 引入封装了failback的接口--initGeetest -->

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

 <div class="container">

        <div class="row">

            <div class="col-md-6 col-md-offset-3">

                <div class="panel panel-default login">

                    <div class="panel-heading">

                        <p class="h3">登录&nbsp;&nbsp;博客账号</p>

                        <p>请在下面的输入框中输入您的用户名和密码</p>

                    </div>

                    <div class="panel-body">

                        <div>

                            {% csrf_token %}

                            <div class="form-group">

                                <input type="text" class="form-control input-lg" id="user" placeholder="用户名">

                            </div>

                            <div class="form-group">

                                <input type="password" class="form-control input-lg" id="pwd" placeholder="密码">

                            </div>

                            <div class="form-group popup-div">

                                <!-- 放置极验的滑动验证码 -->

                                <div id="popup-captcha"></div>

                            </div>

                            <div class="form-group">

                                <button class="btn btn-block btn-primary btn-lg" id="login-button" >登录</button>

                            </div>

                            <span id="error" class="pull-right"></span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

<script>

    //发送数据

    var handlerPopup = function (captchaObj) {

    // 成功的回调

    captchaObj.onSuccess(function () {

        var validate = captchaObj.getValidate();

        var username = $("#user").val();

        var password = $("#pwd").val();

        $.ajax({

            url: "/blog/geelogin/", // 进行二次验证

            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) {

                if(data.status){

                    $('#error').text(data.msg).css({'margin-left':'10px','color':'red'})

                }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

};

    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）

    $.ajax({

        url: "/blog/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);

        }

    });

</script>

</body>

</html>

3.urls.py

from django.contrib import admin

from django.urls import path

from django.urls import re_path,include

from blog import views

urlpatterns = [

    # path('admin/', admin.site.urls),

    # re_path(r"blog/", include(('blog.urls', 'blog'))),  # 分发

    path('login/',views.login),

    path('get_valid_img/',views.get_validCode_img),

    path('index/',views.index),

    path('geeindex/', views.geeindex),

    re_path(r"^pc-geetest/register",views.get_geetest),

    # re_path(r'^pc-geetest/validate$',views.pcvalidate),

    # re_path(r'^pc-geetest/ajax_validate', views.pcajax_validate),

    path('geelogin/',views.geelogin),

]

4.views.py

from django.shortcuts import render,HttpResponse

# Create your views here.

from django.http import JsonResponse

from django.contrib import auth

pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"

pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

def geelogin(request):

    """

    登录

    :param request:

    :return:

    """

    if request.method == 'POST':

        ret = {

            'status': None,

            'msg': '',

        }

        username = request.POST.get("username")

        password = request.POST.get("password")

        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:

            # 验证码正确

            # 利用auth模块做用户名和密码的校验

            user = auth.authenticate(username=username, password=password)

            if user:

                # 用户名密码正确

                # 给用户做登录

                auth.login(request, user)  # 将登录用户赋值给 request.user

                ret["msg"] = "/blog/index/"

            else:

                # 用户名密码错误

                ret["status"] = 1

                ret["msg"] = "用户名或密码错误！"

        else:

            ret["status"] = 1

            ret["msg"] = "验证码错误"

        return JsonResponse(ret)

    else:

        return render(request,'geelogin.html')

def index(request):

    return render(request, 'index.html')

from geetest import GeetestLib

# 处理极验 获取验证码的视图

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)

5.index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

<h3>首页{{ request.user }}</h3>

</body>

</html>

　　

Django中使用geetest实现滑动验证的更多相关文章

  1. Django中使用geetest验证

    一.geetest的使用方法 首先需要在setting中配置好文件 GEE_TEST = { "gee_test_access_id": "37ca5631edd1e88 ...

  2. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

  3. day 88 Vue学习之八geetest滑动验证

      本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...

  4. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  5. 滑动验证的设计与实现J2EE

    滑动验证的设计与实现J2EE 注:本博文为博主原创,转载请注明出处. 项目源码地址:https://github.com/zhangxy1035/Verify 本篇博文的主要目录如下: 一.项目简介二 ...

  6. Django中使用极验Geetest滑动验证码

    一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...

  7. DRF 中使用 级验科技滑动验证

    接口的login 登录 使用 Django 中的 auth 认证 因为之前合并了 django 的 用户表 创建的 用户 密码 会在内部进行加密 不知道加密方式所以要使用 authenticate 来 ...

  8. VUE中使用geetest滑动验证码

    一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...

  9. Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

随机推荐

  1. 按键精灵PC版<末日王者>

    更新模式[强制] 更新版本[1.28] 更新链接[https://yunfei-1256035889.cos.ap-beijing.myqcloud.com/%E6%9C%AB%E6%97%A5%E4 ...

  2. native的详细用法

    目录 1.JNI:Java Native Interface 3.用C语言编写程序本地方法 一.编写带有 native 声明的方法的java类 二.使用 javac 命令编译所编写的java类,生成. ...

  3. 3步永久性激活pycharm 亲测有效

    ----------破解后,有效时间会到2099年------------ 1.下载JAR包:此JAR包的目的就是让截获截止时间并骗过pycharm 链接:https://pan.baidu.com/ ...

  4. 什么是HTTP及RFC

      HTTP:超文本传输协议(HyperText Transfer Protocol),是互联网上应用最为广泛的一种网络协议. 所有的www文件都必须遵守这个标准.设计HTTP最初的目的是为了提供发布 ...

  5. 针对 jQuery Gridly 控件显示多少列的问题。

    针对 jQuery Gridly 控件显示多少列的问题,完全根据 columns 的值来显示. 但是显示columns,并不是给多少值显示几列.到目前还是很模糊的.官方文档没有给出具体的一个解释. $ ...

  6. STM32L476RG_中断开发与实列

    本程序的主要功能是实现按键控制灯的亮灭.当灯为灭的状态时按键按下点亮灯,当灯为亮的状态时按键按下熄灭灯,即实现灯的电平翻转操作. 按键扫描是利用 GPIO 下降中断,来监测按键按下动作.并加以消抖操作 ...

  7. dotnetcore Http服务器研究（一）

    自从dotnet core 诞生以来,发展非常强势.我们总有些需要写一个独立的http服务器的需求,我想是时候忘记httplistener 了. dotnet framework 时代建一个小的htt ...

  8. jquery ajax中success与complete的执行顺序

    jquery ajax中success与complete的执行顺序 jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) ...

  9. 二维数组的最大子数组和 时间复杂度：O（n的四次方）

    先上代码 小组成员:高达,李奔 package 三月二十一号; import java.io.BufferedReader; import java.io.FileReader; import jav ...

  10. nginx 静态目录配置规则

    1.子目录匹配 如下配置 location / { root /data/www; } 访问http://127.0.0.1/时,配匹配/data/www 访问http://127.0.0.1/ima ...