一、图片验证码
django-simple-captcha配置
1.在pycharm中,File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha 选择0.55以上版本,然后点install package 按钮进行安装
2.项目名/urls.py中添加代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
from django.urls import path,include
......
from users.views import IndexView
......
urlpatterns = [
......
#配置验证码
path( 'captcha/' ,include( 'captcha.urls' )),
#首页url
path(' ', IndexView.as_view(), name=' index'),
......
]
|
3.settings.py中添加一个注册信息
1
2
3
4
5
6
|
INSTALLED_APPS = [
......
'captcha'
]
|
4.打开终端Terminal执行更新数据库命令:
1
2
|
python manage.py makemigrations
python manage.py migrate
|
5.在users目录下新建form.py文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
from django import forms
from captcha.fields import CaptchaField
......
class RegisterForm(forms.Form):
"""注册信息的验证"""
......
captcha = CaptchaField(error_messages = { 'invalid' : '验证码错误' })
......
|
6.在users/views.py中添加代码:
1
2
3
4
5
6
7
8
|
from users.form import RegisterForm
class IndexView(View):
"""首页"""
def get( self ,request):
register_form = RegisterForm()
return render(request, 'index.html' ,{ 'register_form' :register_form})
|
7.在前端首页index.html中显示验证码、输入框
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
< div class = "modal fade" id = "register" tabindex = "-1" role = "dialog" >
......
<!--模态框中关于注册的内容start-->
< div class = "modal-body" >
......
< P >< div style = "display: inline-block;width:100px;text-align: center" >< b >验证码:</ b ></ div >
<!--验证码start-->
< div class = "cap" >{{ register_form.captcha }}</ div >
<!--验证码end-->
</ P >
{% csrf_token %}
</ form >
< p >< div style = "margin-left: 100px;background-color: orangered;width:150px;text-align: center" >< b ></ b ></ div ></ p >
</ div >
<!--模态框中关于注册的内容end-->
......
|
css
1
2
3
4
5
6
7
8
9
10
|
<style>
.cap{
display : inline- block ;
width : 280px ;
height : 36px ;
}
.cap img{
float : right ;
}
</style>
|
js 跟刷新验证码相关(需要先引入jQuery)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$( function (){
$( '.captcha' ).css({
'cursor' : 'pointer'
});
/*# ajax 刷新*/
$( '.captcha' ).click( function (){
console.log( 'click' );
$.getJSON( "/captcha/refresh/" , function (result){
$( '.captcha' ).attr( 'src' , result[ 'image_url' ]);
$( '#id_captcha_0' ).val(result[ 'key' ])
});
});
})
|
二、ajax邮箱注册
1.在前端跟注册绑定的模态框代码写成:
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
< div class = "modal fade" id = "register" tabindex = "-1" role = "dialog" >
......
< div class = "modal-body" >
< form id = "registerform" action = "#" method = "post" >
< p >
< div class = "re-input" >< b >用户名:</ b ></ div >
< input type = "text" name = "user" placeholder = "用户名" >
< div class = "msg" >< b id = "user-msg" ></ b ></ div >
</ p >
< p >
< div class = "re-input" >< b >邮箱:</ b ></ div >
< input type = "text" name = "email" placeholder = "邮箱" >
< div class = "msg" >< b id = "email-msg" >2222</ b ></ div >
</ p >
< p >
< div class = "re-input" >< b >密码:</ b ></ div >
< input type = "password" name = "pwd" placeholder = "密码(不少于6位)" >
< div class = "msg" >< b id = "pwd-msg" >222</ b ></ div >
</ p >
< p >
< div class = "re-input" >< b >确认密码:</ b ></ div >
< input type = "password" name = "pwd2" placeholder = "确认密码" >
< div class = "msg" >< b id = "pwd-msg2" >22</ b ></ div >
</ p >
< P >< div class = "re-input" >< b >验证码:</ b ></ div >
< div class = "cap" >{{ register_form.captcha }}</ div >
< div class = "msg" >< b id = "captcha-msg" >2</ b ></ div >
</ P >
{% csrf_token %}
</ form >
< p >< div style = "margin-left: 100px;color: white;background-color: green;width:180px;text-align: center" >< b id = "active-msg" ></ b ></ div ></ p >
......
< button type = "button" class = "btn btn-primary" id = "registerbtn" >确认注册</ button >
......
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<style>
.cap{
display : inline- block ;
width : 280px ;
height : 36px ;
}
.cap img{
float : right ;
}
.re-input{
display : inline- block ;
width : 100px ;
text-align : center
}
.msg{
margin-left : 100px ;
background-color : orangered;
width : 180px ;
text-align : center
}
</style>
|
跟ajax注册相关的js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$( "#registerbtn" ).click( function () {
$.ajax({
cache: false ,
type: "POST" ,
url: "{% url 'users:register' %}" ,
dataType: 'json' ,
data:$( '#registerform' ).serialize(),
//通过id找到提交form表单,并将表单转成字符串
async: true ,
//异步为真,ajax提交的过程中,同时可以做其他的操作
success: function (data) {
//jquery3以后,会将回传过来的字符串格式的data自动json解析不用再使用一遍JSON.parse(data)了,不然反而会在控制台报错
if (data.status){
$( '#active-msg' ).html(data.status);
} else {
if (data.user){
username_msg=data.user.toString();
$( '#user-msg' ).html( '用户名' + username_msg);
}
if (data.email){
email_msg=data.email.toString();
$( '#email-msg' ).html( '邮箱' + email_msg);
}
if (data.pwd){
password_msg=data.pwd.toString();
$( '#pwd-msg' ).html( '密码' + password_msg);
}
if (data.captcha){
captcha_msg=data.captcha.toString();
$( '#captcha-msg' ).html(captcha_msg);
}
msg=data.__all__.toString();
$( '#active-msg' ).html(msg);
}
}
});
});
|
提升用户交互体验的js代码:
1
2
3
4
5
6
7
8
|
$( "input" ).bind( 'input propertychange' , function () {
$( '#login-fail' ).html( '' );
$( '#user-msg' ).html( '' );
$( '#email-msg' ).html( '' );
$( '#pwd-msg' ).html( '' );
$( '#pwd-msg2' ).html( '' );
$( '#captcha-msg' ).html( '' );
});
|
2.users/form.py代码:(要验证的字段名跟前端input框的name值要保持一致!)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
from django import forms
from captcha.fields import CaptchaField
from .models import UserProfile
class RegisterForm(forms.Form):
"""注册信息的验证"""
user = forms.CharField(required = True , error_messages = { 'required' : '用户名不能为空.' })
email = forms.EmailField(required = True ,error_messages = { 'required' : '邮箱不能为空.' })
pwd = forms.CharField(required = True ,
min_length = 6 ,
error_messages = { 'required' : '密码不能为空.' , 'min_length' : "至少6位" })
pwd2 = forms.CharField(required = True ,
min_length = 6 ,
error_messages = { 'required' : '密码不能为空.' , 'min_length' : "至少6位" })
captcha = CaptchaField(error_messages = { 'invalid' : '验证码错误' })
def clean( self ):
'''验证两次密码是否一致'''
p1 = self .cleaned_data.get( 'pwd' )
p2 = self .cleaned_data.get( 'pwd2' )
if p1! = p2:
raise forms.ValidationError( '两次输入密码不一致' )
else :
return self .cleaned_data
|
3.users/views.py中与注册相关的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
......
from django.http import HttpResponse
from .models import UserProfile,ShopProfile
from users.form import RegisterForm
from django.contrib.auth.hashers import make_password
import json
class RegisterView(View):
"""邮箱注册"""
def post( self , request):
register_form = RegisterForm(request.POST)
if register_form.is_valid():
user_name = request.POST.get( 'user' ,'')
email = request.POST.get( 'email' ,'')
pass_word = request.POST.get( 'pwd' ,'')
u = UserProfile.objects. filter (username = user_name).count()
e = UserProfile.objects. filter (email = email).count()
if u or e:
return HttpResponse( '{"status":"该用户名或邮箱已被占用!"}' )
else :
user_profile = UserProfile()
user_profile.username = user_name
user_profile.email = email
user_profile.password = make_password(pass_word)
user_profile.is_active = False
user_profile.save()
return HttpResponse( '{"status":"注册成功请去邮箱激活!"}' )
msg = register_form.errors
msg = json.dumps(msg)
return HttpResponse(msg)
|
4.配置users/urls.py注册路由:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
......
from .views import RegisterView
.....
urlpatterns = [
......
path( 'register/' ,RegisterView.as_view(),name = 'register' ),
......
]
|
三、邮箱激活已注册的账号:
1.新建个数据表存放邮箱激活码:
在users/models.py中增加代码:
1
2
3
4
5
6
7
8
9
10
11
12
|
class EmailVerifyRecord(models.Model):
"""邮箱激活码"""
code = models.CharField(max_length = 20 ,verbose_name = '验证码' )
email = models.EmailField(max_length = 50 ,verbose_name = '邮箱' )
send_type = models.CharField(verbose_name = '验证码类型' ,choices = (( 'register' , '注册' ),( 'forget' , '忘记密码' )),
max_length = 20 )
send_time = models.DateTimeField(verbose_name = '发送时间' ,default = datetime.now)
class Meta:
verbose_name = '邮箱验证码'
verbose_name_plural = verbose_name
def __str__( self ):
return '{0}({1})' . format ( self .code, self .email)
|
在users/adminx.py中注册数据表:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
......
from .models import EmailVerifyRecord
......
class EmailVerifyRecordAdmin( object ):
list_display = [ 'code' , 'email' , 'send_type' , 'send_time' ]
search_fields = [ 'code' , 'email' , 'send_type' ]
list_filter = [ 'code' , 'email' , 'send_type' , 'send_time' ]
......
xadmin.site.register(EmailVerifyRecord,EmailVerifyRecordAdmin)
|
打开终端Terminal执行更新数据库命令:
1
2
|
python manage.py makemigrations
python manage.py migrate
|
2.写发邮件的脚本:在apps/users/新建utils/email_send.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
from random import Random
from users.models import EmailVerifyRecord
from django.core.mail import send_mail
from xyw.settings import EMAIL_FROM
def random_str(randomlength = 8 ):
str = ''
chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789'
length = len (chars) - 1
random = Random()
for i in range (randomlength):
str + = chars[random.randint( 0 ,length)]
return str
def send_register_email(email,send_type = 'register' ):
email_record = EmailVerifyRecord()
code = random_str( 16 )
email_record.code = code
email_record.email = email
email_record.send_type = send_type
email_record.save()
email_title = ''
email_body = ''
if send_type = = 'register' :
email_title = '雪易网注册激活链接'
email_body = '请点击下面的链接激活你的账号:http://127.0.0.1:8000/active/{0}' . format (code)
send_status = send_mail(email_title,email_body,EMAIL_FROM,[email])
if send_status:
pass
elif send_type = = 'forget' :
email_title = '雪易密码重置链接'
email_body = '请点击下面的链接重置你的密码:http://127.0.0.1:8000/reset/{0}' . format (code)
send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
if send_status:
pass
|
3.在settings.py中追加发送邮件的配置代码:
1
2
3
4
5
6
7
|
EMAIL_HOST = 'smtp.sina.cn'
EMAIL_PORT = 25
EMAIL_HOST_USER = 'xxxxxxxx@sina.cn' #你的邮箱
EMAIL_HOST_PASSWORD = '********'
EMAIL_USE_TLS = False
EMAIL_FROM = 'xxxxxxx1@sina.cn' #同样是你的邮箱,跟上面都是发信者邮箱
#我用的新浪的,也可以用别的
|
4.开启新浪邮箱的smtp服务,不然不能自动发邮件的,步骤如下:
登录新浪邮箱====》设置区====》客户端pop/imp/smtp====》Pop3/SMTP服务====》服务状态:开启====》保存
5.增加激活功能
在users/views.py中增加激活类ActiveUserView(View)代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
......
from .models import EmailVerifyRecord
......
class ActiveUserView(View):
"""激活账户"""
def get( self ,request,active_code):
all_records = EmailVerifyRecord.objects. filter (code = active_code)
if all_records:
for record in all_records:
email = record.email
user = UserProfile.objects.get(email = email)
user.is_active = True
user.save()
return render(request, 'index.html' )
|
6.在users/views.py中
对注册类 RegisterView(View)增加发送激活邮件的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
......
from apps.utils.email_send import send_register_email
......
class RegisterView(View):
"""邮箱注册"""
def post( self , request):
......
user_profile.save()
#发送邮件代码start
send_register_email(email, 'register' )
#发送邮件代码end
return HttpResponse( '{"status":"注册成功请去邮箱激活!"}' )
|
对登录LoginView(View)增加验证账户激活与否的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
class LoginView(View):
"""用户登录"""
def post( self ,request):
user_name = request.POST.get( "username" ,"")
pass_word = request.POST.get( "pwd" ,"")
user = authenticate(username = user_name,password = pass_word)
if user is not None :
#验证账户是否已经激活start
if user.is_active:
login(request,user)
return HttpResponse( '{"status":"success"}' )
else :
return HttpResponse( '{"status":"fail","msg":"账户未激活"}' )
#验证账户是否已经激活end
else :
return HttpResponse( '{"status":"fail","msg":"用户名或密码错误"}' )
|
至此完成了用邮箱注册及激活,很多时候,激活邮件都会被邮箱自动放入垃圾箱,而且从邮件点击激活链接的时候,还会被提示一些警告信息,可以说通过邮箱注册各种不如通过短信注册,但是……省钱啊!^_^
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/xuepangzi/p/8811148.html