短信验证码登录

2021/4/19 18:29:48

本文主要是介绍短信验证码登录,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、新建一个ems.ejs文件

<div>
    <label for="phone">手机号:</label>
    <input name="phone" id="phone" type="text">
    <button onclick="sendCode()">发送验证码</button>
    <span id="sendMsg"></span>
</div>
<div>
    <label for="code">输入验证码</label>
    <input name="code" id="code" type="text">
    <button onclick="verifyCode()">验证</button>
    <span id="verifyMsg"></span>
</div>

<script src="../JavaScript/jquery-1.11.3.js"></script>
<script>
	//发送验证码
    function sendCode() {
        let phone=$("#phone").val();
        $.ajax({
            type:"post",
            url:"/sms.do",
            data:{phone},
            success(data){
                $("#sendMsg").text(data)
            }
        })
    }
    //验证验证码
    function verifyCode() {
        let code=$("#code").val();
        let phone=$("#phone").val();
        $.ajax({
            type:"post",
            url:"/verifyCode.do",
            data:{code,phone},
            success(data){
                $("#verifyMsg").text(data)
            }
        })
    }

}

2、路由拦截

const smsCtrl=require("../controller/smsCtrl")
//短信验证
router.get("/sms",pageCtrl.sms)
router.post("/sms.do",smsCtrl.smsPhone)
router.post("/verifyCode.do",smsCtrl.verifyCode)

3.进入leancloud官网https://leancloud.cn/
a.点击右上角控制台
b.注册登录在这里插入图片描述

c.创建应用
在这里插入图片描述

d.进入右上角设置界面
在这里插入图片描述

e.基本信息这里选择开发版
在这里插入图片描述

f.复制APP ID和APP Key在这里插入图片描述

g.安全中心,打开所有开关在这里插入图片描述

h.点击消息-设置在这里插入图片描述

i.创意一个新的短信签名
在这里插入图片描述

j.等待审核通过
在这里插入图片描述

4.下载:npm install leancloud-storage -s
5.在controller配置

const sms=require("leancloud-storage")
//输入上面复制的id和**
const app_id="HLMe7naREa25HS3AIhdIAuS5-gzGzoHsz"
const app_key="lk3uLAlkjTRv2cFPGJJm8SjJ"
sms.init({
    appId:app_id,
    appKey:app_key
})

6.公开对象

module.exports={
    smsPhone(req,resp){
        let phone=req.body.phone;
        //给第三方发送
         sms.Cloud.requestSmsCode({
             mobilePhoneNumber: phone,  // 目标手机号
             name: '短信验证',//应用名称
             code: '验证码',
             ttl: 1,//时效
             sign:"欢迎使用"
             // 短信格式
             // 【花加家公司】您正在使用 毕业设计 服务进行短信认证,您的 验证码 是: 874853,请在 1 分钟内完成验证。
    }).then(function(){
             //短信发送成功
             resp.send("短信发送成功")
         }).catch(function () {
             //短信发送失败
             resp.send("短信发送失败")
         })
    },
    verifyCode(req,resp){
        let {code,phone}=req.body.code
        sms.Cloud.verifySmsCode(code,phone).then(function () {
            //验证成功
            resp.send("短信验证成功")
        }).catch(function () {
            //验证失败
            resp.send("验证码输入错误")
        })
    }
}


这篇关于短信验证码登录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程