django+vue3通过邮箱重置密码

Li- Li

已于 2022-07-18 09:21:37 修改

阅读量1.5k

点赞数 1

分类专栏： django+vue3 文章标签： django python 后端

于 2022-06-11 15:40:25 首次发布

本文链接：https://blog.csdn.net/weixin_62935305/article/details/125234349

版权

django+vue3 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

1.前言

2.django

2.1 通过邮箱重置密码流程

2.2简单的发布邮件

2.3配置异步进行发邮件

2.4 重置密码完整代码

3.vue3

3.1vue3重置邮箱密码流程

3.2 vue3 具体代码及解析

1.前言

一般在登录一些社交平台时候，可能会忘记密码，然后就要通过手机号或者绑定邮箱找回密码，然后再进行重新登录。也相信在做的各位都有这种情况，那么就让我们一起来了解了解这奇妙的流程

2.django

2.1通过邮箱重置密码流程

找到code码对应的邮箱进行密码修改然后使用新密码进行登录

2.2简单的发布邮件

在QQ邮箱->设置->帐户->“POP3/IMAP......服务” 里得到的在第三方登录QQ邮箱授权码

在settings.py 里面进行配置

# 邮箱配置
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'  # 腾讯QQ邮箱 SMTP 服务器地址
EMAIL_PORT = 25  # SMTP服务的端口号
EMAIL_HOST_USER = '自己的qq邮箱'  # 发送邮件的QQ邮箱
EMAIL_HOST_PASSWORD = '自己的授权码'  # 在QQ邮箱->设置->帐户->“POP3/IMAP......服务” 里得到的在第三方登录QQ邮箱授权码

简单的发送邮件

from django.core import mail


class SendMail(APIView):
    """发送邮件"""

    def post(self, request):
        subject = '主题'  #标题
        message = "钰姐大美"  # 可以html结构的页面内容
        from_emil = '发件人的电子邮件'  # 发件人的电子邮件
        recipient_list = ['收件人的电子邮件']  # 收件人的电子邮件
        result = mail.send_mail(subject, message, from_emil, recipient_list)  # mail.send发送邮件
        print('2222', result)
        return Response({'code': '200', 'data': result})

2.3配置异步进行邮件发送

具体的讲解去看Li-Li的celery解释 http://t.csdn.cn/h4Vg2

这里就说如何加入异步任务

通过@celery_app.task 把指定的这个函数执行交给异步执行

异步任务调用：异步方法.delay(参数) ---异步方法

如果没有delay() ------- 同步方法

import time

from celery_task import celery_app
# @app.task 指定将这个函数的执行交给celery异步执行
from django.core import mail


@celery_app.task
def test(mobile, code):
    print('1111')
    time.sleep(15)
    return mobile + code

@celery_app.task(name='send_email')
def send_email1(subject, message, from_email, to_email):
    # 如果是异步沉睡10s
    time.sleep(10)
    mail.send_mail(subject, message, from_email, to_email)
    print('发邮件')

在视图中进行调用配置好的异步任务

from django.core import mail
from celery_task.tasks import send_email1

class SendMail(APIView):
    """发送邮件"""

    def post(self, request):
        subject = '主题'
        message = "钰姐大美"  # 可以html结构的页面
        from_emil = '2154302429@qq.com'  # 发件人的电子邮件
        recipient_list = ['2574451281@qq.com']  # 收件人的电子邮件
        #调用异步中的send_email1
        send_email1(subject, message, from_emil, recipient_list)
        return Response({'code': '200'})

1.路由配置

2.django运行

3.celery命令运行

2.4重置密码完整代码

1.获取前端输入绑定的email

2.查看改数据库中是否有这个用户

3.如果有就使用uuid进行生成32位随机的数为code

4.进行邮件发送的配置并发送回调url携带code码进行验证 eg:

http://localhost:8000/login/pass_code?code={}></a>".format(code)

5.将code当做key 把email当做value 存入redis中进行保存 setex(code, 3600, email)

6.然后返回成功

class GetEmail(APIView):
    def post(self, request):
        # 获取邮箱
        email = request.data.get('email')
        try:
            user = User.objects.get(email=email)
            if user:
                code = uuid.uuid1().hex
                print(code)
                try:
                    subject = '重置密码'
                    # url="http://localhost:8000/login/pass_code?code={}></a>".format(code)
                    # context={'url': url}
                    message = "'http://localhost:8000/login/pass_code?code={}'></a>".format(code)
                    from_email = '2154302429@qq.com'
                    to_email = [email]
                    # email_template_name = 'index.html'
                    # t = loader.get_template(email_template_name)
                    # html_content = t.render(context)
                    # msg = EmailMultiAlternatives(subject, html_content, from_email, to_email)
                    # msg.attach_alternative(html_content, "text/html")
                    # msg.send()
                    # 异步函数.delay()---调用
                    send_email1.delay(subject, message, from_email, to_email)
                    # 成功存入redis,code为key,邮箱为value加过期时间
                    res = redis.Redis()
                    res.setex(code, 3600, email)
                    res.close()
                    return Response({'code': 200, 'msg': '发送成功', 'data': code})
                except:
                    error = traceback.format_exc()
                    print('error', error)
                    return Response({'code': 10011, 'msg': '发送邮件失败'})
        except:
            # 返回结果
            return Response({'code': 10010, 'msg': '邮箱不存在无法进行验证'})

1.回调验证url 中携带的code

2是不是email的key

3.如果是emial

4.让他跳转到前端修改密码页面并在url中携带code

5.如果不是就返回code错误

class PassCode(APIView):
    def get(self, request):
        # 获取唯一标识
        code = request.query_params.get('code')
        # 验证
        res = redis.Redis()
        # 使用get()获取信息
        email = res.get(code)
        if email:
            # 跳转到修改密码页面
            url = 'http://localhost:8080/confirm_pwd?code={}'.format(code)
            return Response({'msg': '获取成功', 'code': 200, 'data': url})
        else:
            # 跳转到vue页面提示验证失败，不能进行修改
            pass

1.获取到前端传来的code，和新密码

2.去redis中取出code携带的emial

3.redis取出使用decode转换为string

4.使用django自带的make_password()进行密码加密

5.通过模型类.objects.filter(过滤条件).update(修改信息) 进行修改

6.返回修改成功

class PutPass(APIView):
    def post(self, request):
        code = request.data.get('code')
        res = redis.Redis()
        email = res.get(code).decode()
        pwd = request.data.get('password')
        password = make_password(pwd)
        user=User.objects.filter(email=email)
        user.update(password=password)
        return Response({'code': 200, 'msg': '修改密码成功'})

3.vue3

3.1vue3重置邮箱密码流程

注意：这前提条件是正确的情况下

1.点击前端的忘记密码进行跳转到找回密码绑定qq邮箱页面

2.在点击确定是这个qq邮箱密码之后

3.会发送一条邮件里面有url

4.点击url 会跳到确定修改密码页面

5.进行填写新的密码

6.填写完成之后就点击确定

7.跳转到登录页面进行从写登录

3.2 vue3 具体代码及解析

登录页面的点击忘记密码的代码

<template>
  <div>
      <from>
           账号:&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' v-model="username" name='username'/><br>
           手机号: <input type='text' v-model="phone" name='phone'/><br>
           密码:&nbsp;&nbsp;&nbsp;&nbsp;<input type='password' v-model="password" name='password'/><br>
           <input type='button' value="登录" @click="login"/>
           <input type ='button' value="忘记密码" @click="exit"/>
      </from>
     
  </div>

</template>

<script>
import Axios from 'axios'
export default {
name:'Login',
data(){
    return{
        username:'',
        phone:'',
        password:'',
    }
},
methods:{
    login(){
        Axios.post('/login/login/',{username:this.username,
        phone:this.phone,
        password:this.password,
        })
        .then(resp=>{
            alert("正在登录中，请稍后")
            console.log(resp.data)
            alert('登录成功')
            localStorage.setItem('token', resp.data.token)
        }).catch(err=>{
            console.log(err)
        })
    },
    exit(){
        alert('正在跳转到找回密码页面')
        this.$router.push('/update_pwd')
    }
},
mounted(){

}

}
</script>

<style>

</style>

点击忘记密码之后跳转到绑定页面的代码

<template>
  <div>
    <h2>找回密码页面</h2>
    <input v-model="email" placeholder="请输入你绑定的QQ邮箱"/><br><br>
    <el-low>
    <el-button type="success" @click="btn" round>确认</el-button>&nbsp;&nbsp;
    <el-button type='primary' @click="exit" round>取消</el-button>
    </el-low>
   
  </div>
</template>

<script>
import Axios from 'axios'
export default {
    name:"UpdatePwd",
    data(){
        return{
            email:'',
        }
    },
    methods:{
        btn(){
            Axios.post('/login/get_email/',{email:this.email})
            .then(resp=>{
                alert('确定是绑定的qq邮箱')
                console.log(resp.data) 
                if(resp.data.code == 200){
                    console.log('this.code',resp.data.data)
                    this.getcode(resp.data.data)
                    localStorage.setItem('code', resp.data.data)
                }
                // alert('成功正在跳转页面')
                // this.$router.push('/confirm_pwd')
            }).catch(err=>{
                alert('这不是绑定的qq邮箱')
                console.log(err)
            })
        },
        // 获取后端回调的code
        getcode(code){
            Axios.get('/login/pass_code/',{params:{code:code}})
            .then((resp)=>{
                console.log('4444',resp.data)
                // 获取到返回的url进行跳转到确定修改密码页面
                console.log('333',resp.data.data)
                window.open(resp.data.data,'_blank')
            }).catch((err)=>{
                alert('链接获取失败')
                console.log(err)
            })

        },
        // 取消修改
        exit(){
            this.email = ''
        }

    },
    mounted(){

    }


}
</script>

<style>

</style>

然后点击邮件里面的url 可以跳转到确定修改密码页面（或者前端直接可以跳转）

修改成功会跳转到登录页面

<template>
  <div>
    <input v-model="password" placeholder="请输入你新的密码"/><br><br>
    <el-low>
    <el-button type="success" @click="btn" round>确认</el-button>&nbsp;&nbsp;
    <el-button type='primary' @click="exit" round>取消</el-button>
    </el-low>

  </div>
</template>

<script>
import Axios from 'axios'
export default {
name:'ConfirmPwd',
data(){
    return{
        password:""

    }
},
methods:{
    btn(){
        //取出存在code
        this.code =localStorage.getItem('code')
        console.log('code',this.code)
        //将取出的code进行传入
        Axios.post('/login/put_pass/',{password:this.password,code:this.code})
        .then(resp=>{
            console.log(resp.data)
            alert('修改成功')
            this.$router.push('/login')
        }).catch(err=>{
            console.log(err)
        })
    },
    exit(){
        this.password =''
    }

},
mounted(){
}

}
</script>

<style>

4.到这就结束了，快去写写吧，如果感觉不错有帮助的话，帮忙评论，点赞。这只是小编lili 的写法借鉴啊有问题请指出