js实现验证码的方法

来源：动视网责编：小采时间：2020-11-27 20:12:09

js实现验证码的方法

js实现验证码的方法:验证码的生命周期在web应用中，验证码常用于登录注册。验证码本质就是一张图片。我们来看一下验证码的生命周期：客户端请求验证码服务端渲染验证码：渲染一张包含随机字符串的图片随机字符串写入session读取图片并返回响应客户端提交：显示响应（即验证码图片

推荐度：

点击下载本文 文档为doc格式

导读js实现验证码的方法:验证码的生命周期在web应用中，验证码常用于登录注册。验证码本质就是一张图片。我们来看一下验证码的生命周期：客户端请求验证码服务端渲染验证码：渲染一张包含随机字符串的图片随机字符串写入session读取图片并返回响应客户端提交：显示响应（即验证码图片

验证码的生命周期

在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/')

 <form action="" method="post">
 {% csrf_token %} <p>
 <label for="valid_code">验证码：</label>
 </p>
 <p>
 <input type="text" id="valid_code" name="valid_code">
 <img src="/valid_code/" alt="validPic" width="150" height="30"><a href="#" class="refresh">刷新</a>
 </p>
 <p>
 <button type="submit">验证</button>
 </p>
 </form>
 
 <script>
 var refresh = document.getElementsByClassName('refresh')[0];
 var validPic = document.getElementsByTagName('img')[0];
 refresh.onclick = function () {
 validPic.src += "?"; //利用img标签的特性，刷新验证码
 }
 </script>

说明：

test.html中<img>标签的属性：src="/valid_code/"，表示向http://127.0.0.1:8000/valid_code/发起get 请求，以获取图片
点击<a href="#" class="refresh">刷新</a>标签，执行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页面中<img>标签的属性：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()`方法拿到内存文件句柄的内容

说明：