話不多說，上代碼愈腾，這個是登錄界面的login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
</head>
<body>
<h3 style="text-align:center">登錄界面</h3>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<form>
<div class="form-group">
<label for="user">用戶名</label>
<input type="text" id='user' class="form-control">
</div>
<div class="form-group">
<label for="pwd"> 密碼</label>
<input type="password" id='pwd' class="form-control">
</div>
<div class="form-group">
<label for="pwd">驗證碼</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="valid_code">
</div>
<div class="col-md-6">
<img width="270" height="36" id="valid_code_img" src="/get_valiCode_img/" alt="">
</div>
</div>
</div>
<input type="button" class="btn btn-default login_btn" value="submit"><span class="error"></span>
</form>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
// 刷新驗證碼
$("#valid_code_img").click(function () {
$(this)[0].src += "?"
});
// 登錄驗證
$(".login_btn").click(function () {
$.ajax({
url: "",
type: "post",
data: {
user: $("#user").val(),
pwd: $("#pwd").val(),
valid_code: $("#valid_code").val(),
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
},
success: function (data) {
console.log(data);
if (data.user) {
location.href = "/index/"
//if (location.search){
// location.href = location.search.slice(6)
//}
//else {
// location.href = "/index/"
//}
}
else {
$(".error").text(data.msg).css({"color": "red", "margin-left": "10px"});
setTimeout(function(){
$(".error").text("");
},1000)
}
}
})
})
</script>
</html>
下面是登錄界面對應的后臺方法
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
img = Image.new("RGB", (270, 40), color=get_random_color())
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))
random_low_alpha = chr(random.randint(95, 122))
random_upper_alpha = chr(random.randint(65, 90))
random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
draw.text((i * 50 + 20, 5), random_char, get_random_color(), font=kumo_font)
# 保存驗證碼字符串
valid_code_str += random_char
#添加噪點噪線
# width=270
# height=40
# 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(100):
# 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())
print("valid_code_str", valid_code_str)
#會話跟蹤技術
request.session["valid_code_str"] = valid_code_str
f = BytesIO()
img.save(f, "png")
data = f.getvalue()
return HttpResponse(data)
在登錄界面中使用會話跟蹤技術，把用戶用的驗證碼存在cookie里面
#會話跟蹤技術
request.session["valid_code_str"] = valid_code_str
防止機器人登錄使用降噪技術岂津，增加識別難度虱黄。
#添加噪點噪線
# width=270
# height=40
# 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(100):
# 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())
本周會把這個博客項目完成，并在我的個人站點開放注冊吮成，并逐步完善功能橱乱。
加油，為了成為更好的自己Ａ薅埂仅醇！
