php js 验证码,js实现验证码的方法
验证码的生命周期
在web应用中,验证码常用于登录注册。验证码本质就是一张图片。
我们来看一下验证码的生命周期:客户端请求验证码
服务端渲染验证码:渲染一张包含随机字符串的图片
随机字符串写入session
读取图片并返回响应客户端提交:显示响应(即验证码图片)
获取用户输入字符串
提交用户输入服务端验证:取出session中保存的随机字符串与用户提交的字符串进行对比
字符串信息一致,进行下一步处理
字符串信息不一致,返回错误信息
下面我们在Django中实践以上流程。
验证码实践新建一个名为ValidCode的Django项目,并创建应用app01,配置路由如下:
from django.conf.urls import urlfrom app01 import views
urlpatterns = [
url(r'^test/$', views.test),
url(r'^valid_code/$', views.valid_code),
]定义test视图函数,当客户端访问http://127.0.0.1:8000/test/时,返回test.html页面;当客户端提交提交数据时,取出session中保存的验证码与用户提交的字符串进行对比:
from django.shortcuts import render, HttpResponse, redirectdef test(request):
if request.method == 'GET':
return render(request, 'test.html')
code1 = request.session['valid_code']
code2 = request.POST.get('valid_code')
if code1 == code2:
return HttpResponse('OK')
else:
return redirect('/test/')
{% csrf_token %}
验证码:
刷新
验证
var refresh = document.getElementsByClassName('refresh')[0];
var validPic = document.getElementsByTagName('img')[0];
refresh.onclick = function () {
validPic.src += "?"; //利用img标签的特性,刷新验证码
}
说明:test.html中标签的属性:src="/valid_code/",表示向http://127.0.0.1:8000/valid_code/发起get 请求,以获取图片
点击刷新标签,执行validPic.src += "?",以重新获取图片(刷新验证码)定义valid_code视图函数,将验证码写入session中,并返回验证码:
def valid_code(request):
with open('bilibili.jpg', 'rb')as f:
res = f.read()
valid_code = 'bilibili'
request.session["valid_code"] = valid_code
return HttpResponse(res)
说明:验证码本质就是一张图片,这里就先返回一张图片吧。。。浏览器访问http://127.0.0.1:8000/test/:
说明:显示以上页面其实有两次get请求:对/test/发起get请求,服务端返回test.html页面;
test.html页面中标签的属性:src="/valid_code/",对/valid_code/发起get请求,服务端返回一张图片
提交验证码:输入'bilibili',显示‘OK',否则重定向到当前页面,略。
生成随机验证码
这样似乎就成了,不过实际应用中的验证码都是随机生成的。而上面的验证码不论怎么刷新,也不会变,服务端始终返回一张静态图片。那么有没有办法呢?有,用pillow画图模块,每次请求过来,服务端实时渲染一张包含随机字符串的图片。下面我们改写valid_code函数:
def valid_code(request):
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO # 内存管理,优化速度
import random
img = Image.new(mode='RGB', size=(120, 30),
color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) # 创建图像对象(模式,大小,颜色)
draw = ImageDraw.Draw(img, mode='RGB') # 创建画笔(图像对象,模式)
font = ImageFont.truetype("app01/static/fonts/kumo.ttf", 28) # 读取字体(字体路径,字体大小)
code_list = [] for i in range(5):
char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))])
code_list.append(char)
draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
font=font) # 通过画笔的text方法,为图像绘制字符串(位置,文本,颜色,字体)
# [i * 24, 0] 字体坐标,i*24设置水平偏移,让每个字符分开显示
f = BytesIO() # 拿到一个内存文件句柄f
img.save(f, "png") # 保存图像对象到f
valid_code = ''.join(code_list)
request.session["valid_code"] = valid_code # 验证码写入session
return HttpResponse(f.getvalue()) # `getvalue()`方法拿到内存文件句柄的内容
说明:使用前需要先安装pillow模块:pip install pillow
绘制的图像可以保存的磁盘上,但是速度慢,这里使用内存管理from io import BytesIO,优化速度
f = BytesIO() 拿到一个内存文件句柄
f.getvalue()拿到内存文件句柄的内容
注意,Django的session信息默认存在数据库,使用session前应先执行数据库迁移,以生成django_session表现在重新访问http://127.0.0.1:8000/test/:
验证码已经是实时生成的了,并且每次点击刷新,显示一张新的图片。
php js 验证码,js实现验证码的方法相关推荐
- 如何使用 JS 破解轻量级滑块验证码
今天在这篇文章里给大家介绍一下怎么使用 JS 破解滑块验证码. 文章末尾有源码链接,需要的朋友可以自取,不过拿走之前记得三连哇! 思路讲解 操作浏览器打开页面 滑块验证码是滑动验证码的一种,生成流程至 ...
- js 移动端 滑块验证码插件_VUE技术详解,Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- 微信小程序之获取验证码js
在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...
- JS结合Cookie实现验证码功能
验证码功能是现在网站开发中非常常见的一种功能,常见的编程语言,比如.NET,JAVA都能很容易实现验证码功能,今天我准备分享一个使用JS实现验证码的功能,非常简单使用,拿来就可以用,废话不多说,直接上 ...
- Js获取短信验证码前段效果
一:先上效果图: 二:源代码文件:reg.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- JS笔记-前端实现验证码功能
程序运行截图如下: 当输入错误验证码点击登录后 输入正确验证码后,就可以跳转了. 这里主要是使用JS生成了验证码 程序结构如下 源码如下: vail.js //高.宽.字符大小.字符集 var w = ...
- JS点击获取验证码后60秒内禁止重新获取(防刷新)
JS点击获取验证码后60秒内禁止重新获取(防刷新) 参考 · 阅读文章: JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) 注意: 场景:在登录页点击发送啊验证码按钮,开始进入倒计时,在第3 ...
- JS实现的一个验证码,可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 1<!DOCTYPE html PUBLIC "-//W3C// ...
- js实现点击“验证码”开始倒计时
<!DOCTYPE html> <html lang="en"><head><meta http-equiv="Content- ...
- 阿发你好java_191122_01 纯前端JS实现的文字验证码
纯前端JS实现的文字验证码 作者:邵发 本文是Java学习指南系列教程的官方配套文档.内容介绍一种基于JavaScript绘制的纯前端实现的验证码技术.本文附带项目源码及相关JAR包. 1. 验证码 ...
最新文章
- java专业编码_java编码中的坑(记一次解决编码BUG的经历) - 贪吃蛇学院-专业IT技术平台...
- GoogLeNet(从Inception v1到v4的演进)
- python代码案例详解-Python编程:案例详解输出函数print
- 白话Elasticsearch55-数据建模之对每个用户发表的博客进行分组 (Top Hits Aggregation)
- linux目录和文件管理命令
- 动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
- oracle aced什么资质,ACOUG 中国行—暨Oracle WDP云数据之旅,火热报名中……
- 网络直播“黑科技”:Stream Matrix
- SAP UI5 dialog style max-height
- 英语作业介绍一项发明计算机,介绍电脑的发明的英语作文
- mongodb lbs java_LBS JAVA Spring mongoDB
- 7-49 判断素数 (10 分)
- linux-2.6.
- CentOS下Privoxy和Iptables 实现透明代理,修改http-header
- Linux 下制作虚拟软盘镜像
- 一英寸芯片大小_晶圆和芯片的关系_一个芯片有多少晶圆
- msp430f149最小核心板和bsl下载器连线
- 2.4万余门课程在线学,22家平台面向全国高校开放
- oracle数据文件离线,oracle数据库的文件在哪里
- wrf格式播放器下载
热门文章
- 【洛谷P5114】八月脸【边分治】【闵可夫斯基和】
- LuoguP4606 [SDOI2018]战略游戏
- 树上子链(树形dp求树的直径)
- Gym - 215177C 玩游戏
- CCPC Training Class
- Educational Codeforces Round 117 (Rated for Div. 2)
- [ZJOI2010] 基站选址(线段树优化dp)
- luogu P4240 毒瘤之神的考验(莫比乌斯反演+递推前缀和+数论分块)
- P3346-[ZJOI2015]诸神眷顾的幻想乡【广义SAM】
- jzoj100046-收集卡片【暴力】