短信验证码登录
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.点击右上角控制台
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("验证码输入错误") }) } }
这篇关于短信验证码登录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)