django에서 ajax를 통해 이메일 사용자 등록 및 계정 활성화를 완료하는 방법

不言
풀어 주다: 2018-04-17 11:43:34
원래의
2556명이 탐색했습니다.

이 글에서는 주로 Ajax를 통해 Django에서 이메일 사용자 등록 및 계정 활성화를 완료하는 방법을 소개하고 참고용으로 올려드립니다. 함께 살펴볼까요

1. 사진 인증 코드

django-simple-captcha 구성

1. pycharm에서 파일====》설정====》프로젝트: 프로젝트 이름= ===》프로젝트 인터프리터====》+====》django-simple-captcha 검색 버전 0.55 이상을 선택하고 패키지 설치 버튼을 클릭하여 설치합니다.

2. 프로젝트 이름에 코드를 추가합니다. :

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. 터미널을 열고 데이터베이스 업데이트 명령을 실행합니다.

python manage.py makemigrations
python manage.py migrate
로그인 후 복사
로그인 후 복사

5. 사용자 디렉터리 .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. 확인 코드와 입력 상자를 프런트엔드 홈페이지 색인에 표시합니다. 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는 인증 코드 새로 고침과 관련이 있습니다(jQuery를 먼저 도입해야 함)

$(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;])
      });
    });
  })
로그인 후 복사

2. jax 이메일 등록

1. 프런트 엔드 등록에 연결 특정 모달 박스 코드는 다음과 같이 작성됩니다:

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 코드 관련 ajax 등록:

$("#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);

        }
      }
    });
  });
로그인 후 복사

사용자 상호 작용 경험을 향상시키는 js 코드:

$("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;);
  });
로그인 후 복사

2.users/form.py 코드: (확인할 필드 이름은 프런트엔드 입력 상자의 이름 값과 일치해야 합니다!)

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
로그인 후 복사

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



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)
로그인 후 복사

4 users/urls.py 등록 경로 구성:

......

from .views import RegisterView
.....

urlpatterns = [

  ......

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

  ......
  ]
로그인 후 복사

3. 등록된 계정:

1. 새 데이터 테이블을 생성하여 이메일 활성화 코드를 저장합니다:

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)
로그인 후 복사

users/adminx.py에 데이터 테이블 등록:

......

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)
로그인 후 복사

터미널을 열어 데이터베이스 업데이트 실행 명령:

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=&#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
로그인 후 복사

4. Sina Mailbox의 SMTP 서비스를 활성화하세요. 그렇지 않으면 자동으로 이메일을 보낼 수 없습니다:

Sina Mailbox에 로그인====》설정 영역====》클라이언트 pop/imp/smtp = ===》Pop3/SMTP 서비스====》서비스 상태: on====》저장

5. 활성화 기능 추가

users/views.py에 활성화 클래스 ActiveUserView(View) 코드 추가:

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; #同样是你的邮箱,跟上面都是发信者邮箱
#我用的新浪的,也可以用别的
로그인 후 복사

6. users/views.py에서

등록 클래스 RegisterView(보기)에 활성화 이메일을 보내기 위한 코드를 추가합니다.

......

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;)
로그인 후 복사

로그인 LoginView에 대한 확인 계정 활성화 여부를 추가합니다( 보기) 코드:

......
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;)
로그인 후 복사

이제 이메일로 등록 및 활성화를 완료한 경우 활성화 이메일이 자동으로 휴지통에 들어가는 경우가 많으며, 이메일에서 활성화 링크를 클릭하면 이메일을 통한 등록은 문자 메시지를 통한 등록만큼 좋지 않다고 하지만... 비용이 절약됩니다! ^_^

관련 권장 사항:

Django의 인증 모듈(사용자 인증)에 대한 자세한 설명


위 내용은 django에서 ajax를 통해 이메일 사용자 등록 및 계정 활성화를 완료하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿