BBS-基于用户认证组建和Ajax实现登陆验证
功能1: 基于用户认证组件和Ajax实现登录验证(图片验证码)
总结：
1 一次请求伴随多次请求
2 PIL
3 session存储
4 验证码刷新
步骤：
1、配置静态文件夹
settings.py
STATICFILES_DIRS=[
os.path.join(BASE_DIR,"static"),
]
---
登录页面的设计
label标签的id属性,点击label标记，相当于点击了input框 bootstarp样式
class="form-group"
class="form-control"
Bootstrap 表单
Bootstrap 提供了下列类型的表单布局： 垂直表单（默认）
内联表单
水平表单
垂直或基本表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
form-control
表单控件加上类form-control后，效果为： 宽度为100% 设置边框为浅灰色 控件具有4px的圆角 设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化 设置placeholder的颜色为#
login布局：
动态生成验证码
（1）方式1：HttpResponse返回字符串
views.py
def get_validCode_img(request):
# 方式一：
with open('content1.png','rb')as f:
data=f.read()
return HttpResponse(data)
from blog import views
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login),
path('get_validCode_img/', views.get_validCode_img),
]
-----
（2）方式2：引入PIL模块 pip install pillow
def get_validCode_img(request):
# # 方式一：
# with open('content1.png','rb')as f:
# data=f.read()
# return HttpResponse(data)
# 方式二 # pip install pillow # python下的图像处理模块
先把图片加载到磁盘上，再从磁盘读取内容返回给浏览器
import random
def get_random_color():
return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
from PIL import Image
img=Image.new('RGB',(270,34),color=get_random_color())
with open('validcode.png','wb') as f:
img.save(f,'png')
with open('validcode.png', 'rb') as f:
data=f.read()
return HttpResponse(data)
（3）方式3：内存处理
def get_validCode_img(request):
# 方式三 内存处理
import random
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
from PIL import Image
from io import BytesIO
img = Image.new('RGB', (270, 34), color=get_random_color())
f=BytesIO()
img.save(f,'png')
data=f.getvalue()
return HttpResponse(data)
可以达到同样的效果
（4）方式4：加入噪点的，字体的
下载ttf载体放入静态文件中
def get_validCode_img(request):
# 方式四
import random,string
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
img = Image.new('RGB', (270, 34), color=get_random_color())
# 画笔 draw
draw=ImageDraw.Draw(img)
kumo_font=ImageFont.truetype('static/font/kumo.ttf',size=32)
code=''
for i in range(5):
random_num=random.randint(0,9)
random_low_alpha=chr(random.randint(65, 90))
random_upper_alpha=chr(random.randint(97, 122))
add=random.choice([random_num,random_low_alpha,random_upper_alpha])
# add2=random.choice(string.ascii_letters+string.digits)
# code = ''.join([code,str(add)])
draw.text((i*50+20,5),str(add),get_random_color(),font=kumo_font)#画文字
# draw.line()#画线
# draw.point()#画点
# 补充噪点噪线 防止机器识别
# 噪线
width, height = 210, 35
for i in range(5):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, width)
y2 = random.randint(0, width)
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())
# 内存处理
f = BytesIO()
img.save(f,'png')
data = f.getvalue()
return HttpResponse(data)
验证码的刷新与字符串保存，验证码解耦
点击验证码刷新
在静态文件中加入js引入jQuery
login.html
<script type="text/javascript" src="/static/JS/jquery-3.2.1.min.js"></script> <script type="text/javascript">
//刷新验证码
$(function () {
$("#id_valid_code_img").click(function () {
$(this)[0].src+="?"
})
})
</script>点击图片出现刷新效果：
保存验证码字符串--验证输入的验证码
login.html
// 登录验证
$('.login-btn').click(function () {
$.ajax(
{
url:'',
type:'post',
data:{user:$('#username').val(),pwd:$('#password').val(),valid_code:$('#id_valid_code_str').val(),
{# {% csrf_token %}#}
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()}, success:function (data) {
console.log(data)
}
}) })
-----
from django.shortcuts import render # Create your views here.
from django.shortcuts import render,HttpResponse # Create your views here. from django.http import JsonResponse
def login(request):
if request.method=='POST':
response={'user':None,'msg':None}
user=request.POST.get('user')
pwd=request.POST.get('pwd') # 读取提交的验证码
valid_code=request.POST.get('valid_code')
# 会话跟踪技术，读取生成验证码时---保存验证码
valid_code_str=request.session.get('valid_code_str')
# 如果书写的验证码和生成的验证码一致
# 不区分大小写---可以统一变成大写
if valid_code.upper()==valid_code_str.upper():
pass
else:
response['msg']='valid code error!'
return JsonResponse(response) # ajax返回一个响应字符串
return render(request,'login.html') def get_validCode_img(request): # 方式四
import random,string
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
img = Image.new('RGB', (270, 34), color=get_random_color())
# 画笔 draw
draw=ImageDraw.Draw(img)
kumo_font=ImageFont.truetype('static/font/kumo.ttf',size=32)
code=''
valid_code_str=''
for i in range(5):
random_num=random.randint(0,9)
random_low_alpha=chr(random.randint(65, 90))
random_upper_alpha=chr(random.randint(97, 122))
add=random.choice([random_num,random_low_alpha,random_upper_alpha])
# add2=random.choice(string.ascii_letters+string.digits)
# code = ''.join([code,str(add)])
draw.text((i*50+20,5),str(add),get_random_color(),font=kumo_font)#画文字 # 保存验证码字符串
valid_code_str+=str(add) # draw.line()#画线
# draw.point()#画点 # 补充噪点噪线 防止机器识别
print(valid_code_str)
#生成的字符串---验证码 valid_code_str
request.session['valid_code_str']=valid_code_str
'''
1 assdd
2 COOKIE {'sessionid':assdd }
session-key session-data ''' f = BytesIO()
img.save(f,'png')
data = f.getvalue()
return HttpResponse(data)
https://www.cnblogs.com/foremostxl/p/9978842.html
博客系统之登陆认证
创建超级用户 python manage.py createsuperuser
用户认证auth模块，ajax信息response
# 用户认证模块
from django.contrib import auth
def login(request):
if request.method=='POST':
response={'user':None,'msg':None}
user=request.POST.get('user')
pwd=request.POST.get('pwd')
# 读取验证码
valid_code=request.POST.get('valid_code')
# 回话跟踪技术，保存验证码
valid_code_str=request.session.get('valid_code_str')
# 如果书写的验证码和生成的验证码一致
# 不区分大小写---可以统一变成大写
if valid_code.upper()==valid_code_str.upper():
user=auth.authenticate(username=user,password=pwd)
if user:
auth.login(request,user)# request.user==当前登录对象
response['user']=user.username
else:
response['msg']='username or password error'
else:
response['msg']='valid code error!'
return JsonResponse(response)
# ajax返回一个响应字符串
return render(request,'login.html')
login
ajax success成功执行
/ 登录验证
$('.login-btn').click(function () {
$.ajax(
{
url:'',
type:'post',
data:{user:$('#username').val(),pwd:$('#password').val(),valid_code:$('#id_valid_code_str').val(),
{# {% csrf_token %}#}
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()}, success:function (data) {
console.log(data);
if(data.user){
location.href='/index'
}
else {
$('.error').text(data.msg).css({'color':'red','margin-left':'10px'})
}
}
})
代码优化：错误信息1s后消失
功能一总结：
代码优化：错误信息1s后消失
整体代码：
from django.shortcuts import render # Create your views here.
from django.shortcuts import render,HttpResponse # Create your views here.
# 用户认证模块
from django.contrib import auth
from django.http import JsonResponse def login(request):
if request.method=='POST':
response={'user':None,'msg':None}
user=request.POST.get('user')
pwd=request.POST.get('pwd')
# 读取验证码
valid_code=request.POST.get('valid_code')
# 回话跟踪技术，保存验证码
valid_code_str=request.session.get('valid_code_str')
# 如果书写的验证码和生成的验证码一致
# 不区分大小写---可以统一变成大写
if valid_code.upper()==valid_code_str.upper():
user=auth.authenticate(username=user,password=pwd)
if user:
auth.login(request,user)# request.user==当前登录对象
response['user']=user.username
else:
response['msg']='username or password error'
else:
response['msg']='valid code error!'
return JsonResponse(response)
# ajax返回一个响应字符串
return render(request,'login.html') def get_validCode_img(request): # # 方式一：
# with open('content1.png','rb')as f:
# data=f.read()
# return HttpResponse(data) # 方式二 # pip install pillow # python下的图像处理模块
# import random
# def get_random_color():
# return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
# from PIL import Image
# img=Image.new('RGB',(270,34),color=get_random_color())
# with open('validcode.png','wb') as f:
# img.save(f,'png')
# with open('validcode.png', 'rb') as f:
# data=f.read()
#
# return HttpResponse(data) # 方式三 内存处理
# import random
# def get_random_color():
# return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
#
# from PIL import Image
# from io import BytesIO
# img = Image.new('RGB', (270, 34), color=get_random_color())
# f=BytesIO()
# img.save(f,'png')
# data=f.getvalue()
# return HttpResponse(data) # 方式四
import random,string
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
img = Image.new('RGB', (270, 34), color=get_random_color())
# 画笔 draw
draw=ImageDraw.Draw(img)
kumo_font=ImageFont.truetype('static/font/kumo.ttf',size=32)
code=''
valid_code_str=''
for i in range(5):
random_num=random.randint(0,9)
random_low_alpha=chr(random.randint(65, 90))
random_upper_alpha=chr(random.randint(97, 122))
add=random.choice([random_num,random_low_alpha,random_upper_alpha])
# add2=random.choice(string.ascii_letters+string.digits)
# code = ''.join([code,str(add)])
draw.text((i*50+20,5),str(add),get_random_color(),font=kumo_font)#画文字 # 保存验证码字符串
valid_code_str+=str(add) # draw.line()#画线
# draw.point()#画点 # 补充噪点噪线 防止机器识别 # 噪线
width, height = 210, 35
for i in range(2):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, width)
y2 = random.randint(0, width)
draw.line((x1, y1, x2, y2), fill=get_random_color()) # 噪点
for i in range(50):
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
'''
1 assdd
2 COOKIE {'sessionid':assdd }
session-key session-data ''' f = BytesIO()
img.save(f,'png')
data = f.getvalue()
return HttpResponse(data) def index(request): return render(request,'index.html',locals())
Views.py
from django.contrib import admin
from django.urls import path from blog import views
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login),
path('index/', views.index),
path('get_validCode_img/', views.get_validCode_img),
]
url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css"> </head>
<body> <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
{% csrf_token %} <h3 class="col-md-offset-5">登录页面</h3>
<div class="form-group ">
<label for="username">username</label>
<input type="text" class="form-control " placeholder="username" id="username">
</div>
<div class="form-group ">
<label for="password">Password</label>
<input type="password" class="form-control " id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="id_valid_code_str">验证码</label>
<div class="row ">
<div class="col-md-6">
<input type="text" id="id_valid_code_str" class="form-control">
</div>
<div class="col-md-6">
<img src="/get_validCode_img/" id="id_valid_code_img" width="" height="" title="验证码" alt="">
</div>
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-default login-btn pull-right" value="登录"><span class="error"></span>
</div>
</form>
</div>
</div> </div> <script type="text/javascript" src="/static/JS/jquery-3.2.1.min.js"></script> <script type="text/javascript">
//刷新验证码
$(function () {
$("#id_valid_code_img").click(function () {
$(this)[0].src+="?"
})
}); // 登录验证
$('.login-btn').click(function () {
$.ajax(
{
url:'',
type:'post',
data:{user:$('#username').val(),pwd:$('#password').val(),valid_code:$('#id_valid_code_str').val(),
{# {% csrf_token %}#}
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()}, success:function (data) {
console.log(data);
if(data.user){
location.href='/index'
}
else {
$('.error').text(data.msg).css({'color':'red','margin-left':'10px'})
setTimeout(function () {
$('.error').text('')
},1000)
}
}
}) })
</script> </body> </html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{ request.user}}
<h3>this is my index</h3>
</body>
</html>
login.html
login中验证码模块解耦
生成工具包，工具包里面生成一个py文件
get_valid_Code_img()
def get_valid_Code_img(request):
# 方式四
import random,string
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
img = Image.new('RGB', (270, 34), color=get_random_color())
# 画笔 draw
draw = ImageDraw.Draw(img)
kumo_font = ImageFont.truetype('static/font/kumo.ttf', size=32)
code = ''
valid_code_str = ''
for i in range(5):
random_num = random.randint(0, 9)
random_low_alpha = chr(random.randint(65, 90))
random_upper_alpha = chr(random.randint(97, 122))
add = random.choice([random_num, random_low_alpha, random_upper_alpha])
# add2=random.choice(string.ascii_letters+string.digits)
# code = ''.join([code,str(add)])
draw.text((i * 50 + 20, 5), str(add), get_random_color(), font=kumo_font) # 画文字
# 保存验证码字符串
valid_code_str += str(add)
# draw.line()#画线
# draw.point()#画点
# 补充噪点噪线 防止机器识别
# 噪线
width, height = 210, 35
for i in range(2):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, width)
y2 = random.randint(0, width)
draw.line((x1, y1, x2, y2), fill=get_random_color())
# 噪点
for i in range(50):
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
'''
1 assdd
2 COOKIE {'sessionid':assdd }
session-key session-data
'''
f = BytesIO()
img.save(f, 'png')
data = f.getvalue()
return data
实现一个滑动验证码
一点提交出现滑动验证码，滑动验证码成功再去验证用户名和密码
如果滑动不成功，反复出现要提交
geetest
BBS-基于用户认证组建和Ajax实现登陆验证的更多相关文章
- 2-功能1：基于用户认证组件和Ajax实现登录验证(图片验证码)
1.登录页面的设计 (1)label标签的id属性 label标签的id属性,点击label标记,相当于点击了input框 bootstarp样式 class="form-group&quo ...
- Ajax客户登陆验证
服务器端操作方便之处我就不吹了,地球人都知道,它最烦莫过于页面刷新,头都被刷晕了,而且他在刷新的时候,还触发服务器端的事件,现在Ajax的出现,他们的结合是发展的必然! 一.介绍一下Aj ...
- Django学习笔记（13）——Django的用户认证（Auth）组件，视图层和QuerySet API
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
- 10.Django用户认证组件
用户认证组件: 功能:用session记录登录验证状态: 前提:用户表,django自带的auth_user 创建超级用户:python manage.py createsuperuser ...
- Django (auth模块、User对象、用户认证、线上-用户认证)
一.auth模块 django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: authenticate() 提供了用户认证,即验证用户名以及密码是否正确,一般需要usern ...
- squid代理加用户认证
squid代理加用户认证 用authentication helpers添加身份验证 有如下几种认证方式 :=> NCSA: Uses an NCSA-style username and pa ...
- 容器编排系统K8s之访问控制--用户认证
前文我们聊到了k8s的statefulset控制器相关使用说明,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14201103.html:今天我们来聊一下k8 ...
- 基于Ajax与用户认证系统的登录验证
一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...
- 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）
1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...
随机推荐
- 科学-建筑学-事务所：KPF
ylbtech-科学-建筑学-事务所:KPF 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. https://www.kpf.com/projects/na ...
- jdbi
JDBI是一个使用方便的SQL开发库,用符合Java语言习惯的集合.Bean等方式,提供关系数据库访问接口,同时保留了JDBC类似的信息.JDBI提供了链式和SQL两种风格的API. jdbi的网址是 ...
- 字符编码-ASCII,GB2312,GBK,GB18030
ASCII ASCII,GB2312,GBK,GB18030依次增加,向下兼容. 手机只需要支持GB2312 电脑中文windows只支持GBK 发展历程 如果你使用编译器是python2.0版本,默 ...
- Vue Admin 后台管理
https://segmentfault.com/a/1190000009188689
- 初始Golang
Golang初识 字节跳动也就是我们常说的今日头条 1.今日头条基于Go语言构建千亿级微服务的实践 今日头条当前后端服务超过80%的流量是跑在Go构建的服务上 微服务数量超过100个 高峰QPS超过7 ...
- mysql数据库数据备份与恢复
备份数据: C:\Users\Administrator>mysqldump -uroot --password -v test01 test02 >e:\temp\\a3.sql Ent ...
- python序列化模块
什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列化的目的 1.以某种存储形式使自定义对象持久化: 2.将对象从一个地方传递到另一个地方. 3.使程序更具维护性. ...
- oracle补齐日期
生成日期列表 SELECT to_date( as first_login_day, ROWNUM - FROM DUAL CONNECT BY ROWNUM <= trunc(sysdate ...
- DRF 视图组件代码
序列化器代码 # 声明序列化器from rest_framework import serializersfrom djangoDome.models import Book class Publis ...
- is和==的区别
is 比较的是内存地址 == 比较的是内容 当两个变量指向同一个对象的时候. is是True, ==也是True