How to complete email user registration and account activation through ajax in django-Python Tutorial-php.cn

Home

Backend Development

Python Tutorial

How to complete email user registration and account activation through ajax in django

不言

Apr 17, 2018 am 11:43 AM

ajax django Mail

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(&#39;captcha/&#39;,include(&#39;captcha.urls&#39;)),
  #首页url
  path(&#39;&#39;, IndexView.as_view(), name=&#39;index&#39;),

  ......
]

Copy after login

3.settings Add a registration information in .py

INSTALLED_APPS = [

    ......
  
  &#39;captcha&#39;
]

Copy after login

4. Open the Terminal and execute the update database command:

python manage.py makemigrations
python manage.py migrate

Copy after login

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={&#39;invalid&#39;:&#39;验证码错误&#39;})

  ......

Copy after login

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,&#39;index.html&#39;,{&#39;register_form&#39;:register_form})

Copy after login

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-->

  ......

Copy after login

css

<style>
  .cap{
    display: inline-block;
    width: 280px;
    height: 36px;
  }
  .cap img{
    float: right;
  }
</style>

Copy after login

js is related to refreshing the verification code (need to introduce jQuery first)

$(function(){
    $(&#39;.captcha&#39;).css({
    &#39;cursor&#39;: &#39;pointer&#39;
  });
  /*# ajax 刷新*/
    $(&#39;.captcha&#39;).click(function(){
      console.log(&#39;click&#39;);
      $.getJSON("/captcha/refresh/",function(result){
        $(&#39;.captcha&#39;).attr(&#39;src&#39;, result[&#39;image_url&#39;]);
        $(&#39;#id_captcha_0&#39;).val(result[&#39;key&#39;])
      });
    });
  })

Copy after login

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>

   ......

Copy after login

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>

Copy after login

js code related to ajax registration :

$("#registerbtn").click(function() {
    $.ajax({
      cache:false,
      type:"POST",
      url:"{% url &#39;users:register&#39; %}",
      dataType:&#39;json&#39;,
      data:$(&#39;#registerform&#39;).serialize(),
      //通过id找到提交form表单，并将表单转成字符串
      async:true,
      //异步为真，ajax提交的过程中，同时可以做其他的操作
      success:function (data) {
        //jquery3以后，会将回传过来的字符串格式的data自动json解析不用再使用一遍JSON.parse(data)了，不然反而会在控制台报错
        if(data.status){
          $(&#39;#active-msg&#39;).html(data.status);

        } else{
          if(data.user){
            username_msg=data.user.toString();
            $(&#39;#user-msg&#39;).html(&#39;用户名&#39;+ username_msg);
          }
          if(data.email){
            email_msg=data.email.toString();
            $(&#39;#email-msg&#39;).html(&#39;邮箱&#39;+ email_msg);
          }
          if(data.pwd){
            password_msg=data.pwd.toString();
            $(&#39;#pwd-msg&#39;).html(&#39;密码&#39;+ password_msg);
          }
          if(data.captcha){
            captcha_msg=data.captcha.toString();
            $(&#39;#captcha-msg&#39;).html(captcha_msg);
          }
          msg=data.__all__.toString();
          $(&#39;#active-msg&#39;).html(msg);

        }
      }
    });
  });

Copy after login

JS code to improve user interaction experience:

$("input").bind(&#39;input propertychange&#39;, function() {
    $(&#39;#login-fail&#39;).html(&#39;&#39;);
    $(&#39;#user-msg&#39;).html(&#39;&#39;);
    $(&#39;#email-msg&#39;).html(&#39;&#39;);
    $(&#39;#pwd-msg&#39;).html(&#39;&#39;);
    $(&#39;#pwd-msg2&#39;).html(&#39;&#39;);
    $(&#39;#captcha-msg&#39;).html(&#39;&#39;);
  });

Copy after login

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={&#39;required&#39;: &#39;用户名不能为空.&#39;})
  email=forms.EmailField(required=True,error_messages={&#39;required&#39;: &#39;邮箱不能为空.&#39;})
  pwd = forms.CharField(required=True,
             min_length=6,
             error_messages={&#39;required&#39;: &#39;密码不能为空.&#39;, &#39;min_length&#39;: "至少6位"})
  pwd2 = forms.CharField(required=True,
             min_length=6,
             error_messages={&#39;required&#39;: &#39;密码不能为空.&#39;, &#39;min_length&#39;: "至少6位"})
  captcha=CaptchaField(error_messages={&#39;invalid&#39;:&#39;验证码错误&#39;})

  def clean(self):
    &#39;&#39;&#39;验证两次密码是否一致&#39;&#39;&#39;
    p1=self.cleaned_data.get(&#39;pwd&#39;)
    p2=self.cleaned_data.get(&#39;pwd2&#39;)
    if p1!=p2:
      raise forms.ValidationError(&#39;两次输入密码不一致&#39;)
    else:
      return self.cleaned_data

Copy after login

3.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(&#39;user&#39;,&#39;&#39;)
      email=request.POST.get(&#39;email&#39;,&#39;&#39;)
      pass_word=request.POST.get(&#39;pwd&#39;,&#39;&#39;)
      u=UserProfile.objects.filter(username=user_name).count()
      e=UserProfile.objects.filter(email=email).count()
      if u or e:
        return HttpResponse(&#39;{"status":"该用户名或邮箱已被占用！"}&#39;)
      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(&#39;{"status":"注册成功请去邮箱激活！"}&#39;)
    msg=register_form.errors
    msg=json.dumps(msg)
    return HttpResponse(msg)

Copy after login

4. Configure users/urls.py registration route:

......

from .views import RegisterView
.....

urlpatterns = [

  ......

  path(&#39;register/&#39;,RegisterView.as_view(),name=&#39;register&#39;),

  ......
  ]

Copy after login

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=&#39;验证码&#39;)
  email=models.EmailField(max_length=50,verbose_name=&#39;邮箱&#39;)
  send_type=models.CharField(verbose_name=&#39;验证码类型&#39;,choices=((&#39;register&#39;,&#39;注册&#39;),(&#39;forget&#39;,&#39;忘记密码&#39;)),
                max_length=20)
  send_time=models.DateTimeField(verbose_name=&#39;发送时间&#39;,default=datetime.now)
  class Meta:
    verbose_name=&#39;邮箱验证码&#39;
    verbose_name_plural=verbose_name
  def __str__(self):
    return &#39;{0}({1})&#39;.format(self.code,self.email)

Copy after login

......

from .models import EmailVerifyRecord

......

class EmailVerifyRecordAdmin(object):
  list_display = [&#39;code&#39;, &#39;email&#39;, &#39;send_type&#39;, &#39;send_time&#39;]
  search_fields = [&#39;code&#39;, &#39;email&#39;, &#39;send_type&#39;]
  list_filter = [&#39;code&#39;, &#39;email&#39;, &#39;send_type&#39;, &#39;send_time&#39;]

......

xadmin.site.register(EmailVerifyRecord,EmailVerifyRecordAdmin)

Copy after login

Open Terminal and execute the update database command:

python manage.py makemigrations
python manage.py migrate

Copy after login

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=&#39;&#39;
  chars=&#39;AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789&#39;
  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=&#39;register&#39;):
  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=&#39;&#39;
  email_body=&#39;&#39;

  if send_type==&#39;register&#39;:
    email_title=&#39;雪易网注册激活链接&#39;
    email_body=&#39;请点击下面的链接激活你的账号：http://127.0.0.1:8000/active/{0}&#39;.format(code)

    send_status=send_mail(email_title,email_body,EMAIL_FROM,[email])
    if send_status:
      pass
  elif send_type==&#39;forget&#39;:
    email_title = &#39;雪易密码重置链接&#39;
    email_body = &#39;请点击下面的链接重置你的密码：http://127.0.0.1:8000/reset/{0}&#39;.format(code)

    send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
    if send_status:
      pass

Copy after login

3. Add the configuration code for sending emails in settings.py:

EMAIL_HOST=&#39;smtp.sina.cn&#39;
EMAIL_PORT=25
EMAIL_HOST_USER=&#39;xxxxxxxx@sina.cn&#39; #你的邮箱
EMAIL_HOST_PASSWORD=&#39;********&#39;
EMAIL_USE_TLS=False
EMAIL_FROM=&#39;xxxxxxx1@sina.cn&#39; #同样是你的邮箱，跟上面都是发信者邮箱
#我用的新浪的，也可以用别的

Copy after login

4. Enable the SMTP service of Sina Mailbox, otherwise it will not be able to send emails automatically. The steps are as follows:

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,&#39;index.html&#39;)

Copy after login

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,&#39;register&#39;)
#发送邮件代码end

  return HttpResponse(&#39;{"status":"注册成功请去邮箱激活！"}&#39;)

Copy after login

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(&#39;{"status":"success"}&#39;)
      else:
        return HttpResponse(&#39;{"status":"fail","msg":"账户未激活"}&#39;)

#验证账户是否已经激活end

    else:
      return HttpResponse(&#39;{"status":"fail","msg":"用户名或密码错误"}&#39;)

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

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

Where is the login entrance for gmail email?

7755

Java Tutorial

1643

CakePHP Tutorial

1399

Laravel Tutorial

1293

PHP Tutorial

1234

Related knowledge

What are the Redis memory data types? Apr 10, 2025 pm 02:06 PM

Redis provides five core memory data types: String: basic string storage, supporting incremental/decreasing operations. List: Bidirectional linked list, efficient insertion/deletion operation. Set: Unordered set, used for deduplication operations. Hash: Key-value pair storage, suitable for storing structured data. Zset: Ordered set, each element has fractions, and can be sorted by fractions. Choosing the right data type is critical to optimizing performance.

How to simplify email marketing with Composer: DUWA.io's application practices Apr 18, 2025 am 11:27 AM

I'm having a tricky problem when doing a mail marketing campaign: how to efficiently create and send mail in HTML format. The traditional approach is to write code manually and send emails using an SMTP server, but this is not only time consuming, but also error-prone. After trying multiple solutions, I discovered DUWA.io, a simple and easy-to-use RESTAPI that helps me create and send HTML mail quickly. To further simplify the development process, I decided to use Composer to install and manage DUWA.io's PHP library - captaindoe/duwa.

Is the syntax of adding columns in different database systems the same? Apr 09, 2025 pm 12:51 PM

The syntax for adding columns in different database systems varies greatly, and varies from database to database. For example: MySQL: ALTER TABLE users ADD COLUMN email VARCHAR(255); PostgreSQL: ALTER TABLE users ADD COLUMN email VARCHAR(255) NOT NULL UNIQUE;Oracle: ALTER TABLE users ADD email VARCHAR2(255);SQL Server: ALTER TABLE users ADD email VARCH

How to monitor debian mail server Apr 12, 2025 pm 10:06 PM

To ensure that your Debian mail server runs stably, an effective monitoring mechanism is required. This article introduces several monitoring methods, including log checking, monitoring tools and alarm system settings. 1. Log monitoring The log files of the Debian mail server are usually located in the /var/log/ directory, such as /var/log/mail.log. Regularly checking these logs can help you identify potential problems in a timely manner. 2. Monitoring tools and script examples The following provides several Bash script examples for monitoring CPU, memory and disk space usage and sending email alarms: 1. CPU usage monitoring: #!/bin/bashTHRESHOLD=80EMAILS="your_emai

Nginx virtual host configuration skills, efficiently manage multiple websites Apr 13, 2025 pm 10:03 PM

Nginx virtual host configuration: Playing around your server garden Have you ever thought about how one server elegantly serves multiple websites at the same time? The answer is the Nginx virtual host configuration. This article will take you into Nginx virtual host configuration tips, allowing you to efficiently manage your "server garden" and avoid some common pitfalls. After reading, you will be able to easily configure the virtual host, understand the mechanism behind it, and write efficient and stable Nginx configuration files. Basic preparation: Don't forget that before starting your toolbox, you need to make sure that Nginx is installed and have some understanding of the basic Linux commands and configuration file structure. We won't explain how to install Nginx here, assuming you've completed this step. remember

Top 10 Digital Virtual Currency Apps Rankings: Top 10 Digital Currency Exchanges in Currency Circle Trading Apr 22, 2025 pm 03:00 PM

The top ten digital virtual currency apps are: 1. OKX, 2. Binance, 3. gate.io, 4. Coinbase, 5. Kraken, 6. Huobi, 7. KuCoin, 8. Bitfinex, 9. Bitstamp, 10. Poloniex. These exchanges are selected based on factors such as transaction volume, user experience and security, and all provide a variety of digital currency trading services and an efficient trading experience.

bitget new user registration guide 2025 Apr 21, 2025 pm 10:09 PM

The steps to register for Bitget in 2025 include: 1. Prepare a valid email or mobile phone number and a stable network; 2. Visit the Bitget official website; 3. Enter the registration page; 4. Select the registration method; 5. Fill in the registration information; 6. Agree to the user agreement; 7. Complete verification; 8. Obtain and fill in the verification code; 9. Complete registration. After registering, it is recommended to log in to the account, perform KYC identity verification, and set up security measures to ensure the security of the account.

Can two exchanges convert coins to each other? Can two exchanges convert coins to each other? Apr 22, 2025 am 08:57 AM

Can. The two exchanges can transfer coins to each other as long as they support the same currency and network. The steps include: 1. Obtain the collection address, 2. Initiate a withdrawal request, 3. Wait for confirmation. Notes: 1. Select the correct transfer network, 2. Check the address carefully, 3. Understand the handling fee, 4. Pay attention to the account time, 5. Confirm that the exchange supports this currency, 6. Pay attention to the minimum withdrawal amount.

See all articles