下载第三方模块

导入模块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. About Why Inline Member Function Should Defined in The Header File

    About why inline member function should defined in the header file. It is legal to specify inline on ...

  2. git的基本使用方式

    git!git!git!这是一个版本控制工具,本地仓库的话就是一个离线的版本控制工具,为了解决文件回滚和多副本的问题出来的,远程仓库的云端叫github. 这是目前最先进的分布式版本控制系统,下面记录 ...

  3. react native 中实现个别页面禁止截屏

    这里主要用到了原生模块,下面贴出FlagSecureModule.java的代码 package com.studyproj.flagsecure; import android.util.Log; ...

  4. window mysql安装

    1.选择下载版本 接着上几篇文章再来看下windows下安装mysql. 我这里是windows7 64位, 安装过程中还是遇到一些坑,这里记录下. 一.下载安装包 打开mysql官网下载页面:htt ...

  5. Maven导入项目时报错 Could not calculate build plan

    Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.2 or one of its d ...

  6. python 获取mac地址zz

    通过python获取当前mac地址的方法如下:(1)通用方法,借助uuid模块def get_mac_address(): import uuid      node = uuid.getnode() ...

  7. aizhan爱站关键字采集

    功能:支持批量网站查询,支持登录后查询,支持批量导出txt http://blog.ddian.cn/content/uploadfile/201402/dc5c501411f758849b09c09 ...

  8. [R]R包版本更迭【持续更新】

    由于R版本更迭,网上或旧的教材上的包可能没有在维护,或者被其他包替代. 做一个表记录碰到的一些替代方案.个人向,非完整指南. * mvpart 2014年之后不再更新,R 3.0版本后无法安装, 提示 ...

  9. Spring Cloud 微服务笔记（六）Spring Cloud Hystrix

    Spring Cloud Hystrix Hystrix是一个延迟和容错库,旨在隔离远程系统.服务和第三方库,阻止链接故障,在复杂的分布式系统中实现恢复能力. 一.快速入门 1)依赖: <dep ...

  10. Linux虚拟机搭建本地yum源

    Yum本地源的配置 本教程是在虚拟机里安装Red Hat Enterprise Linux 7 ,以其为例使用iso文件进行Yum本地源的配置.所使用的软件如下: (1)虚拟机:Vmware work ...