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多重继承新算法C3介绍
Sep 28 Python
python编写简单爬虫资料汇总
Mar 22 Python
Python编程实现双击更新所有已安装python模块的方法
Jun 05 Python
Django Admin实现三级联动的示例代码(省市区)
Jun 22 Python
朴素贝叶斯Python实例及解析
Nov 19 Python
Pandas中resample方法详解
Jul 02 Python
Python搭建Spark分布式集群环境
Jul 05 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
Aug 31 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
Feb 27 Python
Django实现将views.py中的数据传递到前端html页面,并展示
Mar 16 Python
有关pycharm登录github时有的时候会报错connection reset的问题
Sep 15 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
Apr 08 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与Java进行通信的实现方法
2013/10/21 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Django中create和save方法的不同
2019/08/13 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
学校运动会广播稿100条
2014/09/14 职场文书
工作表扬信范文
2015/01/17 职场文书
幼师辞职信范文
2015/02/27 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
校友会致辞
2015/07/30 职场文书