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 ...
随机推荐
- hierarchical_mutex函数问题（C++ Concurrent in Action）
C++ Concurrent in Action(英文版)书上(No.52-No.53)写的hierarchical_mutex函数,只适合结合std::lock_guard使用,直接使用如果不考虑顺 ...
- 在Linux里安装Samba(文件共享)方便在Windows下面操作
第一步:安装包 在CentOS是 yum install samba 在Ubuntu是 apt install samba 第二步:添加用户 adduser 用户名 smbpasswd -a 用户名 ...
- go语言笔记——切片函数常见操作，增删改查和搜索、排序
7.6.6 搜索及排序切片和数组 标准库提供了 sort 包来实现常见的搜索和排序操作.您可以使用 sort 包中的函数 func Ints(a []int) 来实现对 int 类型的切片排序.例如 ...
- [UE4]name slot一个种应用技巧
如图所示“MouseOver”是一个Child Widget,是一个按钮. “Image_0”跟“MouseOver”是重叠在一起的,这样“Image_0”就会挡住“MouseOver”按钮的事件响应 ...
- dubbo协议下的单一长连接与多线程并发如何协同工作
上班的路上突然就冒出了这么个问题:既然在dubbo中描述消费者和提供者之间采用的是单一长连接,那么如果消费者端是高并发多线程模型的web应用,单一长连接如何解决多线程并发请求问题呢? 其实如果不太了解 ...
- 让WordPress支持google AMP
1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc.手机.ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile ...
- 「一本通 6.4 例 4」曹冲养猪(CRT)
复习一下 扩展中国剩余定理 首先考虑两个同余方程 \[ x \equiv a_1\; mod\; m_1\\ x \equiv a_2\; mod\; m_2 \] 化成另一个形式 \[ x = n_ ...
- CheckedListBox 数据绑定
CheckedListBox 数据绑定方式有多总,常用的绑定方式总结如下: 1. Items.Add 通过 Itemes.Add 方法来向 CheckedListBox 中添加项 2. Data ...
- html A标签 绑定点击事件。跳转页面。处理
在平时的页面中,肯定有需要点击A标签 进行处理. 这时候习惯性的绑定一个点击事件进行数据处理. 在A标签中 herf="#" 然后绑定一个点击事件. 或者在A标签里面的元素里面有一 ...
- CMD下的netstat命令
查询端口启用情况 netstat -ano|findstr 80