day76 验证码
76-1 验证码示例
1.自定义验证码
views
首先运用插件PIL制作5位验证码
#生成自定义验证码
def get_valid_img(request):
#生成一个图片
from PIL import Image,ImageDraw,ImageFont
import random
#获得随机颜色
def get_random_color():
return random.randint(0,255),random.randint(0,255),random.randint(0,255)
#生成一个图片对象
img_obj=Image.new('RGB',(220,35),get_random_color())
# 生成一个图片画笔对象
draw_obj = ImageDraw.Draw(img_obj)
#字体的类型
font_obj = ImageFont.truetype("static/font/kumo.ttf", 28)
#开始生成随机字符串并且写到图片上
tmp_list=[]
for i in range(5):
u=chr(random.randint(65,90))#生成大写的字母
l=chr(random.randint(97,122))#生成小写的字母
n=str(random.randint(0,9))#生成数值，转化为字符串
tmp=random.choice([u,l,n])
tmp_list.append(tmp)
draw_obj.text((20+40*i,0),tmp,fill=get_random_color(),font=font_obj)
print(''.join(tmp_list))
# 保存到session
request.session['valid_code']=(''.join(tmp_list))
#画布添加线条 图片宽度（防止越界）
height=35
width=220
for i in range(5):
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=get_random_color(),)
# 加干扰点
for i in range(40):
draw_obj.point((random.randint(0, width), random.randint(0,height)), fill=get_random_color())
x = random.randint(0, width)
y = random.randint(0, height)
draw_obj.arc((x,y,x+4,y+4),0,90,fill=get_random_color())
from io import BytesIO
io_obj=BytesIO()
img_obj.save(io_obj,'png')
data=io_obj.getvalue()
return HttpResponse(data)
views登录逻辑
#手机邮箱用户名可同时登录
class MyBackend(ModelBackend):
def authenticate(self, request, username=None, password=None, **kwargs):
try:
user = User.objects.get(Q(phone=username) | Q(email=username)|Q(username=username))
except User.DoesNotExist: # 可以捕获除与程序退出sys.exit()相关之外的所有异常
return None
if user.check_password(password):
return user
#登录
def user_login(request): if request.method=='POST': form =LoginForm(data=request.POST) ret={'status':0,'msg':''} valid_code = request.POST.get("valid_code") # 获取用户填写的验证码 if form.is_valid(): print(valid_code and valid_code.upper() == request.session.get("valid_code", "").upper()) print(request.session.get("valid_code", "").upper()) if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper(): user=authenticate(request,username=form.cleaned_data['username'],password=form.cleaned_data['password']) if user: login(request,user) ret["msg"] = "/" else: # 用户名密码错误 ret["status"] = 1 ret["msg"] = "用户名或密码错误！" else: ret["status"] = 1 ret["msg"] = "验证码错误" return JsonResponse(ret) else: if request.user.is_authenticated: return redirect('users:home') else: form=LoginForm() return render(request,'users/user_login.html',{'form':form})
#登出
def user_logout(request):
logout(request)
return redirect('users:user_login')
然后配置url
urlpatterns = [
path('', views.home,name='home'),
path('user_login/', views.user_login,name='user_login'),
path('user_logout/', views.user_logout,name='user_logout'),
path('get_valid_img.png/',views.get_valid_img)
]
templates 布置
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登入</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal col-md-6 col-md-offset-3 login-form">
{% csrf_token %}
<div class="form-group">
<label for="id_username" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="id_username" placeholder="用户名" autofocus maxlength="150" required />
</div>
</div>
<div class="form-group">
<label for="id_password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="id_password" name="password" placeholder="密码" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-10">
<input type="text" name="valid_code" id="valid_code">
<img id="valid-img" class="valid-img" src="/get_valid_img.png?" alt="">
</div>
</div>
<div class="form-group">
<label for="other_auth" class="col-sm-2 control-label">第三方登入:</label>
<div class="col-sm-10">
<img src="/static/image/weixin.png" width='30px' height="30px">
<img src="/static/image/qq.png" width='30px' height="30px">
<img src="/static/image/zhifubao.png" width='30px' height="30px">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="login-button">登录</button>
<span class="login-error"></span>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
$('#login-button').click(function () {
var username = $("#id_username").val();
var password = $("#id_password").val();
var valid_code = $("#valid_code").val();
//console.log(username,password,valid_code)
$.ajax({
url:'{% url 'users:user_login' %}',
data:{username:username,
password:password,
valid_code:valid_code,
"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()
},
type:'post',
success:function (data) {
console.log(data);
if (data.status){
// 有错误，在页面上提示
$(".login-error").text(data.msg);
}else {
// 登陆成功
location.href = data.msg;
}
}
})
});
$('#valid-img').click(function () {
$(this)[0].src+='?';
})
</script>
</body>
</html>
2.滑动验证码
下载示例代码：geetest https://docs.geetest.com/install/deploy/server/csharp
views
def user_login2(request):
if request.method=='POST':
form =LoginForm(data=request.POST)
ret={'status':0,'msg':''}
valid_code = request.POST.get("valid_code") # 获取用户填写的验证码
gt = GeetestLib(pc_geetest_id, pc_geetest_key)
challenge = request.POST.get(gt.FN_CHALLENGE, '')
validate = request.POST.get(gt.FN_VALIDATE, '')
seccode = request.POST.get(gt.FN_SECCODE, '')
status = request.session[gt.GT_STATUS_SESSION_KEY]
user_id = request.session["user_id"]
if status:
result = gt.success_validate(challenge, validate, seccode, user_id)
else:
result = gt.failback_validate(challenge, validate, seccode)
if form.is_valid():
if result:
user=authenticate(request,username=form.cleaned_data['username'],password=form.cleaned_data['password'])
if user:
login(request,user)
ret["msg"] = "/"
else:
# 用户名密码错误
ret["status"] = 1
ret["msg"] = "用户名或密码错误！"
else:
ret["status"] = 1
ret["msg"] = "验证码错误"
return JsonResponse(ret)
else:
if request.user.is_authenticated:
return redirect('users:home')
else:
form=LoginForm()
return render(request,'users/user_login2.html',{'form':form})
geettest
def get_geetest(request): user_id = 'test' gt = GeetestLib(pc_geetest_id, pc_geetest_key) status = gt.pre_process(user_id) request.session[gt.GT_STATUS_SESSION_KEY] = status request.session["user_id"] = user_id response_str = gt.get_response_str() return HttpResponse(response_str)
templates
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal col-md-6 col-md-offset-3 login-form">
{% csrf_token %}
<div class="form-group">
<label for="id_username" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="id_username" placeholder="用户名" autofocus maxlength="150" required />
</div>
</div>
<div class="form-group">
<label for="id_password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="id_password" name="password" placeholder="密码" required>
</div>
</div>
<div class="form-group">
<!-- 放置极验的滑动验证码 -->
<div id="popup-captcha">
</div>
</div>
<div class="form-group">
<label for="other_auth" class="col-sm-2 control-label">第三方登入:</label>
<div class="col-sm-10">
<img src="/static/image/weixin.png" width='30px' height="30px">
<img src="/static/image/qq.png" width='30px' height="30px">
<img src="/static/image/zhifubao.png" width='30px' height="30px">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="login-button">登录</button>
<span class="login-error"></span>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
// 极验 发送登录数据的
var handlerPopup = function (captchaObj) {
// 成功的回调
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
// 1. 取到用户填写的用户名和密码 -> 取input框的值
var username = $("#id_username").val();
var password = $("#id_password").val();
$.ajax({
url: "{% url 'users:user_login2' %}", // 进行二次验证
type: "post",
dataType: "json",
data: {
username: username,
password: password,
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
success:function (data) {
console.log(data);
if (data.status){
// 有错误，在页面上提示
$(".login-error").text(data.msg);
}else {
// 登陆成功
location.href = data.msg;
}
}
});
});
$("#login-button").click(function () {
captchaObj.show();
});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#popup-captcha");
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
};
// 当input框获取焦点时将之前的错误清空
$("#id_username,#id_password").focus(function () {
// 将之前的错误清空
$(".login-error").text("");
});
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
$.ajax({
url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerPopup);
}
})
</script>
</body>
</html>
以上code来之老男孩教育平台，只用于学习使用
浙公网安备 33010602011771号