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

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

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

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

前端部分

随便选择一个(最下面的是移动端,不做移动端不要选)把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实现滑动验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • python验证码识别教程之滑动验证码

    前言 上篇文章记录了2种分割验证码的方法,此外还有一种叫做"滴水算法"(Drop Fall Algorithm)的方法,但本人智商原因看这个算法看的云里雾里的,所以今天记录滑动验证码的处理吧.网上据说有大神已经破解了滑动验证码的算法,可以不使用selenium来破解,但本人能力不足还是使用笨方法吧. 基础原理很简单,首先点击验证码按钮后的图片是滑动后的完整结果,点击一下滑块后会出现拼图,对这2个分别截图后比较像素值来找出滑动距离,并结合selenium来实现拖拽效果. 至于seleni

  • python爬虫之验证码篇3-滑动验证码识别技术

    滑动验证码介绍 本篇涉及到的验证码为滑动验证码,不同于极验证,本验证码难度略低,需要的将滑块拖动到矩形区域右侧即可完成. 这类验证码不常见了,官方介绍地址为:https://promotion.aliyun.com/ntms/act/captchaIntroAndDemo.html 使用起来肯定是非常安全的了,不是很好通过机器检测 如何判断验证码类型 这个验证码的标识一般比较明显,在页面源码中一般存在一个 nc.js 基本可以判定是阿里云的验证码了 <script type="text/j

  • Python 200行代码实现一个滑动验证码过程详解

    前言 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的校验.一般来说,登录注册页面在点击提交的时候都会伴随着一个表单提交,在表单提交的时候会有 JavaScript 事件的触发.如果加入了验证码,那么在表单提交的时候会多加一个额外的验证,判断这个验证码是否已经成功完成了操作.如果没有的话,

  • Python3网络爬虫开发实战之极验滑动验证码的识别

    上节我们了解了图形验证码的识别,简单的图形验证码我们可以直接利用 Tesserocr 来识别,但是近几年又出现了一些新型验证码,如滑动验证码,比较有代表性的就是极验验证码,它需要拖动拼合滑块才可以完成验证,相对图形验证码来说识别难度上升了几个等级,本节来讲解下极验验证码的识别过程. 1. 本节目标 本节我们的目标是用程序来识别并通过极验验证码的验证,其步骤有分析识别思路.识别缺口位置.生成滑块拖动路径,最后模拟实现滑块拼合通过验证. 2. 准备工作 本次我们使用的 Python 库是 Selen

  • 使用Python的OpenCV模块识别滑动验证码的缺口(推荐)

    最近终于找到一个好的方法,使用Python的OpenCV模块识别滑动验证码的缺口,可以将滑动验证码中的缺口识别出来了. 测试使用如下两张图片: target.jpg template.png 现在想要通过"template.png"在"target.jpg"中找到对应的缺口,代码实现如下: # encoding=utf8 import cv2 import numpy as np def show(name): cv2.imshow('Show', name) cv

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

    首先安装一个需要用到的模块 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 中Django验证码功能的实现代码

    为了防止机器人频繁登陆网站或者破坏分子恶意登陆,很多用户登录和注册系统都提供了图形验证码功能. 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart"(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人的公共全自动程序.可以防止恶意破解密码.刷票.论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试. 图形验证

  • vue仿淘宝滑动验证码功能(样式模仿)

    我们知道验证码的目的 是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端 下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件 可以直接使用 1.实际效果 2.PC端!!! vue组

  • mac使用python识别图形验证码功能

    前言 最近在研究验证码相关的操作,所以准备记录下安装以及使用的过程.虽然之前对验证码的破解有所了解的,但是之前都是简单使用之后就不用了,没有记录一个详细的过程,所以后面再用起来也要重新从网上查找资料比较麻烦,所以这里准备对研究过程的关键点做一个记录. 首先这篇文章,主要是研究图形验证码,后期会不定时拓展内容. 在网上查了很多版本的图形验证码识别,目前看到最多的两个模块是pytesseract和tesserocr,但是因为我这里安装tesserocr的时候各种出错,所以最终我锁定了使用pytess

  • 使用Vue 实现滑动验证码功能

    做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的

  • 使用java + selenium + OpenCV破解腾讯防水墙滑动验证码功能

    * 验证码地址:https://007.qq.com/online.html * 使用OpenCv模板匹配 * 成功率90%左右 * Java + Selenium + OpenCV 产品样例 来吧!展示! 注意!!! · 在模拟滑动时不能按照相同速度或者过快的速度滑动,需要向人滑动时一样先快后慢,这样才不容易被识别. 模拟滑动代码↓↓↓ /** * 模拟人工移动 * @param driver * @param element页面滑块 * @param distance需要移动距离 */ pu

  • python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码

    最近学了python爬虫,本着学以致用的态度去应用在生活中.突然发现算法的考试要来了,范围就是PTA刷过的题.让我一个个复制粘贴?不可能,必须爬它! 先开页面,人傻了,PTA的题目是异步加载的,爬了个寂寞(空数据).AJAX我又不熟,突然想到了selenium. selenium可以模拟人的操作让浏览器自动执行动作,具体的自己去了解,不多说了.干货来了: 登录界面有个图片的滑动验证码 破解它的最好方式就是用opencv,opencv巨强,自己了解. 思路开始: 1.将背景图片和可滑动的图片下载

  • python3 破解 geetest(极验)的滑块验证码功能

    下面一段代码给大家介绍python破解geetest 验证码功能,具体代码如下所示: from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.action_chains import ActionChains import PIL.Image as image import time,re, random import

  • python破解bilibili滑动验证码登录功能

    地址:https://passport.bilibili.com/login 左图事完整验证码图,右图是有缺口的验证码图                                    步骤: 1.准备bilibili账号 2.工具:pycharm selenium chromedriver PIL 3.破解思路: 找到完整验证码和有缺口的验证码图片,然后计算缺口坐标,再利用selenium移动按钮到指定位置,齐活 步骤代码如下: 先导入需要的包和库 from selenium impor

  • Python反爬机制-验证码功能的具体实现过程

    目录 识别验证码 1.字符验证码 1.1OCR环境 1.2下载验证码图片 1.3识别验证码 2.第三方验证码识别 3.滑动拼图验证码 识别验证码 ​ OCR(Optical Character Recognition)即光学字符识别技术,专门用于对图片文字进行识别,并获取文本.字符验证码的特点就是验证码中包含数字.字母或者掺杂着斑点与混淆曲线的图片验证码.识别此类验证码,首先需要找到验证码验证码图片在网页HTML代码中的位置,然后将验证码下载,最后再通过OCR技术进行验证码的识别工作. 1. 字

随机推荐