前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >短信验证码登录

短信验证码登录

原创
作者头像
PHP开发工程师
修改2021-04-19 18:01:06
13.2K0
修改2021-04-19 18:01:06
举报
文章被收录于专栏:thinkphp+vue

1、新建一个ems.ejs文件

代码语言:javascript
复制
<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、路由拦截

代码语言:javascript
复制
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.点击右上角控制台

c.创建应用

d.进入右上角设置界面

e.基本信息这里选择开发版

f.复制APP ID和APP Key

g.安全中心,打开所有开关

h.点击消息-设置

i.创意一个新的短信签名

j.等待审核通过

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

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

6.公开对象

代码语言:javascript
复制
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("验证码输入错误")
        })
    }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
短信
腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档