使用python实现滑动验证码功能


Posted in Python onAugust 05, 2019

首先安装一个需要用到的模块

pip install social-auth-app-django

安装完后在终端输入pip list会看到

social-auth-app-django 3.1.0
social-auth-core    3.0.0

然后可以来我的github,下载关于滑动验证码的这个demo:https://github.com/Edward66/slide_auth_code

下载完后启动项目

python manage.py runserver

启动这个项目后,在主页就能看到示例

使用python实现滑动验证码功能

前端部分

随便选择一个(最下面的是移动端,不做移动端不要选)把html和js代码复制过来,我选择的是弹出式的。这里面要注意他的ajax请求发送的网址,你可以把这个网址改成自己视图函数对应的网址,自己写里面的逻辑,比如我是为了做用户登陆验证,所以我是写的逻辑是拿用户输入的账号、密码和数据库里的做匹配。

login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆页面</title>
  <link rel="stylesheet" href="/static/blog/css/slide_auth_code.css" rel="external nofollow" >
  <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css" rel="external nofollow" >
</head>
<body>
<h3>登陆页面</h3>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="popup">
        <form id="fm">
          {% csrf_token %}
          <div class="form-group">
            <label for="id_user">用户名:</label>
            <input name="user" id="id_user" class="form-control" type="text">
          </div>
          <div class="form-group">
            <label for="id_pwd">密码:</label>
            <input name="pwd" id="id_pwd" class="form-control" type="password">
          </div>
          <input class="btn btn-default" id="popup-submit" type="button" value="提交">
          <span id="error-info"></span>
          <a href="{% url 'blog:register' %}" rel="external nofollow" class="btn btn-success pull-right">注册</a>
        </form>
        <div id="popup-captcha"></div>
      </div>
    </div>
  </div>
</div>

<script src="/static/blog/js/jquery-3.3.1.js"></script>
<script src="/static/blog/js/gt.js"></script>
<script src="/static/blog/js/slide_auth_code.js"></script>

login.js

let handlerPopup = function (captchaObj) {
  // 成功的回调
  captchaObj.onSuccess(function () {
    let validate = captchaObj.getValidate();
    $.ajax({
      url: "", // 进行二次验证
      type: "post",
      dataType: "json",
      data: $('#fm').serialize(),

      success: function (data) {
        if (data.user) {
          location.href = '/index/'
        } else {
          $('#error-info').text(data.msg).css({'color': 'red', 'margin-left': '10px'});
          setTimeout(function () {
            $('#error-info').text('');
          }, 3000)
        }
      }
    });
  });
  $("#popup-submit").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: "/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);
  }
});

注意:我是把ajax请求的url改成了当前页面的视图函数。另外原生代码是全部写在html里的,我把它做了解耦。还有原生代码用的是jquery-1.12.3,我改成了jquery-3.3.1,也可以正常使用。

后端部分

urls.py

由于后端的逻辑是自己写的,这里只需要用到pcgetcaptcha这部分代码,来处理验证部分。

首先在urls.py里加入路径

from django.urls import path, re_path
from blog.views import slide_code_auth
# 滑动验证码
path('login/', views.login),
re_path(r'^pc-geetest/register', slide_code_auth, name='pcgetcaptcha'),
# slide_auth_code是我自己写的名字,原名是pcgetcaptcha

我把pcgetcaptcha的逻辑部分放到了utils/slide_auth_code.py里面,当做工具使用

utils/slide_auth_code.py

from blog.geetest import GeetestLib
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
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()
  return response_str
# pc_geetest_id和pc_geetest_key不可省略,如果做移动端要加上mobile_geetest_id和mobile_geetest_key

views.py

from django.contrib import auth
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from blog.utils.slide_auth_code import pcgetcaptcha
def login(request):
  if request.method == "POST":
    response = {'user': None, 'msg': None}
    user = request.POST.get('user')
    pwd = request.POST.get('pwd')
    user = auth.authenticate(username=user, password=pwd)
    if user:
      auth.login(request, user)
      response['user'] = user.username
    else:
      response['msg'] = '用户名或密码错误'
    return JsonResponse(response)
  return render(request, 'login.html')
# 滑动验证码
def slide_code_auth(request):
  response_str = pcgetcaptcha(request)
  return HttpResponse(response_str)
def index(request):
  return render(request, 'index.html')

注意:不一定非要按照我这样,根据自己的需求选择相应的功能并做出相应的修改

**修改相应代码,把滑动验证用到注册页面**

register.js

// 头像预览功能
$('#id_avatar').change(function () {  // 图片发生了变化,所以要用change事件
  // 获取用户选中的文件对象
  let file_obj = $(this)[0].files[0];
  // 获取文件对象的路径
  let reader = new FileReader(); // 等同于在python里拿到了实例对象
  reader.readAsDataURL(file_obj);
  reader.onload = function () {
    // 修改img的src属性,src = 文件对象的路径
    $("#avatar_img").attr('src', reader.result); // 这个是异步,速度比reader读取路径要快,
                           // 所以要等reader加载完后在执行。
  };
});
// 基于Ajax提交数据
let handlerPopup = function (captchaObj) {
  // 成功的回调
  captchaObj.onSuccess(function () {
    let validate = captchaObj.getValidate();
    let formdata = new FormData(); // 相当于python里实例化一个对象
    let request_data = $('#fm').serializeArray();
    $.each(request_data, function (index, data) {
      formdata.append(data.name, data.value)
    });
    formdata.append('avatar', $('#id_avatar')[0].files[0]);
    $.ajax({
      url: '',
      type: 'post',
      contentType: false,
      processData: false,
      data: formdata,
      success: function (data) {
        if (data.user) {
          // 注册成功
          location.href = '/login/'
        } else {
          // 注册失败
          // 清空错误信息,每次展示错误信息前,先把之前的清空了。
          $('span.error-info').html("");
          $('.form-group').removeClass('has-error');
          // 展示此次提交的错误信息
          $.each(data.msg, function (field, error_list) {
            if (field === '__all__') { // 全局错误信息,在全局钩子里自己定义的
              $('#id_re_pwd').next().html(error_list[0]);
            }
            $('#id_' + field).next().html(error_list[0]);
            $('#id_' + field).parent().addClass('has-error'); // has-error是bootstrap提供的
          });
        }
      }
    })
  });
  $("#popup-submit").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: "/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);
  }
});

views.py

根据需求自己写逻辑

总结:滑动验证主要用到的是js部分,只需修改ajax里传递的值就好,后台逻辑自己写。

以上所述是小编给大家介绍的使用python实现滑动验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Python 相关文章推荐
python实现矩阵乘法的方法
Jun 28 Python
Java多线程编程中ThreadLocal类的用法及深入
Jun 21 Python
Python实现在线音乐播放器
Mar 03 Python
python实现识别手写数字 python图像识别算法
Mar 23 Python
利用Python将文本中的中英文分离方法
Oct 31 Python
Python3 Post登录并且保存cookie登录其他页面的方法
Dec 28 Python
Python I/O与进程的详细讲解
Mar 08 Python
python 绘制拟合曲线并加指定点标识的实现
Jul 10 Python
pycharm重命名文件的方法步骤
Jul 29 Python
Python+Opencv身份证号码区域提取及识别实现
Aug 25 Python
通过实例了解python__slots__使用方法
Sep 14 Python
一文带你掌握Pyecharts地理数据可视化的方法
Feb 06 Python
Django 源码WSGI剖析过程详解
Aug 05 #Python
Python使用itchat 功能分析微信好友性别和位置
Aug 05 #Python
Python队列RabbitMQ 使用方法实例记录
Aug 05 #Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
Aug 05 #Python
基于python框架Scrapy爬取自己的博客内容过程详解
Aug 05 #Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
Aug 05 #Python
使用coverage统计python web项目代码覆盖率的方法详解
Aug 05 #Python
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
理工科学生的自我评价
2013/12/15 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
小学开学寄语
2014/01/19 职场文书
岗位职责风险点
2014/03/12 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
图书室标语
2014/06/21 职场文书
就业协议书样本
2014/08/20 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
小学生教师节广播稿
2015/08/19 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
分享7个 Python 实战项目练习
2022/03/03 Python