Django实现登录随机验证码的示例代码
时间:2019-04-20
本文章向大家介绍Django实现登录随机验证码的示例代码,主要包括Django实现登录随机验证码的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈
1. 生成随机验证码
#_*_coding:utf-8_*_ from PIL import Image,ImageDraw,ImageFont,ImageFilter import random import math, string #字体的位置,不同版本的系统会有不同 font_path = '/Library/Fonts/Arial.ttf' #font_path = '/Library/Fonts/Hanzipen.ttc' #生成几位数的验证码 number = 4 #生成验证码图片的高度和宽度 size = (100,30) #背景颜色,默认为白色 bgcolor = (255,255,255) #字体颜色,默认为蓝色 fontcolor = (0,0,255) #干扰线颜色。默认为红色 linecolor = (255,0,0) #是否要加入干扰线 draw_line = True #加入干扰线条数的上下限 line_number = (1,5) def gen_text(): source = list(string.ascii_letters) for index in range(0,10): source.append(str(index)) return ''.join(random.sample(source,number))#number是生成验证码的位数 #用来绘制干扰线 def gene_line(draw,width,height): begin = (random.randint(0, width), random.randint(0, height)) end = (random.randint(0, width), random.randint(0, height)) draw.line([begin, end], fill = linecolor) def gene_code(save_path,filename): width,height = size #宽和高 image = Image.new('RGBA',(width,height),bgcolor) #创建图片 font = ImageFont.truetype(font_path,25) #验证码的字体和字体大小 #font = ImageFont.truetype(25) #验证码的字体和字体大小 draw = ImageDraw.Draw(image) #创建画笔 #text = "我是中国人" #生成字符串 text = gen_text() #生成字符串 print(text) font_width, font_height = font.getsize(text) draw.text(((width - font_width) / number, (height - font_height) / number),text,\ font= font,fill=fontcolor) #填充字符串 if draw_line: gene_line(draw, width, height) gene_line(draw, width, height) gene_line(draw, width, height) gene_line(draw, width, height) image = image.transform((width + 20, height +10), Image.AFFINE, (1, -0.3, 0, -0.1, 1, 0), Image.BILINEAR) # 创建扭曲 image = image.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜,边界加强 image.save('%s/%s.png' %(save_path,filename)) # 保存验证码图片 print("savepath:",save_path) return text if __name__ == "__main__": gene_code('/tmp','test') #会把生成的图片存成/tmp/test.png
2. 如何应用到你的django项目中
整个验证码的流程如下
1.用户访问登录页面,你的后台程序在给用户返回登录页面时,同时生成了验证码图片
2.用户输入账户信息和验证码数字,提交表单
3.后台判断用户输入的验证码和你生成的图片信息是否一致,如果一致,就代表验证码是没有问题的
问题就卡在第3步,你在第1步生成验证码并返回给用户后,由于一会用户还需要把这个验证码提交过来,你在后台就需要拿用户输入的和你之前生成 的验证码进行对比是否相等,
所以你必须在生成验证码的同时,把验证码存下来,存到哪? 必然是缓存,这样直接在存的同时加个超时时间 , 就可以限定验证码有效期了。
那存入缓存时的key是设置成什么呢?为了保证验证码的安全,我采取了以下设计
3.代码实现
login视图
def acc_login(request): err_msg = {} today_str = datetime.date.today().strftime("%Y%m%d") verify_code_img_path = "%s/%s" %(settings.VERIFICATION_CODE_IMGS_DIR, today_str) if not os.path.isdir(verify_code_img_path): os.makedirs(verify_code_img_path,exist_ok=True) print("session:",request.session.session_key) #print("session:",request.META.items()) random_filename = "".join(random.sample(string.ascii_lowercase,4)) random_code = verify_code.gene_code(verify_code_img_path,random_filename) cache.set(random_filename, random_code,30) if request.method == "POST": username = request.POST.get('username') password = request.POST.get('password') _verify_code = request.POST.get('verify_code') _verify_code_key = request.POST.get('verify_code_key') print("verify_code_key:",_verify_code_key) print("verify_code:",_verify_code) if cache.get(_verify_code_key) == _verify_code: print("code verification pass!") user = authenticate(username=username,password=password) if user is not None: login(request,user) request.session.set_expiry(60*60) return HttpResponseRedirect(request.GET.get("next") if request.GET.get("next") else "/") else: err_msg["error"] = 'Wrong username or password!' else: err_msg['error'] = "验证码错误!" return render(request,'login.html',{"filename":random_filename, "today_str":today_str, "error":err_msg})
template文件
{% extends 'base.html' %} {% block body %} <div id="container" class="cls-container"> <!-- BACKGROUND IMAGE --> <!--===================================================--> <div id="bg-overlay" class="bg-img img-balloon"></div> <!-- HEADER --> <!--===================================================--> <div class="cls-header cls-header-lg"> <div class="cls-brand"> <a class="box-inline" href="index.html" rel="external nofollow" > <!-- <img alt="Nifty Admin" src="img/logo.png" class="brand-icon"> --> <span class="brand-title">PerfectCRM <span class="text-thin">老男孩教育</span></span> </a> </div> </div> <!--===================================================--> <!-- LOGIN FORM --> <!--===================================================--> <div class="cls-content"> <div class="cls-content-sm panel"> <div class="panel-body"> <p class="pad-btm">Sign In to your account</p> <form method="post">{% csrf_token %} <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-user"></i></div> <input type="text" name="username" class="form-control" placeholder="Username"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-asterisk"></i></div> <input type="password" name="password" class="form-control" placeholder="Password"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <img height="30px" src="/static/verify_code_imgs/{{ today_str }}/{{ filename }}.png"> </div> <input style="height: 50px" type="text" name="verify_code" class="form-control" placeholder="验证码"> <input type="hidden" name="verify_code_key" value="{{ filename }}" > </div> </div> <div class="row"> <div class="col-xs-8 text-left checkbox"> <label class="form-checkbox form-icon"> <input type="checkbox"> Remember me </label> </div> <div class="col-xs-4"> <div class="form-group text-right"> <button class="btn btn-success text-uppercase" type="submit">Sign In</button> </div> </div> </div> {% if error %} <span style="color: red">{{ error.error }}</span> {% endif %} </form> </div> </div> <div class="pad-ver"> <a href="pages-password-reminder.html" rel="external nofollow" class="btn-link mar-rgt">Forgot password ?</a> <a href="pages-register.html" rel="external nofollow" class="btn-link mar-lft">Create a new account</a> </div> </div> <!--===================================================--> </div> <!--===================================================--> <!-- END OF CONTAINER --> {% endblock %}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- python爬虫常用库之urllib详解
- 如何 build 出尽可能小的 docker image?
- 一步一步教你如何用python操作mysql
- 利用Python实现卷积神经网络的可视化
- SDP(13): Scala.Future - far from completion,绝不能用来做甩手掌柜
- 干货|浅谈强化学习的方法及学习路线
- 如何实时查看Docker容器占用的CPU、内存状态?
- [安全] mysqldump 备份的后门
- Elasticsearch 快速起步
- Mysql 高一致性复制结构
- Scrapy中如何提高数据的插入速度
- python基础语法(1)
- Python基础语法(2)
- 实践 Mysql Group Replication 组复制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- html+js开发模拟考试在线评分系统
- iOS音视频接入 - TRTC接入实时视频通话
- LRU缓存淘汰机制C++实现
- ant-design-vue运行时动态切换主题色
- 使用electron将vue-cli3.x项目打包为桌面应用
- Ubuntu 16.04下安装服务器端Shadowsocks
- 解决vue cli3.x打包上线静态资源找不到路径问题
- Ant-design-vue+vue-i18n实现前端国际化
- Mac OSX终端安装主题(oh my zsh)
- 谷歌浏览器油猴插件安装教程,让你的浏览器更加强大
- zabbix模块配置学习
- Windows下安装及使用NVM
- U盘上安装多个Linux发行版和PE
- ubuntu18.04部署python3、nginx项目
- CentOS8.x系统配置记录