/utils/verificatioz_code.py
import random
from io import BytesIO
from PIL import Image, ImageDraw, ImageFont
def random_color():
"""
随机RGB颜色
:return:
"""
colors = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
return colors
def random_valid_code():
"""
生成随机验证码
:return:
"""
io_obj = BytesIO()
image_obj = Image.new(mode='RGB', size=(120, 80), color=random_color())
draw_obj = ImageDraw.Draw(image_obj)
font_obj = ImageFont.truetype('static/fonts/km.ttf', size=36)
str_list = ''
for i in range(4):
random_chr = random.choice(
[str(random.randint(0, 9)), chr(random.randint(65, 90)), chr(random.randint(97, 122))])
draw_obj.text((i * 33, 20), random_chr, random_color(), font=font_obj)
str_list += random_chr
# width = 120
# height = 80
# 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_obj.line((x1, y1, x2, y2), fill=random_color())
# for i in range(30):
# draw_obj.point([random.randint(0, width), random.randint(0, height)], fill=random_color())
# x = random.randint(0, width)
# y = random.randint(0, height)
# draw_obj.arc((x, y, x + 4, y + 4), 0, 90, fill=random_color())
# for i in range(50):
# draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=random_color())
image_obj.save(io_obj, 'png')
data = io_obj.getvalue()
return data, str_list
urls.py
url(r'^login/$', views.log_in),
url(r'^logout/$', views.log_out),
url(r'^valid_code/$', views.valid_code),
views.py
from django.contrib import auth
import json
from utils.verification_code import random_valid_code
def valid_code(request):
"""
返回随机验证码，并向诶如session
:param request:
:return:
"""
data = random_valid_code()
# 把生成的随机验证码存储到session中
request.session['str_code'] = data[1]
return HttpResponse(data[0])
def log_in(request):
"""
登录页面
:param request:
:return:
"""
if request.is_ajax():
user = request.POST.get('user')
pwd = request.POST.get('pwd')
code = request.POST.get('code')
# 获取随机验证码的session字符串
str_code = request.session.get('str_code')
# 定义默认返回信息
login_response = {'user': None, 'err_msg': None}
# 判断验证码
if code.upper() == str_code.upper():
# 判断用户名密码
user_obj = auth.authenticate(username=user, password=pwd)
if user_obj:
login_response['user'] = user_obj.username
auth.login(request, user_obj)
else:
login_response['err_msg'] = 'username and password is error !!!'
else:
login_response['err_msg'] = 'the random valid code is errer !!!'
# ajax返回前端
return HttpResponse(json.dumps(login_response))
return render(request, 'login.html')
def log_out(request):
"""
注销与退出
:param request:
:return:
"""
auth.logout(request)
return redirect('/login/')
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<title>登录页面</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-8">
<div class="page-header">
<h1>
博客登录页面
<small>...</small>
</h1>
</div>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group form-horizontal">
<label for="user" class="col-md-2 control-label">用户名：</label>
<div class="col-md-7">
<input type="text" class="form-control" id="user" placeholder="用户名" autocomplete="off">
</div>
<span id="user_err" class="col-md-3 form-group control-label"></span>
</div>
<div class="form-group">
<label for="pwd" class="col-md-2 control-label">密码：</label>
<div class="col-md-7">
<input type="password" class="form-control" id="pwd" placeholder="密码" autocomplete="off">
</div>
<span id="pwd_err" class="col-md-3 form-group control-label"></span>
</div>
<div class="form-group">
<label for="code" class="col-md-2 control-label">验证码：</label>
<div class="col-md-3">
<input type="text" class="form-control" id="code" placeholder="验证码" autocomplete="off">
</div>
<div class="col-md-4">
<img id="code_img" width="230" height="34" src="/valid_code/" alt="随机验证码">
</div>
<span id="code_err" class="col-md-3 form-group control-label"></span>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
</div>
</div>
<p class="col-md-offset-4 err_msg"></p>
<div class="form-group">
<div class="col-md-offset-2 col-md-7">
<button type="button" id="login" class="btn btn-primary btn-block">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
// 验证码刷新
$("#code_img").click(function () {
$(this)[0].src += '?'
});
// 登录校验
$("#login").click(function () {
$.ajax({
url: "",
type: "post",
data: {
"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
"user": $("#user").val(),
"pwd": $("#pwd").val(),
"code": $("#code").val()
},
success: function (data) {
var login_response = JSON.parse(data);
console.log(login_response);
if (login_response.user) {
location.href = '/index/'
} else {
$(".err_msg").html(login_response.err_msg).css({
"color": "red",
"font-size": 20,
"font-weight": 700
});
}
}
})
});
setInterval(function () {
$(".err_msg").html("")
}, 3000)
</script>
</body>
</html>
浙公网安备 33010602011771号