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 文件和路径操作函数小结
Nov 23 Python
python optparse模块使用实例
Apr 09 Python
Python的SQLAlchemy框架使用入门
Apr 29 Python
Python实现针对中文排序的方法
May 09 Python
python 读取Linux服务器上的文件方法
Dec 27 Python
Python List cmp()知识点总结
Feb 18 Python
利用Python实现手机短信监控通知的方法
Jul 22 Python
设置jupyter中DataFrame的显示限制方式
Apr 12 Python
python 操作excel表格的方法
Dec 05 Python
Python控制鼠标键盘代码实例
Dec 08 Python
python中altair可视化库实例用法
Jan 26 Python
Python 匹配文本并在其上一行追加文本
May 11 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
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
简单易懂的python环境安装教程
2017/07/13 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python版本单链表实现代码
2018/09/28 Python
python实现电子书翻页小程序
2019/07/23 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
python 发送get请求接口详解
2020/11/17 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
九年级科学教学反思
2014/01/29 职场文书
网络宣传方案
2014/03/15 职场文书
升学宴家长答谢词
2015/09/29 职场文书