django 通过ajax完成邮箱用户注册、激活账号

一、图片验证码

django-simple-captcha配置

1.在pycharm中,File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha  选择0.55以上版本,然后点install package 按钮进行安装

2.项目名/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.py中添加一个注册信息

INSTALLED_APPS = [

        ......
    
    'captcha'
]

4.打开终端Terminal执行更新数据库命令:

python manage.py makemigrations
python manage.py migrate

5.在users目录下新建form.py文件:

from django import forms
from captcha.fields import CaptchaField
......


class RegisterForm(forms.Form):
    """注册信息的验证"""

    ......

    captcha=CaptchaField(error_messages={'invalid':'验证码错误'})

   ......

 6.在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.在前端首页index.html中显示验证码、输入框

html

<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

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

js 跟刷新验证码相关(需要先引入jQuery)

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

<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

<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代码:

$("#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代码:

$("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值要保持一致!)

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中与注册相关的代码:

......

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


4.配置users/urls.py注册路由:

......

from .views import RegisterView
.....

urlpatterns = [

    ......

    path('register/',RegisterView.as_view(),name='register'),

    ......
    ]

三、邮箱激活已注册的账号:

1.新建个数据表存放邮箱激活码:

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

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

打开终端Terminal执行更新数据库命令:

python manage.py makemigrations
python manage.py migrate

2.写发邮件的脚本:在apps/users/新建utils/email_send.py

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中追加发送邮件的配置代码:

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)代码:

......

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)增加发送激活邮件的代码:

......
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)增加验证账户激活与否的代码:

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":"用户名或密码错误"}')

  至此完成了用邮箱注册及激活,很多时候,激活邮件都会被邮箱自动放入垃圾箱,而且从邮件点击激活链接的时候,还会被提示一些警告信息,可以说通过邮箱注册各种不如通过短信注册,但是……省钱啊!^_^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在CentOS 7上安装和配置ownCloud

ownCloud是一个文件共享服务器,允许您将个人内容(如文档和图片)集中存储在此位置,就像Dropbox一样。与ownCloud的不同之处在于它是免费的开源软...

99400
来自专栏散尽浮华

Nginx的https配置记录以及http强制跳转到https的方法梳理

一、Nginx安装(略) 安装的时候需要注意加上 --with-http_ssl_module,因为http_ssl_module不属于Nginx的基本模块。 ...

910100
来自专栏农夫安全

【补充】任意密码重置姿势

跟第三个有点类似,只判断了接收端和验证码是否一致,未判断接收端是否和用户匹配,因此修改接收端可达到重置目的

12420
来自专栏www.96php.cn

【thinkphp】极验3.0的配置方法

ThinkPHP\Library\Vendor\Geetest\Geetestlib.php <?php /**  * 极验行为式验证安全平台,php 网站主...

52270
来自专栏Laoqi's Linux运维专列

linux安全配置

今天清早登录服务器发现很多暴力狗(使用ssh端口破解登录密码),真不知道这些人有啥意思,破解了无非是把我的服务器当作肉鸡再去攻击其他服务器,目的无非就是证明你有...

50150
来自专栏运维一切

sentry部署整理 原

sentry是python开发的一个应用,使用python uWSG框架运行,所有安装完sentry要记得在nginx的代理上禁用掉/admin路径,不然uws...

25210
来自专栏Java学习123

windows下使用curl命令 && 常用curl命令

50880
来自专栏张戈的专栏

Linux系统编译安装Redis以及主从复制配置小记

Redis 的安装配置很简单,而且很早之前就装过 Redis,可这几天再次安装时居然又遗忘了一些细节,看来好记性不如烂笔头,还是在博客记录一下比较好,至少不用总...

29330
来自专栏云计算教程系列

如何在Ubuntu 14.04上将解析应用程序迁移到解析服务器

Parse是一个移动后端即服务平台,自2013年起由Facebook拥有。2016年1月,Parse宣布其托管服务将于2017年1月28日完全关闭。

5400
来自专栏耕耘实录

一道关于文件批量查找并替换内容并移动文件且将其按规则重命名的面试题

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

11020

扫码关注云+社区

领取腾讯云代金券