Web实战之密码找回

密码找回是几乎所有Web应用都需要的，一般均通过邮件的方式，这里我先实现一种最简单的密码找回——将密码重置为随机字符串后发送邮件通知，发送邮件要用到nodemailer，版本是0.7.0

页面的代码，比较简单，但还是放上来吧

<!DOCTYPE html>
<html lang="en" ng-app="myApp.Controllers">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>
    </title>
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="angular/angular.js"></script>
    <script src="js/service.js"></script>
    <script src="js/controller.js"></script>
</head>

<body ng-controller="FPCtrl">
<style>

    .navbar-USF{
        left:0;
        top:0;
        position:fixed;
        height:100%;
        width:45px;
        background-color:#3C3C3C;
    }
    .navbar-USF a{
        display:block;
        padding:10px;
        line-height: 25px;
        height:45px;
        font-size:16px;
        text-align: center;
    }
    .navbar-USF a:hover{
        background:#E0E0E0;
    }
    .navbar-USF a span{
        height:25px;
        width: 25px;
    }

    .page{
        padding:7% 35%;
        text-align:center;
    }


    .page .input-group > * {
        height:45px;
    }
    .alert{
        text-align:center;
        margin:0 30%;
    }
</style>



<div class="navbar-USF">
    <div class="dropdown">
        <a href="/">
            <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="/">
            <span class="glyphicon glyphicon-th"></span>
        </a>
    </div>
</div>




<div class="container" >
    <div class="page">
        <form>
            <h3>
                忘记密码了？快邮件找回吧
            </h3>
            <br>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                    </div>
                    <input class="form-control" type="text" placeholder="用户名" ng-model="form.username">
                </div>
            </div>
            <br>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </div>
                    <input class="form-control" type="email" placeholder="电子邮件" ng-model="form.email">
                </div>
            </div>
            <br>
            <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="findPassword()">
                发送密码重置邮件
            </button>
        </form>
    </div>
</div>





<div class="alert alert-success" role="alert" ng-show="display">
    {{msg}}
</div>


</body>

</html>

Angular控制器部分代码

Controllers.controller('FPCtrl',function($scope,$http,checkUser){
    $scope.form={};
    $scope.display=false;
    $scope.msg='';
    $scope.findPassword=function(){
        console.log($scope.form);
        var err=null;
        err=checkUser($scope.form,'forgetPassword');
        if(err){
            $scope.msg=err;
            $scope.display=true;
        }
        else{
            $scope.msg="邮件正在发送中，请耐心等待";
            $scope.display=true;
            $http.post('/forgetPassword',$scope.form).success(function(data){
                console.log(data.err);
                if(data.err){
                    $scope.msg=data.err.message;
                    $scope.display=true;
                }
                else{
                    $scope.msg="密码重置邮件已发送，注意查收";
                    $scope.display=true;
                }
            }).error(function(data){
                $scope.msg='未知错误，请重试';
                $scope.display=true;
            });
        }
    }
});

后端代码

var smtpTransport=nodemailer.createTransport('SMTP',{
    service:'Gmail',
    auth:{
            user:yourname,
            pass:your password
    }
});
function forgetPassword(req,res){
    var tmp=req.body;
    var udoc;
    var newPassword=tool.randomString(8);
    Then(function(cont){
        User.findOne({username:tmp.username},cont);
    }).then(function(cont,doc){
        if(!doc) return cont(new Err(msg.USER.userNone));
        if(doc.email!==tmp.email) return cont(new Err('填写的邮件与预留邮件地址不一致'));
        udoc=doc;
        console.log(newPassword);
        var mailoptions={
            from:'USF-noReply',
            to:doc.email,
            subject:'密码重置',
            html:'

<h3>新密码是'+newPassword+'</h3>

'
        };
        smtpTransport.sendMail(mailoptions,cont);
    }).then(function(cont,info) {
        udoc.password = tool.SHA256(newPassword).toString();
        udoc.password = tool.HmacSHA256(udoc.password, 'ustc').toString();
        udoc.password = tool.MD5(udoc.password);
        udoc.save(cont);
    }).then(function(cont,doc){
        res.json({
            success:true,
            err:null
        });
    }).fail(function(cont,err){
        if(!err.message) err.message='后台错误，稍后再试';
        res.json({
            success:false,
            err:err
        });
    });
}

写完自己感觉都很逗比的说，其实正统的密码找回方式应该是生成一个由用户名+邮件地址+过期时间加密后的token，并把它存入缓存中，发邮件将相应的token转成url给用户，用户点击之后跳到密码重置的页面，不过由于懒得加redis缓存，就先用这种很坑爹的方式将就以下，等加上redis缓存之后再全部更改吧。

-以下是效果截图
Screenshot from 2014-11-24 17:59:54.png

Web实战之密码找回

suemi

引用和评论

Java知识点汇总

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号