不学网

 找回密码
 立即注册

只需一步,快速开始

手机号码,快捷登录

查看: 35|回复: 0

[python] Django之图片滑动验证

[复制链接]
jasonlv 发表于 6 天前 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 jasonlv 于 2018-4-14 19:04 编辑


1、前端HTML + JS 代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录</title>
  6. </head>
  7. <body>
  8. <form action="/login/" method="post">
  9.     {% csrf_token %}
  10.     <div>
  11.         <label for="uname">用户名</label>
  12.         <input type="text" name="uname" id="uname">
  13.     </div>
  14.     <div>
  15.         <label for="passwd">密码</label>
  16.         <input type="password" name="passwd" id="passwd">
  17.     </div>
  18.     <input type="button" value="登录" id="popup-submit">
  19.     <span> {{ errorinfo }}</span>

  20.     <div id="popup-captcha"></div>

  21.     <span>
  22.         <img src="/verify_code/" alt="" width="200px" height="35px">
  23.     </span>
  24. </form>
  25. <a href="/index/">进入首页</a>
  26. <!-- 为使用方便,直接使用jquery.js库,如您代码中不需要,可以去掉 -->
  27. <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  28. <script src="http://static.geetest.com/static/tools/gt.js"></script>
  29. <script>
  30.     var handlerPopup = function (captchaObj) {
  31.         // 成功的回调
  32.         captchaObj.onSuccess(function () {
  33.             var validate = captchaObj.getValidate();
  34.             $.ajax({
  35.                 url: "/pc-geetest/ajax_validate", // 进行二次验证
  36.                 type: "post",
  37.                 dataType: "json",
  38.                 data: {
  39.                     csrfmiddlewaretoken:$("[name=csrfmiddlewaretoken]").val(),
  40.                     username: $('#uname').val(),
  41.                     password: $('#passwd').val(),
  42.                     geetest_challenge: validate.geetest_challenge,
  43.                     geetest_validate: validate.geetest_validate,
  44.                     geetest_seccode: validate.geetest_seccode
  45.                 },
  46.                 success: function (data) {
  47.                     if (data && (data.status === "success")) {
  48.                         $(document.body).html('<h1>登录成功</h1>');
  49.                     } else {
  50.                         $(document.body).html('<h1>登录失败</h1>');
  51.                     }
  52.                 }
  53.             });
  54.         });
  55.         $("#popup-submit").click(function () {
  56.             captchaObj.show();
  57.         });
  58.         // 将验证码加到id为captcha的元素里
  59.         captchaObj.appendTo("#popup-captcha");
  60.         // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
  61.     };
  62.     // 验证开始需要向网站主后台获取id,challenge,success(是否启用failback)
  63.     $.ajax({
  64.         url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
  65.         type: "get",
  66.         dataType: "json",
  67.         success: function (data) {
  68.             // 使用initGeetest接口
  69.             // 参数1:配置参数
  70.             // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
  71.             initGeetest({
  72.                 gt: data.gt,
  73.                 challenge: data.challenge,
  74.                 product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
  75.                 offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
  76.                 // 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config
  77.             }, handlerPopup);
  78.         }
  79.     });
  80. </script>
  81. </body>
  82. </html>
复制代码


2、后端Django代码如下:

    urls.py的映射关系如下:
  1. urlpatterns = [
  2.     url(r'^admin/', admin.site.urls),
  3.     url(r'^login/', views.login),
  4.     url(r'^index/', views.index),
  5.     url(r'^loginout/', views.loginout),
  6.     # 图片验证码
  7.     url(r'^verify_code/', views.verify_code),
  8.     # 滑动验证码所需
  9.     url(r'^pc-geetest/register', views.pcgetcaptcha),
  10.     url(r'^pc-geetest/ajax_validate', views.pcajax_validate),
  11.     url(r'^pc-geetest/ajax_validate', views.pcajax_validate),
  12. ]
复制代码


    app目录的文件地址下载:
  下载:app.rar



    views.py视图中需要引用的模块如下:

  1. from django.shortcuts import render,HttpResponse,redirect
  2. from app01.models import *
  3. from app.geetest import GeetestLib
  4. import json

  5. pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
  6. pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
  7. mobile_geetest_id = "7c25da6fe21944cfe507d2f9876775a9"
  8. mobile_geetest_key = "f5883f4ee3bd4fa8caec67941de1b903"
  9. # Create your views here.
复制代码


    pcgetcaptcha函数代码如下:

  1. # 滑动验证码默认所需
  2. def pcgetcaptcha(request):
  3.     user_id = 'test'
  4.     gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  5.     status = gt.pre_process(user_id)
  6.     request.session[gt.GT_STATUS_SESSION_KEY] = status
  7.     request.session["user_id"] = user_id
  8.     response_str = gt.get_response_str()
  9.     return HttpResponse(response_str)
复制代码

    pcajax_validate函数代码如下,最后的用户验证逻辑可以无视:
  1. # 滑动验证码验证+用户登录验证
  2. def pcajax_validate(request):
  3.     if request.method == "POST":
  4.         gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  5.         challenge = request.POST.get(gt.FN_CHALLENGE, '')
  6.         validate = request.POST.get(gt.FN_VALIDATE, '')
  7.         seccode = request.POST.get(gt.FN_SECCODE, '')
  8.         status = request.session[gt.GT_STATUS_SESSION_KEY]
  9.         user_id = request.session["user_id"]

  10.         # 取出用户名和密码
  11.         now_user = request.POST.get("username")
  12.         now_passwd = request.POST.get("password")
  13.         print("{}:{}".format(now_user,now_passwd))
  14.         # 验证码验证
  15.         if status:
  16.             result = gt.success_validate(challenge, validate, seccode, user_id)
  17.         else:
  18.             result = gt.failback_validate(challenge, validate, seccode)
  19.         result = {"status":"success"} if result else {"status":"fail","msg":"验证错误!"}
  20.         # 用户验证
  21.         user = auth.authenticate(username=now_user,password=now_passwd)
  22.         if user:
  23.             result = {"status": "success"}
  24.             request.session = user
  25.         else :
  26.             result = {"status":"fail","msg":"用户名或密码错误!"}
  27.         return HttpResponse(json.dumps(result))
  28.     return HttpResponse("error")
复制代码


本文地址:http://www.jasonlv.cc





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|不学网

GMT+8, 2018-4-20 20:55

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表