django项目登录中使用图片验证码的实现方法


Posted in Python onAugust 15, 2019

应用下创建untils文件夹放置封装图片验证码的函数

创建validCode.py文件定义验证码规则

import random
def get_random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
def get_valid_code_img(request):
  # 方式:
  from PIL import Image, ImageDraw, ImageFont
  from io import BytesIO
  import random
  img = Image.new("RGB", (270, 40), color=get_random_color())#生成一个宽270*高40的画布,背景颜色随机
  draw = ImageDraw.Draw(img)#进行绘画
  kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32)#字体 字体大小
  valid_code_str = ""
  for i in range(5):
    random_num = str(random.randint(0, 9))#0-9的随机数 9
    random_low_alpha = chr(random.randint(97, 122))#a 到 z 随机的一个小写字母 b
    random_upper_alpha = chr(random.randint(65, 90))#A 到 Z 随机的一个大写字母 Q
    random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])    #2
    draw.text((i * 50 + 20, 5), random_char, get_random_color(), font=kumo_font) #往长方形上写字
    # 保存验证码字符串
    valid_code_str += random_char #85656
  width=270
  height=40
  for i in range(10):
    # draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())#画小点
    x = random.randint(0, width)
    y = random.randint(0, height)
    draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) #小线段
  request.session["valid_code_str"] = valid_code_str
  f = BytesIO()
  img.save(f, "png") #png
  data = f.getvalue()
  return data

建路由

# 登录
path('login/', login.login,name='login'),
# 图片验证码
re_path('get_valid_code_img/', login.get_valid_code_img, name='get_valid_code_img'),

写后台方法

from blog.utils import validCode # 引入自定义的验证码
#页面返回方法
from django.shortcuts import render, HttpResponse, redirect
#哈希加密
from django.contrib.auth.hashers import make_password, check_password
#数据库
from blog.models import Article, Comment, Member, Praise, Web, Image
# 登陆
def login(request):
  res = {'status': None, 'info': None}
  if request.method == 'POST':
    valid_code = request.POST.get("valid_code")
    valid_code_str = request.session.get("valid_code_str")
    print(valid_code, valid_code_str)
    if valid_code.upper() == valid_code_str.upper():
      # 查询用户和密码是否正确
      username = request.POST.get('username')
      pwd = request.POST.get('pwd')
      username_obj = Member.objects.filter(member_name=username).first()
      if not username_obj:
        res['status'] = 3
        res['info'] = '用户名不存在'
        return HttpResponse(json.dumps(res))
      if check_password(pwd, username_obj.member_pwd):
        res['status'] = 1
        res['info'] = '登录成功'
        request.session['member_name'] = username
        request.session['member_id'] = Member.objects.filter(member_name=username).first().member_id
        response_new = HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax
        return response_new
      else:
        res['status'] = 0
        res['info'] = '帐号/密码错误'
        return HttpResponse(json.dumps(res))
    else:
      res['status'] = 2
      res['info'] = '验证码错误'
      return HttpResponse(json.dumps(res))
  return render(request, 'blog/login.html', locals())
  # 生成图片验证码
def get_valid_code_img(request):
  img_data = validCode.get_valid_code_img(request)
  return HttpResponse(img_data)

前端登录的表单

{#登陆的表单#}
<form action="{% url 'blog:login' %}" method="post" id="login">
  <input type="text" class="name" name="username" Placeholder="Username" required=""/>
  <input type="password" class="password" name="pwd" Placeholder="Password" required=""/>
  {% csrf_token %}
  <input type="text" name="valid_code" placeholder="验证码">
  <img width="270" height="36" id="valid_code_img" src="/blog/get_valid_code_img/" alt=""
     onclick="this.src='/blog/get_valid_code_img/?'+Math.random()">
  <div class="login-agileits-bottom">
    <h6><a href="javascript:;" type="button" id="onsubmit">登陆</a></h6>
  </div>
</form>
{#登陆的表单结束#}

前端提交登录表单的jquery

{# 登陆的jquery #}
$(document).ready(function () {
  $('#onsubmit').click(function () {
    $.post('/blog/login/', $('#login').serialize(), function (data) {
      if (data['status'] == 1) {
        layer.msg(data.info);
        location.href = "{% url 'index' %}";
      } else {
        layer.msg(data['info'])
      }
    }, 'json')
  })
})
{# 登陆的jquery结束 #}

页面效果

django项目登录中使用图片验证码的实现方法

总结

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

Python 相关文章推荐
python编写的最短路径算法
Mar 25 Python
举例讲解Python中的身份运算符的使用方法
Oct 13 Python
梯度下降法介绍及利用Python实现的方法示例
Jul 12 Python
对Python3 pyc 文件的使用详解
Feb 16 Python
django 中QuerySet特性功能详解
Jul 25 Python
Numpy与Pytorch 矩阵操作方式
Dec 27 Python
深入了解如何基于Python读写Kafka
Dec 31 Python
django Model层常用验证器及自定义验证器详解
Jul 15 Python
pandas 实现将NaN转换为None
May 14 Python
pytorch 中nn.Dropout的使用说明
May 20 Python
Python实现智慧校园自动评教全新版
Jun 18 Python
python人工智能human learn绘图可创建机器学习模型
Nov 23 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
Aug 15 #Python
解析python的局部变量和全局变量
Aug 15 #Python
python实现的自动发送消息功能详解
Aug 15 #Python
python调用支付宝支付接口流程
Aug 15 #Python
Python使用字典实现的简单记事本功能示例
Aug 15 #Python
Flask框架学习笔记之模板操作实例详解
Aug 15 #Python
Flask框架学习笔记之消息提示与异常处理操作详解
Aug 15 #Python
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python内置数据类型之列表操作
2018/11/12 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
为什么要有struct关键字
2012/05/08 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
农救科工作职责
2013/11/27 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书