nest.js + sms 实现短信验证码登录
theme: vue-pro
hi, 大家好, 我是徐小夕, 新的一年, 你又博学了吗?
今天和大家分享一下使用 nodejs
实现短信验证码登录的方案, 通过对该方案的实现大家可以可以对 nodejs
及其相关生态有一个更深入的理解.
好啦, 话不多说, 我们开始实现.
实现方案
为了更高效的开发 nodejs
应用, 这里我选择 nest.js
作为服务端框架, 同时使用腾讯云的短信服务:
具体实现流程如下:
详细流程如下:
- 用户访问网站登录页面, 输入手机号触发验证码
- node服务器收到请求后, 拼接所需参数(具体在下文会详细介绍), 请求第三方短信服务平台
- 第三方短信服务平台校验, 通过后下发对应短信
- 用户在网站输入收到的验证码, 请求登录接口完成登录
相信大家对第一步没有太大疑问, 接下来我详细介绍几个核心的实现过程.
1. 短信服务的配置流程
由于我使用的是腾讯云的短信服务, 所以需要按照约定来完成以下配置:
- 创建短信签名
发送短信内容时必须带签名.
- 创建短信模版
短信模版可以让我们创建自定义的短信内容, 还可以创建动态内容, 大家感兴趣可以研究一下.
- 创建应用(一般使用默认即可)
2. nodejs服务器向短信服务平台发起短信调用
以上配置完成并审核通过之后, 我们就可以使用 nodejs
愉快的发送短信了. 这里我们需要安装腾讯云的sdk:
```bash
nest项目中
npm install tencentcloud-sdk-nodejs --save ```
然后在 nest
服务端存储上一步获取的:
- 用户手机号
- SmsSdkAppId(应用id)
- TemplateId(模版id)
- SignName(签名内容)
- TemplateParamSet(需要发送的验证码)
核心代码如下:
```js
/*
* 发送手机验证码
* @param params 请求体
/
async registerCode(params: any): Promise
const code = `${rand(1000,9999)}`;
phoneCodeList[phone] = code;
const smsParams = {
"PhoneNumberSet": [
`+86${phone}`
],
"SmsSdkAppId": "xxxxx",
"TemplateId": "12*****",
"SignName": "dooring服务",
"TemplateParamSet": [code]
};
try {
const result = await client.SendSms(smsParams);
if(result?.SendStatusSet.Code === 'Ok') {
return {
code: 200,
msg: 'Success',
};
}else {
return {
code: 500,
msg: `Service error: ${result?.SendStatusSet.Message}`,
};
}
}catch(err) {
return {
code: 500,
msg: `Service error: ${err}`
};
}
} ```
以上是用 nest
写的一个简单的 service
逻辑, 主要功能是发送用户手机号和签名参数到第三方短信平台, 下发短信. TemplateParamSet
字段为一个数组, 数组长度取决于我们的短信模版中动态变量的配置, 如下:
如果我们配置的模版内容中有2个变量, 那么TemplateParamSet
字段 的数组为2项.
3. nodejs实现短信验证码验证
最后一步比较简单. 我们只需要把用户填写的验证码和我们服务器生成的验证码进行比对即可, 我们可以使用 redis
来缓存验证码.
最终的实现效果如下:
当然大家可以用自己熟悉的任何 nodejs
框架来实现以上功能(如koa, egg).
更多推荐
- 推荐! 使用react-cropper-pro实现图片裁切压缩上传
- Dooring无代码搭建平台技术演进之路
- nest.js sms 实现短信验证码登录
- 2022 年10个最佳 Node.js CMS 平台推荐
- 面试官: 如何让localStorage支持过期时间设置?
- 前端进阶: 如何用javascript存储函数?
- 前端推荐!从零开发一套基于React的加载动画库
- lerna dumi eslint多包管理实践
- 5分钟教你快速掌握Github Action持续集成
- 从零开发一款轻量级滑动验证码插件
- 推荐!一款支持pc端&移动端的滑动验证组件
- javascript如何实现类似西瓜视频的视频队列自动播放?
- 学会这几招,轻松让你的github脱颖而出
- 前端复盘: iframe跨页通信和前端实现文件下载
- 从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
- 前端: 轻松教你使用纯css实现水波动画
- 看了10款文档编辑器之后, 我决定...
- 2021如何让你的Table组件无限可能
- 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
- 基于自然流布局的可视化拖拽搭建平台设计方案