短信验证码登录

青旅半醒 2023-01-14 01:41 180阅读 0赞

1、新建一个[ems.ejs文件][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][ems.ejs]官网[https://leancloud.cn/][ems.ejs]  
a.点击右上角控制台  
![b.注册登录在这里插入图片描述][b.]

c.创建应用  
![在这里插入图片描述][20210419170722278.png]

d.进入右上角设置界面  
![在这里插入图片描述][20210419170728744.png]

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

f.复制APP ID和APP Key![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

g.安全中心，打开所有开关![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]

h.点击消息-设置![在这里插入图片描述][20210419170823658.png]

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

j.等待审核通过  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 4]

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("验证码输入错误")
            })
        }
    }

[ems.ejs]: http://github.crmeb.net/u/defu
[b.]: /images/20221022/b1e3d9b3e1644de3a16e39d9f6992247.png
[20210419170722278.png]: /images/20221022/b005f521b0f84d9da7eaa18066bfa183.png
[20210419170728744.png]: /images/20221022/1d6fa483d0a54861be69399d12f28415.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/028a56d999414406b825ceb3bbd595cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221022/cf125d6a539d4eb6b2c813fca25ca45f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]: /images/20221022/80f3109e3670415cb01b0d07f6cbf852.png
[20210419170823658.png]: /images/20221022/8ac1138b034a4261808971d15b5b346d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]: /images/20221022/e69bf3c0169e46a2a27479ddf3242e54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 4]: /images/20221022/aed02a43e4624844869c8eae5e8f67f0.png