密碼找回是幾乎所有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
