node短信验证码发送学习笔记

本文详细介绍了一个短信验证码系统的前端与后端实现过程,包括手机号验证、发送频率限制、验证码输入验证等关键步骤,以及如何利用聚合数据提供的短信发送服务。

1、 由于短信发送平台很多可以使用任意平台的短信发送
2、 目前学习笔记中使用的是聚合数据提供的短信发送
注意:使用短信验证码发送要配置模板变量具体配置看官方文档

前端代码注意事项:
1、 手机号验证、验证用户登陆时输入的手机号码是否存在数据库中
$("#tel").keyup(function (e) { 
              //判断如果输入的手机号长度为11时执行ajax判断手机号是否存在
              var val = $(this).val();
              if(val.length == 11){
                $.ajax({
                  type: "get",
                  url: "/gettel",
                  data: {tel:val},
                  dataType: "json",
                  success: function (response) {
                      if(response.msg == "err"){
                          alert("改手机号还未注册请注册后登陆");
                      }else{
                          $("#btn").removeAttr("disabled");
                      }
                  }
                });
              }
          });
2、 发送频率限制、限制为1分钟只能发送一次、短信也要钱节约一点
$("#btn").click(function () {
      //禁止点击
      $(this).attr("disabled", "disabled");
      var i = 60;
      $(this).text(i + "s后发送");
      var setint = setInterval(() => {
        i--;
        $(this).text(i + "s后发送");
        if (i <= 0) {
          clearInterval(setint);
          //开启点击
          $(this).removeAttr("disabled");
          $(this).text("发送验证码");
        }
      }, 1000);
      //执行ajax发送手机验证码
      $.ajax({
        type: "get",
        url: "/sendms",
        data: { tel: $("#tel").val() },
        dataType: "json",
        success: function (response) {
          if (response.msg == "success") {
            alert("验证码已发送");
          }
        }
      });
    })

验证验证码输入

//输入验证码判断是否是否正确
    $("#code").keyup(function (e) {
      if ($(this).val().length >= 6) {
        $.ajax({
          type: "get",
          url: "/code",
          data: { code: $(this).val() },
          dataType: "json",
          success: function (response) {
            if (response.msg == "success") {
              alert("验证码输入正确可以登录了");
            } else {
              alert("验证码输入错误看清楚再输入");
            }
          }
        });
      }
    });

后端代码:

编写查询手机号是否存在的路由

router.get('/gettel',function(req,res,next){
    var connection = mysql.createConnection({
        host:"localhost",
        port:"3307",
        user: "root",
        password: "root",
        database: "msend"
    })
    connection.connect();
    connection.query("select * from user where tel="+req.query.tel,function(err,result){
        if(result.length>0){
            res.json({msg:"success"})
        }else{
            res.json({msg:"err"})
        }
    })
    connection.end();

})

编写发送验证码的路由
实现发送验证码之前需要下载发送短信模块
Npm install request模块
在引入

var request = require("request");
var querystring = require("querystring");

配置发送短信信息

var sendData = querystring.stringify({
        "mobile":req.query.tel,//要发送的手机号
        "tpl_id":"198166",//申请模板id
        "tpl_value":"#code#="+code,//模板变量 #code#验证码 code自己生成的验证码
        "key":"自己的"//短信接口的key
    })
    //设置发送地址:
    var sendUrl = "http://v.juhe.cn/sms/send?"+sendData

发送短信使用下载的模块request
//使用下载的request模块发送验证码

 request(sendUrl,function(err,result,body){
        if(!err && result.statusCode == 200){
            //把生成的验证码保存进session中
            req.session.code = code;
            console.log(code);
            res.json({msg:"success"});
        }else{
            res.json({"msg":err})
        }
    })

发送短信全部代码:

//发送短信验证码
router.get("/sendms",function(req,res,next){
    //生成要发送的验证码
    var code = Math.round(Math.random()*9).toString()+Math.round(Math.random()*9).toString()+Math.round(Math.random()*9).toString()+Math.round(Math.random()*9).toString()+Math.round(Math.random()*9).toString()+Math.round(Math.random()*9).toString();
    var sendData = querystring.stringify({
        "mobile":req.query.tel,//要发送的手机号
        "tpl_id":"198166",//申请模板id
        "tpl_value":"#code#="+code,//模板变量 #code#验证码 code自己生成的验证码
        "key":"自己的"//短信接口的key
    })
    //设置发送地址:
    var sendUrl = "http://v.juhe.cn/sms/send?"+sendData
    //使用下载的request模块发送验证码
    request(sendUrl,function(err,result,body){
        if(!err && result.statusCode == 200){
            //把生成的验证码保存进session中
            req.session.code = code;
            console.log(code);
            res.json({msg:"success"});
        }else{
            res.json({"msg":err})
        }
    })
    
})

编写验证验证码的路由
//判断验证码是否正确

router.get("/code",function(req,res,next){
    var code = req.session.code;
    if(code == req.query.code){
        res.json({"msg":"success"});
    }else{
        res.json({"msg":"error"})
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值