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

  1. pip install social-auth-app-django

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

  1. social-auth-app-django 3.1.
  2. social-auth-core       3.0.

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

下载完后启动项目

  1. python manage.py runserver

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

前端部分

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

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登陆页面</title>
  6.     <link rel="stylesheet" href="/static/blog/css/slide_auth_code.css">
  7.     <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
  8. </head>
  9.  
  10. <body>
  11.  
  12. <h3>登陆页面</h3>
  13.  
  14. <div class="container">
  15.     <div class="row">
  16.         <div class="col-md-6 col-md-offset-3">
  17.             <div class="popup">
  18.                 <form id="fm">
  19.                     {% csrf_token %}
  20.                     <div class="form-group">
  21.                         <label for="id_user">用户名：</label>
  22.                         <input name="user" id="id_user" class="form-control" type="text">
  23.                     </div>
  24.  
  25.                     <div class="form-group">
  26.                         <label for="id_pwd">密码：</label>
  27.                         <input name="pwd" id="id_pwd" class="form-control" type="password">
  28.                     </div>
  29.  
  30.                     <input class="btn btn-default" id="popup-submit" type="button" value="提交">
  31.                     <span id="error-info"></span>
  32.  
  33.                     <a href="{% url 'blog:register' %}" class="btn btn-success pull-right">注册</a>
  34.                 </form>
  35.                 <div id="popup-captcha"></div>
  36.             </div>
  37.         </div>
  38.     </div>
  39. </div>
  40.  
  41. <script src="/static/blog/js/jquery-3.3.1.js"></script>
  42. <script src="/static/blog/js/gt.js"></script>
  43. <script src="/static/blog/js/slide_auth_code.js"></script>

login.js

  1. let handlerPopup = function (captchaObj) {
  2.     // 成功的回调
  3.     captchaObj.onSuccess(function () {
  4.         let validate = captchaObj.getValidate();
  5.         $.ajax({
  6.             url: "", // 进行二次验证
  7.             type: "post",
  8.             dataType: "json",
  9.             data: $('#fm').serialize(),
  10.  
  11.             success: function (data) {
  12.                 if (data.user) {
  13.                     location.href = '/index/'
  14.                 } else {
  15.                     $('#error-info').text(data.msg).css({'color': 'red', 'margin-left': '10px'});
  16.                     setTimeout(function () {
  17.                         $('#error-info').text('');
  18.                     }, 3000)
  19.                 }
  20.             }
  21.         });
  22.     });
  23.     $("#popup-submit").click(function () {
  24.         captchaObj.show();
  25.     });
  26.     // 将验证码加到id为captcha的元素里
  27.     captchaObj.appendTo("#popup-captcha");
  28.     // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  29. };
  30. // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
  31. $.ajax({
  32.     url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
  33.     type: "get",
  34.     dataType: "json",
  35.     success: function (data) {
  36.         // 使用initGeetest接口
  37.         // 参数1：配置参数
  38.         // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
  39.         initGeetest({
  40.             gt: data.gt,
  41.             challenge: data.challenge,
  42.             product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
  43.             offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
  44.             // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
  45.         }, handlerPopup);
  46.     }
  47. });

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

后端部分

urls.py

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

首先在urls.py里加入路径

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

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

utils/slide_auth_code.py

  1. from blog.geetest import GeetestLib
  2.  
  3. pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
  4. pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
  5.  
  6. def pcgetcaptcha(request):
  7.     user_id = 'test'
  8.     gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  9.     status = gt.pre_process(user_id)
  10.     request.session[gt.GT_STATUS_SESSION_KEY] = status
  11.     request.session["user_id"] = user_id
  12.     response_str = gt.get_response_str()
  13.  
  14.     return response_str
  15.  
  16. # pc_geetest_id和pc_geetest_key不可省略,如果做移动端要加上mobile_geetest_id和mobile_geetest_key

views.py

  1. from django.contrib import auth
  2. from django.shortcuts import render, HttpResponse
  3. from django.http import JsonResponse
  4.  
  5. from blog.utils.slide_auth_code import pcgetcaptcha
  6.  
  7. def login(request):
  8.     if request.method == "POST":
  9.         response = {'user': None, 'msg': None}
  10.         user = request.POST.get('user')
  11.         pwd = request.POST.get('pwd')
  12.  
  13.         user = auth.authenticate(username=user, password=pwd)
  14.  
  15.         if user:
  16.             auth.login(request, user)
  17.             response['user'] = user.username
  18.         else:
  19.             response['msg'] = '用户名或密码错误'
  20.         return JsonResponse(response)
  21.     return render(request, 'login.html')
  22.  
  23. # 滑动验证码
  24. def slide_code_auth(request):
  25.     response_str = pcgetcaptcha(request)
  26.     return HttpResponse(response_str)
  27.  
  28. def index(request):
  29.     return render(request, 'index.html')

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

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

register.js

  1. // 头像预览功能
  2. $('#id_avatar').change(function () {   // 图片发生了变化，所以要用change事件
  3.     // 获取用户选中的文件对象
  4.     let file_obj = $(this)[0].files[0];
  5.  
  6.     // 获取文件对象的路径
  7.     let reader = new FileReader();  // 等同于在python里拿到了实例对象
  8.     reader.readAsDataURL(file_obj);
  9.  
  10.     reader.onload = function () {
  11.         // 修改img的src属性，src = 文件对象的路径
  12.         $("#avatar_img").attr('src', reader.result);  // 这个是异步，速度比reader读取路径要快，
  13.                                                       // 所以要等reader加载完后在执行。
  14.     };
  15. });
  16.  
  17. // 基于Ajax提交数据
  18. let handlerPopup = function (captchaObj) {
  19.     // 成功的回调
  20.     captchaObj.onSuccess(function () {
  21.         let validate = captchaObj.getValidate();
  22.         let formdata = new FormData();  // 相当于python里实例化一个对象
  23.         let request_data = $('#fm').serializeArray();
  24.         $.each(request_data, function (index, data) {
  25.             formdata.append(data.name, data.value)
  26.         });
  27.         formdata.append('avatar', $('#id_avatar')[0].files[0]);
  28.  
  29.         $.ajax({
  30.             url: '',
  31.             type: 'post',
  32.             contentType: false,
  33.             processData: false,
  34.             data: formdata,
  35.             success: function (data) {
  36.                 if (data.user) {
  37.                     // 注册成功
  38.                     location.href = '/login/'
  39.                 } else {
  40.                     // 注册失败
  41.  
  42.                     // 清空错误信息，每次展示错误信息前，先把之前的清空了。
  43.                     $('span.error-info').html("");
  44.                     $('.form-group').removeClass('has-error');
  45.                     // 展示此次提交的错误信息
  46.                     $.each(data.msg, function (field, error_list) {
  47.                         if (field === '__all__') {  // 全局错误信息，在全局钩子里自己定义的
  48.                             $('#id_re_pwd').next().html(error_list[0]);
  49.                         }
  50.                         $('#id_' + field).next().html(error_list[0]);
  51.                         $('#id_' + field).parent().addClass('has-error');  // has-error是bootstrap提供的
  52.                     });
  53.                 }
  54.             }
  55.         })
  56.  
  57.     });
  58.     $("#popup-submit").click(function () {
  59.         captchaObj.show();
  60.     });
  61.     // 将验证码加到id为captcha的元素里
  62.     captchaObj.appendTo("#popup-captcha");
  63.     // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  64. };
  65. // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
  66. $.ajax({
  67.     url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
  68.     type: "get",
  69.     dataType: "json",
  70.     success: function (data) {
  71.         // 使用initGeetest接口
  72.         // 参数1：配置参数
  73.         // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
  74.         initGeetest({
  75.             gt: data.gt,
  76.             challenge: data.challenge,
  77.             product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
  78.             offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
  79.             // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
  80.         }, handlerPopup);
  81.     }
  82. });

views.py

根据需求自己写逻辑

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

使用python实现滑动验证码的更多相关文章

  1. python爬虫21 | 对于b站这样的滑动验证码，不好意思，照样自动识别

    今天 要来说说滑动验证码了 大家应该都很熟悉 点击滑块然后移动到图片缺口进行验证 现在越来越多的网站使用这样的验证方式 为的是增加验证码识别的难度 那么 对于这种验证码 应该怎么破呢 接下来就是 学习 ...

  2. python验证码识别(2)极验滑动验证码识别

    目录 一:极验滑动验证码简介 二:极验滑动验证码识别思路 三:极验验证码识别 一:极验滑动验证码简介   近些年来出现了一些新型验证码,不想旧的验证码对人类不友好,但是这种验证码对于代码来说识别难度上 ...

  3. 用Python写一个滑动验证码

    1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...

  4. Python 破解极验滑动验证码

    Python 破解极验滑动验证码 测试开发社区  1周前 阅读目录 极验滑动验证码 实现 位移移动需要的基础知识 对比两张图片,找出缺口 获得图片 按照位移移动 详细代码 回到顶部 极验滑动验证码 以 ...

  5. Python——破解极验滑动验证码

    极验滑动验证码 以上图片是最典型的要属于极验滑动认证了,极验官网:http://www.geetest.com/. 现在极验验证码已经更新到了 3.0 版本,截至 2017 年 7 月全球已有十六万家 ...

  6. python模拟网站登陆-滑动验证码

    普通滑动验证 以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简单.拖动之前需要先将滚动条滚动到指定元素位置. impor ...

  7. selenium篇之滑动验证码

    一.介绍 现在出现了一种通过用户鼠标移动滑块来填补有缺口图片的验证码,我们叫做滑动验证码.它的原理很简单,首先生成一张图片,然后随机挖去一块,在页面展示被挖去部分的图片,再通过js获取用户滑动距离,以 ...

  8. 爬虫(十二)：图形验证码的识别、滑动验证码的识别（B站滑动验证码）

    1. 验证码识别 随着爬虫的发展,越来越多的网站开始采用各种各样的措施来反爬虫,其中一个措施便是使用验证码.随着技术的发展,验证码也越来越花里胡哨的了.最开始就是几个数字随机组成的图像验证码,后来加入 ...

  9. selenium处理极验滑动验证码

    要爬取一个网站遇到了极验的验证码,这周都在想着怎么破解这个,网上搜了好多知乎上看到有人问了这问题https://www.zhihu.com/question/28833985,我按照这思路去大概实现了 ...

随机推荐

  1. easyui框架中关于dialog自带关闭事件的使用

    easyui是一个开源的第三方控件库,虽然使用比较方便,但其中有些事件和样式会与其他的控件或者框架形成冲突. 今天谈一下easyui 中dialog这个控件(对话框) easyui dialog一般在 ...

  2. 11个炫酷的 Linux 终端命令

    我已经用了十年的Linux了,通过今天这篇文章我将向大家展示一系列的命令.工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我. 1.命令行日常系快捷键 如下的快捷方式非常有用,能够 ...

  3. Python开发环境Wing IDE如何使用调试功能

    在使用Wing IDE开始调试的时候,需要设置断点的行,读取GetItemCount函数的返回.这可以通过单击行并选择Break工具栏条目,或通过单击行左边的黑色边缘.断点应该以实心红圈的形式出现: ...

  4. [转]vim 快捷键整理

    Linux中vim编辑器的功能非常强大,许多常用快捷键用起来非常方便,这里将我学vim入门时学的一些常用的快捷键分享给大家一下,希望可以帮助你们.  原文地址:http://blog.csdn.net ...

  5. HTML 笔记之 HTML 元素的概念

    HTML 不是编程语言,它是一种标记语言 HTML 中常见的几个名词是 元素. 标签(开始标签和结束标签). 属性. 元素内容 这篇文章将要介绍的是 HTML 元素的概念 元素的概念 例子: < ...

  6. UGUI的事件系统分析

    UGUI的源码还是非常清晰的,打开源码可以发现, 从UGUI的源码可知:在EventSystem中调用每一帧函数来实现: private void TickModules() { for (var i ...

  7. Linux最常用命令实战

    1.改变机器的名称: vim /etc/hostname Master 在文件中修改机器名称为我们想要的名称(相当于域名) 可以通过shutdown -h now 关闭 2.查看当前机器IP: ifc ...

  8. 再次尝试windows下msys+MinGW编译ffmpeg

    电脑上安装太多的开源库,环境变量里面一些常用的头文件都有几种,以前使用的编译ffmpeg的方法现在常常提示错误.从config.log中看,这些错误往往都是一些头文件引用错误导致.由于项目中继续编译自 ...

  9. 如何用WebIDE打开并运行CRM Fiori应用

    访问Web IDE url 在Web IDE里进行项目clone操作: https://:8080/#/admin/projects/fnf/customer/cus.crm.opportunity ...

  10. 【mydigitallife.info】如何禁用Aero窗口自动最大化

    Go to Control Panel. Click on Ease of Access link or Ease of Access Center icon. Select Change how y ...