专栏首页一日一工具vue + flask实现邮件密码找回功能

vue + flask实现邮件密码找回功能

vue + flask实现邮件密码找回功能

跟大家聊聊前后端分离情况下的密码找回功能,针对vue+flask的实现在Google上搜索并没有一个很明确的文档,所以在此记录下自己的操作经历。

效果演示

1、判断是否未输入就提交

2、这里做了邮箱自动补全功能,密码手动输入邮箱后缀出错。

1、这里做了密码复杂度的判断

2、做了两次输入密码是否一致判断

密码找回的逻辑

环境

flask

•flask•flask-mail•flask-cors•flask_sqlalchemy•pyjwt

vue

•vue•vue-router•vue-axios•element-ui

核心代码

生成token和验证token

class User(db.Model):    __tablename__ = 'users'    ...    confirmed = db.Column(db.Boolean, default=False)

    def generate_confirmation_token(self, expireation=3600):        """生成token, 过期时间为1个小时        """        s = Serializer(app.config['SECRET_KEY'], expireation)        return s.dumps({'confirm': self.id}).decode('utf-8')    @staticmethod    def confirm(token):        """验证Token        """        s = Serializer(app.config['SECRET_KEY'])        try:            data = s.loads(token.encode('utf-8'))        except SignatureExpired:            return False        except BadSignature:            return False        user = User.query.get(data.get('confirm'))        if user is None:            return False        return True

发送邮件

@app.route("/reset/password", methods=["POST"])def reset_password():    """发送邮件    """    email = request.get_json().get('email')    user = User.query.filter(User.email == email).first()    token = user.generate_confirmation_token()    msg = Message("重置密码", sender='noreply@zhuima.xxx',                  recipients=[user.email])    confirm_url = "http://localhost:8080/#/reset-password/{}".format(token)    msg.body = '''点击下面链接重置密码, {}    '''.format(confirm_url)    mail.send(msg)    return jsonify({"meta": "success"}), 200

注意事项

邮件投递找回密码url的问题

由于是前后端分离,邮件投递的时候的url拼接一定要特别注意,这里的所谓注意不单单局限于url本身,由于vue-router的路由守卫问题,我们会把非认证的用户访问统统指向到/login页面,所以需要路由守卫的白名单。这个困扰了我好久好久

邮件投递找回密码url中token过期时间判定

由于该url只是在前端展现,所以打开URL的时候需要把params拎出来请求后端进行token校验工作,避免用户拿着过期的token来做一些事情。

如何选择

看上面的演示和上面的代码,我们看到很多校验都是在前端做的,后端并没有做很严格的校验工作,flask可以搭配flask_marshmallow实现校验工作, 后面会继续完善~,欢迎大家留言交流

欢迎关注我的公众号“追马Linux”,原创技术文章第一时间推送。

引用链接

[1] 密码找回逻辑图片: https://dev.to/paurakhsharma/flask-rest-api-part-5-password-reset-2f2e

本文分享自微信公众号 - 追马Linux(zhuima_k8s),作者:追马

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-08

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot中实现邮件找回密码的功能

    今天给大家介绍一下很常用的一个功能,就是邮件找回密码功能。找回密码一般会有:1.邮件找回密码、2短信找回密码、3问题找会密码。 关于邮件找回密码的原理思想为: ...

    林老师带你学编程
  • SpringMVC通过邮件找回密码功能的实现

    1、最近开发一个系统,有个需求就是,忘记密码后通过邮箱找回。现在的系统在注册的时候都会强制输入邮箱,其一目的就是 通过邮件绑定找回,可以进行密码找回。通过jav...

    用户7999227
  • SpringMVC通过邮件找回密码功能的实现

    1、最近开发一个系统,有个需求就是,忘记密码后通过邮箱找回。现在的系统在注册的时候都会强制输入邮箱,其一目的就是 通过邮件绑定找回,可以进行密码找回。通过jav...

    大师级码师
  • SpringBoot实现通过邮箱找回密码功能

    之前在大学里面做项目的时候碰到修改密码那一块的,自己当时都是做的很简单的逻辑,也想过怎么通过邮箱或者手机号这种进一步验证身份来修改密码,但是自己当时太菜了,也没...

    萌萌哒的瓤瓤
  • WordPress配置SMTP服务发送邮件,轻松实现注册和找回密码功能

    和我们日常生活中遇到的很多网站相似,wordpress博客也有一个注册功能,填了用户名和邮箱后,会收到一封邮件,邮件里有一个链接,点击该链接可以获得密码和修改密...

    wordpress建站吧
  • 手把手教你三步完成测试监控系统搭建

    笔者所在的项目组有多个测试环境,偶尔会出现由于程序错误导致负载飙升或日志打满磁盘的问题。基于早发现、早治疗的原则,我们可以构建一个web应用,从而对服务器的负载...

    测试开发社区
  • django 开发忘记密码通过邮箱找回功能

    玩蛇的胖纸
  • Flask 入门系列教程(六)

    对于 Web 应用程序,往往需要有很多讯息及时的通知到用户,这种通知方式一般都是通过 Email 来实现的。比如用户的注册验证码、用户密码找回等功能,通过邮件来...

    周萝卜
  • 带你认识 flask 邮件发送

    就实际的邮件发送而言,Flask有一个名为Flask-Mail的流行插件,可以使任务变得非常简单。和往常一样,该插件是用pip安装的:

    公众号---人生代码
  • Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理

    这是一篇个人博客搭建的记录博客,也是一篇关于Flask和Vue的简单"工具书",最后的代码会包含Web开发中常用的功能。(不全,只是使用频率相对高的)

    HaythamXu
  • 抄作业了!6 大 Flask 开源实战项目推荐

    Flask 是一个微型的 Python 开发的 Web 框架,基于 Werkzeug WSGI 工具箱和 Jinja2 模板引擎。Flask 使用 BSD 授权...

    龙哥
  • 使用 Vue.js 和 Flask 实现全栈单页面应用

    在本教程中,我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。

    疯狂的技术宅
  • Vue + Flask 小知识(五)

    认证:判定用户的合法性,一般是判断是否已经登陆 鉴权:判断用户的权限,一般是判断用户是否可以继续继续某个操作

    周萝卜
  • 【Flask】两分钟教你使用PythonWeb学会用Flask发邮件

    为了保障用户邮箱的安全,QQ邮箱设置了POP3/SMTP/IMAP的开关。系统缺省设置是“关闭”,在用户需要这些功能时请“开启”。 首先,登录邮箱,进入设置-帐...

    天道Vax的时间宝藏
  • Flask-10 博客通过发送邮件重置密码

    修改Flask_Blog\flaskblog\models.py,修改User类,添加获得token令牌和验证token令牌的方法:

    亚乐记
  • (原创)python发送邮件

    七夜安全博客
  • 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来。

    Python编程与实战
  • 从零开始用Vue+Flask开发知乎小视频下载工具

    作为一个几乎从来没做过前端开发的程序员,我近期花了一个周从零开始学习Vue的知识,做了一个知乎小视频的下载Demo,并且成功部署到线上。

    有福
  • 实战:Flask + Vue 生成漂亮的词云

    这是一个前端用 Vue,后端用 Python 的 Web 框架 Flask 开发的词云生成应用,代码已上传到 flask-vue-word-cloud。写这个小...

    咸鱼学Python

扫码关注云+社区

领取腾讯云代金券