使用nodejs實現郵箱驗證碼功能
阿新 • • 發佈:2018-12-18
今天做了個小demo,是用nodejs實現註冊時(當然在別的地方也是可以用的)的郵箱驗證功能,大體就是往指定的郵箱傳送六位驗證碼。以下是詳細步驟。
1、使用模組:nodemailer
安裝:npm install nodemailer --save
2、首先是來寫一下前臺註冊介面,不說了,先上圖。(不想看這一段的話直接跳到最後看郵箱驗證碼的實現)
然後實現以下以下效果(看圖先),就是點擊發送驗證碼時出現一分鐘後再試的倒計時。
那現在先上程式碼先
(1)form表單
<form role="form" action="doRegister" method="post" class="login-form"> <div class="form-group"> <label class="sr-only" for="form-username">Username</label> <input type="text" name="username" placeholder="請輸入賬號..." class="form-username form-control" id="form-username"> </div> <div class="form-group"> <label class="sr-only" for="form-password">Password</label> <input type="password" name="password" placeholder="請輸入密碼..." class="form-password form-control" id="form-password"> </div> <div class="form-group"> <label class="sr-only" for="form-password">Email</label> <input type="text" name="email" placeholder="請輸入郵箱..." class="form-password form-control" id="email"><br> <input type="button" onclick="abc()" class="btn btn-danger" id="emialcore" value="傳送驗證碼"> <input type="text" name="code" placeholder="請輸入驗證碼..." id="code"> </div> <input type="submit" class="btn"> </form>
(2)倒計時函式
<script> function abc() { var time = 60;//定義60秒的倒計時 var email = $('#email').val();//獲取輸入框的郵箱 var user_name = $('#form-username').val();//獲取輸入的賬戶名 //這裡我用的是ajax將使用者名稱和郵箱發到後臺 $.get('/api/email', { email:email, user_name:user_name }, function (data) { console.log(data) } ) //設定一個定時,一秒執行一次 var mytime = setInterval(function () { subs(); },1000) function subs(){ time--; $('#emialcore').attr("value","請"+time+"秒後再試"); if(time===0){ clearInterval(mytime); $('#emialcore').attr("value","傳送驗證碼"); $('#emialcore').attr("disabled",false);//按鍵可用 } else{ $('#emialcore').attr("disabled",true);//按鍵不可用 } } } </script>
現在前臺的註冊頁面就可以用了。
(2)傳送郵箱
第一步:前往郵箱設定,以163郵箱為例,開啟POP3/SMTP/IMAP,若不會,自行百度
第二步:新建一個nodemailer.js檔案寫傳送郵件的配置資訊,上程式碼
//nodemailer.js const nodemailer = require('nodemailer'); //建立一個smtp伺服器 const config = { host: 'smtp.163.com', port: 465, auth: { user: '這裡寫你自己的163郵箱@163.com', //註冊的163郵箱賬號 pass: 'xxxxxxx' //郵箱的授權碼,不是註冊時的密碼,等你開啟的stmp服務自然就會知道了 } }; // 建立一個SMTP客戶端物件 const transporter = nodemailer.createTransport(config); //傳送郵件 module.exports = function (mail){ transporter.sendMail(mail, function(error, info){ if(error) { return console.log(error); } console.log('mail sent:', info.response); }); };
第三步:傳送驗證碼
router.get('/email',async (ctx)=>{
var email = ctx.query.email;//剛剛從前臺傳過來的郵箱
var user_name = ctx.query.user_name;//剛剛從前臺傳過來使用者名稱
var code = await tools.createSixNum();//這裡是我寫的生成的隨機六位數,等等下面給程式碼
var date = new Date();//獲取當前時間
var isLive = "no";
//去資料庫中找有沒有同名的使用者名稱,這裡就要自己寫了,不同的資料庫查詢方法不同
var result =await DB.find('user',{user_name:user_name});
//console.log(result);
if(result.length>0){
ctx.body ={success:false,message:"賬號已經存在"}
}else{
ctx.body ={success:true,message:"賬號可行"};//資料傳回前臺
var mail = {
// 發件人
from: '<你自己的163郵箱@163.com>',
// 主題
subject: '接受憑證',//郵箱主題
// 收件人
to:email,//前臺傳過來的郵箱
// 郵件內容,HTML格式
text: '用'+code+'作為你的驗證碼'//傳送驗證碼
};
var json = {user_name,email,code,date,isLive};
await DB.insert('user',json);//將獲取到的驗證碼存進資料庫,待會提交時要檢查是不是一致
await nodemail(mail);//傳送郵件
}
})
因為發的是六位數字的驗證碼,這裡我寫了一個隨機生成六位隨機數的函式:
createSixNum(){
var Num="";
for(var i=0;i<6;i++)
{
Num+=Math.floor(Math.random()*10);
}
return Num;
}
接下來就可以正常傳送了,見下圖
傳送完了驗證碼,輸入完驗證碼還要驗證一下是否真確
router.post('/doRegister',async (ctx)=>{
//console.log(ctx.request.body);
var username = ctx.request.body.username;//獲取使用者名稱
var password = ctx.request.body.password;//獲取密碼
var code = ctx.request.body.code;//獲取你輸入的驗證碼
//去資料庫把剛剛在存驗證碼的時候一起存的那條記錄找出來
var result =await DB.find('user',{"user_name":username});
var nowDate = (new Date()).getTime();//獲取當前時間
判斷驗證碼是否正確,時間是否超過10分鐘
if(result[0].code===code && (result[0].date.getTime()) - nowDate <600000){
//更新資料庫的使用者資訊,把使用者密碼深的也存進去
await DB.update('user',{user_name:username},{
"password":password,
"status":1,
"isLive":"yes",//註冊成功啦
"add_time":tools.getTime()
});
}else{
ctx.render('admin/error',{
//驗證碼過期或者是驗證碼錯誤,要寫點什麼的話自己再去寫寫吧。
})
}
});
期間你會遇到很多錯誤,不過都是有程式碼的,主義自己debug一下,看什麼錯誤,然後檢視163的返回錯誤程式碼檔案或者是自行百度。