1. 程式人生 > >使用nodejs實現郵箱驗證碼功能

使用nodejs實現郵箱驗證碼功能

       今天做了個小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的返回錯誤程式碼檔案或者是自行百度。