首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

使用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实现滑动验证码功能

- Author -

梁少华

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python 包含汉字的文件读写之每行末尾加上特定字符
Dec 12 Python
Python实现随机选择元素功能
Sep 14 Python
浅析Python3爬虫登录模拟
Feb 07 Python
Python 记录日志的灵活性和可配置性介绍
Feb 27 Python
python numpy 一维数组转变为多维数组的实例
Jul 02 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
Sep 17 Python
对Python 3.2 迭代器的next函数实例讲解
Oct 18 Python
Django基础知识 URL路由系统详解
Jul 18 Python
Python能做什么
Jun 02 Python
Python socket服务常用操作代码实例
Jun 22 Python
python+requests接口自动化框架的实现
Aug 31 Python
python关于集合的知识案例详解
May 30 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
RP-F11(1) 数调机(1) 东芝(1) SONY(15) 手调机(1) 索尼(5) PL-880(1) TOSHIBA(1) ICF-7600(1) 德劲(5)
You might like
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php比较相似字符串的方法
2015/06/05 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue二级路由设置方法
2018/02/09 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
final, finally, finalize的区别
2012/03/01 面试题
前台接待岗位职责
2013/12/03 职场文书
大学生党员自我批评
2014/02/14 职场文书
晚归检讨书
2014/02/19 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
党员年度个人总结
2015/02/14 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers