Django中使用geetest实现滑动验证

下载第三方模块

导入模块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实现滑动验证的更多相关文章

Django中使用geetest验证
一.geetest的使用方法首先需要在setting中配置好文件 GEE_TEST = { "gee_test_access_id": "37ca5631edd1e88 ...
Django中的Form表单验证
回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...
day 88 Vue学习之八geetest滑动验证
本节目录一 geetest前端web中使用二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用下载gt文件,官网地址,下面我 ...
day 86 Vue学习之八geetest滑动验证
Vue学习之八geetest滑动验证本节目录一 geetest前端web中使用二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...
滑动验证的设计与实现J2EE
滑动验证的设计与实现J2EE 注:本博文为博主原创,转载请注明出处. 项目源码地址:https://github.com/zhangxy1035/Verify 本篇博文的主要目录如下: 一.项目简介二 ...
Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
DRF 中使用级验科技滑动验证
接口的login 登录使用 Django 中的 auth 认证因为之前合并了 django 的用户表创建的用户密码会在内部进行加密不知道加密方式所以要使用 authenticate 来 ...
VUE中使用geetest滑动验证码
一,准备工作:服务端部署下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...
Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

随机推荐

ASP.NET Core微服务 on K8S学习笔记（第一章：详解基本对象及服务发现）
课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍任务2:Labels and Selectors 所有资源对 ...
java servlet的域对象
在进行网络编程中的项目时经常用到的域对象主要包括以下三种: 1. ServletContext 作用范围比较大代码如下: //一个请求代码: ServletContext sc = reques ...
POSIX Timer
SYNOPSIS #include <signal.h> /* only timer_create need this header */ #include <time.h> ...
rocketmq生产者代码分析
rocketmq生产者代码分析环境安装参考http://rocketmq.apache.org/docs/quick-start/ ,配置环境变量 export NAMESRV_ADDR=loca ...
Docker 学习2 Docker基础用法
一.docker架构 1.client端 2.server端,docker daemo守护进程,监听在套接字之上.docker支持三种类型套接字. a.ip vs套接字:即IP + 端口套接字 b.i ...
UOJ#266. 【清华集训2016】Alice和Bob又在玩游戏博弈,DSU on Tree,Trie
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ266.html 题解首先我们可以直接暴力 $O(n^2)$ 用 sg 函数来算答案. 对于一个树就是枚举 ...
理解ClassLoader
--摘自<Android进阶解密> *Java中的ClassLoader* 1.系统类加载器包括3种: 1)Bootstrap ClassLoader(引导类加载器) C/C++代码实现的 ...
CTSC2017总结
这个博客已经弃坑近一年了,自从去年国赛大力卡线进队后这近一年来我的情况从博客一年没更就可见一斑,OI水平原(zhi)地(xian)踏(fu)步(chong),炉石和双升的姿势水平倒是提高不少. 在经历 ...
05解决flask循环引用的问题
1, 什么是循环引用问题?为什么会导致循环引用? 1.1先讲是什么? 主文件中class类过多会导致主文件冗余,如下图,所以我们单独给class类一个文件,然后再引用它. 1.2再讲为什么? 主文件为 ...
HTML 5将给开发者带来什么？
在新的时代里,相信网页技术会伴随HTML 5的来临进入大洗牌的局面,HTML 5旨在解决Web中的交互,媒体,本地操作等问题,一些浏览器已经尝试支持HTML 5的一些功能,而开发者们有望最终从那些We ...

Django中使用geetest实现滑动验证

下载第三方模块

在django引用

1.目录结构

2.html层

3.urls.py

4.views.py

5.index.html

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

随机推荐

热门专题