博客园项目-登录(验证码,ajax提交数据,session和cookie)
前端页面
{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}"> <style> body { background-color: #eeeeee; } h3{ padding-left: 100px; } .container{ margin-top: 300px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3>请登录</h3> <form class="form-horizontal"> {% csrf_token %} <div class="form-group"> <label for="inputUser" class="col-sm-2 control-label">账号</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputUser" placeholder="账号"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="valid_code" class="col-sm-2 control-label">验证码</label> <div class="col-sm-5"> <input type="text" class="form-control" id="valid_code" placeholder="验证码"> <span class="help-block"></span> </div> <div class="col-sm-5"> <img src="/get_valid_img/" alt="" width="200" height="40"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="button" class="btn btn-primary btn-lg btn-block" value="登录"> <span></span> </div> </div> </form> </div> </div> </div> <script src="{% static 'jquery-3.2.1.min.js' %}"></script> <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> <script> $(":button").click(function () { $.ajax({ url:"/login/", type:"post", data:{ "user":$("#inputUser").val(), "pwd":$("#inputPassword").val(), "valid_code": $("#valid_code").val(), "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val() }, success: function (data) { var data = JSON.parse(data); if (data.is_login){ location.href="/index/" }else{ $(":button").next().text(data.error_msg).css("color","red") setTimeout(function () { $(":button").next().text("") },1000) } } }) }) </script> </body> </html>
可以看到用户访问登录页面时，在求情验证码图片时会访问/get_valid_img/，通过该url来得到验证码图片
用户的数据通过ajax提交到后端，当后端完成验证后，如果验证成后，则跳转到首页，如果失败，则将错误信息添加到页面上
生成随机验证码
def get_valid_img(request): # from utils.random_code import get_random_code # 局部模块导入不能用* # data = get_random_code() import random def get_random_color(): return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) # 方式1： # f = open("car.jpg", "rb") # data = f.read() # f.close() # 方式2：将图片存到磁盘 # import PIL # from PIL import Image # from io import BytesIO # image = Image.new(mode="RGB", size=(120, 80), color=get_random_color()) # f = open("code.png", "wb") # image.save(f, "png") # f.close() # f = open("code.png", "rb") # data = f.read() # f.close() # 方式3：将图片放到内存 # import PIL # from PIL import Image # from io import BytesIO # image = Image.new(mode="RGB", size=(120, 80), color=get_random_color()) # f = BytesIO() # image.save(f, "png") # # data = f.getvalue() # 方式4： from PIL import Image # PIL模块可以通过下载pillow模块使用 from io import BytesIO from PIL import ImageDraw, ImageFont # 画笔 image = Image.new(mode="RGB", size=(120, 80), color=get_random_color()) draw = ImageDraw.Draw(image) font = ImageFont.truetype("static/fonts/kumo.ttf", size=32) temp = [] for i in range(5): random_char = random.choice( [chr(random.randint(65, 90)), chr(random.randint(97, 122)), str(random.randint(0, 9))]) draw.text((i * 24, 20), random_char, get_random_color(), font=font) # 参数分别为坐标，添加的字符串，颜色，字体 temp.append(random_char) # 为了让生成的验证码更具迷惑性，我们可以使用下面的方法给验证码图片中增加随机的点线等 # for i in range(80): # draw.point((random.randint(0,width),random.randint(0,height)),fill=get_random_color()) # # for i in range(10): # x1=random.randint(0,width) # x2=random.randint(0,width) # y1=random.randint(0,height) # y2=random.randint(0,height) # draw.line((x1,y1,x2,y2),fill=get_random_color()) # for i in range(40): # 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()) f = BytesIO() image.save(f, "png") data = f.getvalue() # 保存随机字符串 random_code_str = "".join(temp) request.session["random_code_str"] = random_code_str ''' 1 生成随机字符串 2 响应set_cookie {"sessionid": "e21e12gg2d3sds"} 3 在django_session表中插入一条记录 session_key session_data ''' return HttpResponse(data)
由于验证码需要生成图片，此处我们导入了PIL模块(用来生成图片的模块)
先生成一个image对象，图片的颜色应该是随机的，我们定义一个生成3个随机数字组成元组的函数
import random def get_random_color(): return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
验证码中还需要有随机的字符串，此时我们从PIL模块中导入ImageDraw(画笔), ImageFont(字体)
首先生成一个字体对象，要先下载字体文件，并存放到项目中
然后通过该字体文件生成字体对象
font = ImageFont.truetype("static/fonts/kumo.ttf", size=32) # size为字体大小
然后往生成image图片中添加内容，内容应该为随机字符串，采用以下方法生成并添加到image图片中
draw = ImageDraw.Draw(image) # 画笔 font = ImageFont.truetype("static/fonts/kumo.ttf", size=32) temp = [] for i in range(5): random_char = random.choice( [chr(random.randint(65, 90)), chr(random.randint(97, 122)), str(random.randint(0, 9))]) draw.text((i * 24, 20), random_char, get_random_color(), font=font) temp.append(random_char)
由于验证码图片只是发送给用户用来验证用的，没有必要保存到本地磁盘中，我们可以从io模块中导入BytesIO，在内存中生成空间来存放图片
from io import BytesIO f = BytesIO() image.save(f, "png") data = f.getvalue()
此时将data返回给页面，用户就可以看到验证码图片了
但是为了方便我们接收到用户输入的验证码后进行验证，我们需要保存此次生成验证码的内容
# 保存随机字符串 random_code_str = "".join(temp)
现在我们需要考虑一个问题，用上面的方法保存验证码内容，如果一个用户先访问了登录页面，此时random_code_str被赋予了一个值，而这是另一个用户也访问了登录页面，这时random_code_str会被后一个值覆盖
那么前一个用户输入正确的验证码也无法验证成功了
在这种情况下，我们需要保证每一个用户都能保存住自己访问页面时验证码的值，可以考虑使用session
# 保存随机字符串 random_code_str = "".join(temp) request.session["random_code_str"] = random_code_str
这里我们需要知道request.session做了什么：
1 生成随机字符串
2 响应set_cookie {"sessionid": "e21e12gg2d3sds"}
3 在django_session表中插入一条记录
如果用户访问时，已经有了cookie，那么这个操作会更新数据库django_session表中session_data的内容，而不会改变session_key等其它内容
点击更新验证码
当我们登录时，经常会遇到验证码看不清的情况，此时我们可以通过点击验证码图片进行刷新
这个功能可以通过前端JS实现
// 验证码刷新 $("img").click(function () { $(this)[0].src += "?" })
找到验证码图片的img标签，给他绑定一个点击事件，通过DOM对象的方法，在该图片的src后面加一个？号便可实现再次访问
后端验证
def log_in(request): response = {"is_login": False, "error_msg": ""} if request.method == "POST": username = request.POST.get("user") pwd = request.POST.get("pwd") valid_code = request.POST.get("valid_code") code_str = request.session.get("random_code_str") if valid_code.upper() == code_str.upper(): user = auth.authenticate(username=username, password=pwd) if user: response["is_login"] = True auth.login(request, user) # 1 {"user_id": 1} 2 request.user=user else: response["error_msg"] = "用户名密码错误" else: response["error_msg"] = "验证码错误" return HttpResponse(json.dumps(response)) return render(request, "login.html")
我们先校验验证码是否正确，在验证码正确的前提下再使用auth组件进行用户名和密码的验证
需要注意，当用户名密码也验证成功后，我们使用auth.login()方法写session，但由于此前访问验证码图片时已经在数据库中生成了session记录，该方法会先flush清除记录，再添加新的记录
所以这时我们会看到cookie中的sessionid的值变了，这里要和生成验证码时使用的request.session方法区分开来
