Backend Development
Python Tutorial
How to complete email user registration and account activation through ajax in django
How to complete email user registration and account activation through ajax in django
This article mainly introduces how Django completes email user registration and account activation through ajax. Now I share it with you and give it as a reference. Let’s take a look together
1. Image verification code
django-simple-captcha configurationSetting
1. In pycharm, File====》Settings====》Project:Project name====》Project Interpreter====》 ====》Search django-simple-captcha》Select 0.55 The above version, then click the install package button to install
2. Add the code in project name/urls.py:
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 Add a registration information in .py
INSTALLED_APPS = [
......
'captcha'
]4. Open the Terminal and execute the update database command:
python manage.py makemigrations python manage.py migrate
5. Create a new form.py file in the users directory:
from django import forms
from captcha.fields import CaptchaField
......
class RegisterForm(forms.Form):
"""注册信息的验证"""
......
captcha=CaptchaField(error_messages={'invalid':'验证码错误'})
......6. Add code to users/views.py:
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. Display the verification code and input box in the front-end homepage index.html
html
<p class="modal fade" id="register" tabindex="-1" role="dialog">
......
<!--模态框中关于注册的内容start-->
<p class="modal-body">
......
<P><p style="display: inline-block;width:100px;text-align: center"><b >验证码：</b></p>
<!--验证码start-->
<p class="cap">{{ register_form.captcha }}</p>
<!--验证码end-->
</P>
{% csrf_token %}
</form>
<p><p style="margin-left: 100px;background-color: orangered;width:150px;text-align: center"><b></b></p></p>
</p>
<!--模态框中关于注册的内容end-->
......css
<style>
.cap{
display: inline-block;
width: 280px;
height: 36px;
}
.cap img{
float: right;
}
</style>js is related to refreshing the verification code (need to introduce jQuery first)
$(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'])
});
});
})2. Ajax email registration
1. The modal box code bound to the registration on the front end is written as:
html
<p class="modal fade" id="register" tabindex="-1" role="dialog">
......
<p class="modal-body">
<form id="registerform" action="#" method="post">
<p>
<p class="re-input"><b>用户名：</b></p>
<input type="text" name="user" placeholder="用户名">
<p class="msg"><b id="user-msg"></b></p>
</p>
<p>
<p class="re-input"><b>邮箱：</b></p>
<input type="text" name="email" placeholder="邮箱">
<p class="msg"><b id="email-msg">2222</b></p>
</p>
<p>
<p class="re-input"><b >密码：</b></p>
<input type="password" name="pwd" placeholder="密码（不少于6位）">
<p class="msg"><b id="pwd-msg">222</b></p>
</p>
<p>
<p class="re-input"><b >确认密码：</b></p>
<input type="password" name="pwd2" placeholder="确认密码">
<p class="msg"><b id="pwd-msg2">22</b></p>
</p>
<P><p class="re-input"><b >验证码：</b></p>
<p class="cap">{{ register_form.captcha }}</p>
<p class="msg"><b id="captcha-msg">2</b></p>
</P>
{% csrf_token %}
</form>
<p><p style="margin-left: 100px;color: white;background-color: green;width:180px;text-align: center"><b id="active-msg"></b></p></p>
......
<button type="button" class="btn btn-primary" id="registerbtn">确认注册</button>
......css
<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>js code related to ajax registration :
$("#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 code to improve user interaction experience:
$("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 code: (The field name to be verified must be consistent with the name value of the front-end input box!)
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_data3.users/views.py Code related to registration:
......
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. Configure users/urls.py registration route:
...... from .views import RegisterView ..... urlpatterns = [ ...... path('register/',RegisterView.as_view(),name='register'), ...... ]
3. E-mail activation for registered accounts:
1. Create a new data table to store the e-mail activation code:
Add code in users/models.py:
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)Register the data table in users/adminx.py:
...... 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)
Open Terminal and execute the update database command:
python manage.py makemigrations python manage.py migrate
2. Write a script for sending emails: Create new utils/email_send.py in apps/users/
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:
pass3. Add the configuration code for sending emails in settings.py:
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. Enable the SMTP service of Sina Mailbox, otherwise it will not be able to send emails automatically. The steps are as follows:
Log in to Sina Mailbox====》Settings Area== ==》Client pop/imp/smtp====》Pop3/SMTP service====》Service status: on====》Save
5. Add activation function
Add activation class ActiveUserView(View) code in users/views.py:
......
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. In users/views.py
Add the code for sending activation emails to the registration class RegisterView(View):
......
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":"注册成功请去邮箱激活！"}')Add the code to verify whether the account is activated or not for the login LoginView(View):
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":"用户名或密码错误"}')Now you have completed the registration and activation by email. Many times, the activation email will be automatically put into the trash by the email, and when you click the activation link from the email, You will also be prompted with some warning messages. It can be said that registering through email is not as good as registering through SMS, but... you save money! ^_^
Related recommendations:
Detailed explanation of Django’s auth module (user authentication)
The above is the detailed content of How to complete email user registration and account activation through ajax in django. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
gate.io registration tutorial
Mar 31, 2025 pm 11:09 PM
This article provides a detailed Gate.io registration tutorial, covering every step from accessing the official website to completing registration, including filling in registration information, verifying, reading user agreements, etc. The article also emphasizes security measures after successful registration, such as setting up secondary verification and completing real-name authentication, and gives tips from beginners to help users safely start their digital asset trading journey.
gate.io latest registration tutorial for beginners
Mar 31, 2025 pm 11:12 PM
This article provides newbies with detailed Gate.io registration tutorials, guiding them to gradually complete the registration process, including accessing the official website, filling in information, identity verification, etc., and emphasizes the security settings after registration. In addition, the article also mentioned other exchanges such as Binance, Ouyi and Sesame Open Door. It is recommended that novices choose the right platform according to their own needs, and remind readers that digital asset investment is risky and should invest rationally.
How to get the return code when email sending fails in Laravel?
Apr 01, 2025 pm 02:45 PM
Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...
In Laravel, how to deal with the situation where verification codes are failed to be sent by email?
Mar 31, 2025 pm 11:48 PM
The method of handling Laravel's email failure to send verification code is to use Laravel...
The latest registration tutorial for gate.io web version
Mar 31, 2025 pm 11:15 PM
This article provides a detailed Gate.io web version latest registration tutorial to help users easily get started with digital asset trading. The tutorial covers every step from accessing the official website to completing registration, and emphasizes security settings after registration. The article also briefly introduces other trading platforms such as Binance, Ouyi and Sesame Open Door. It is recommended that users choose the right platform according to their own needs and pay attention to investment risks.
Binance binance computer version entrance Binance binance computer version PC official website login entrance
Mar 31, 2025 pm 04:36 PM
This article provides a complete guide to login and registration on Binance PC version. First, we explained in detail the steps for logging in Binance PC version: search for "Binance Official Website" in the browser, click the login button, enter the email and password (enable 2FA to enter the verification code) to log in. Secondly, the article explains the registration process: click the "Register" button, fill in the email address, set a strong password, and verify the email address to complete the registration. Finally, the article also emphasizes account security, reminding users to pay attention to the official domain name, network environment, and regularly updating passwords to ensure account security and better use of various functions provided by Binance PC version, such as viewing market conditions, conducting transactions and managing assets.
Understand ACID properties: The pillars of a reliable database
Apr 08, 2025 pm 06:33 PM
Detailed explanation of database ACID attributes ACID attributes are a set of rules to ensure the reliability and consistency of database transactions. They define how database systems handle transactions, and ensure data integrity and accuracy even in case of system crashes, power interruptions, or multiple users concurrent access. ACID Attribute Overview Atomicity: A transaction is regarded as an indivisible unit. Any part fails, the entire transaction is rolled back, and the database does not retain any changes. For example, if a bank transfer is deducted from one account but not increased to another, the entire operation is revoked. begintransaction; updateaccountssetbalance=balance-100wh
The latest registration portal for Ouyi official website
Mar 21, 2025 pm 05:54 PM
As the world's leading digital asset trading platform, Ouyi OKX attracts many investors with its rich trading products, strong security guarantees and convenient user experience. However, the risks of network security are becoming increasingly severe, and how to safely register the official Ouyi OKX account is crucial. This article will provide the latest registration portal for Ouyi OKX official website, and explain in detail the steps and precautions for safe registration, including how to identify the official website, set a strong password, enable two-factor verification, etc., to help you start your digital asset investment journey safely and conveniently. Please note that there are risks in digital asset investment, please make cautious decisions.
