nest.js + sms 实现短信验证码登录

本文涉及的产品
短信服务,100条 3个月
国际/港澳台短信套餐包,全球plus 100条 6个月
短信服务,200条 3个月
简介: 今天和大家分享一下使用 nodejs 实现短信验证码登录的方案, 通过对该方案的实现大家可以可以对 nodejs 及其相关生态有一个更深入的理解.好啦, 话不多说, 我们开始实现.

网络异常,图片无法展示
|


hi, 大家好, 我是徐小夕, 新的一年, 你又博学了吗?


今天和大家分享一下使用 nodejs 实现短信验证码登录的方案, 通过对该方案的实现大家可以可以对 nodejs 及其相关生态有一个更深入的理解.

好啦, 话不多说, 我们开始实现.


实现方案


为了更高效的开发 nodejs 应用, 这里我选择 nest.js 作为服务端框架, 同时使用腾讯云的短信服务:


网络异常,图片无法展示
|


具体实现流程如下:


网络异常,图片无法展示
|


详细流程如下:


  1. 用户访问网站登录页面, 输入手机号触发验证码
  2. node服务器收到请求后, 拼接所需参数(具体在下文会详细介绍), 请求第三方短信服务平台
  3. 第三方短信服务平台校验, 通过后下发对应短信
  4. 用户在网站输入收到的验证码, 请求登录接口完成登录


相信大家对第一步没有太大疑问, 接下来我详细介绍几个核心的实现过程.


1. 短信服务的配置流程


由于我使用的是腾讯云的短信服务, 所以需要按照约定来完成以下配置:


  • 创建短信签名


网络异常,图片无法展示
|


发送短信内容时必须带签名.


  • 创建短信模版


网络异常,图片无法展示
|


短信模版可以让我们创建自定义的短信内容, 还可以创建动态内容, 大家感兴趣可以研究一下.


  • 创建应用(一般使用默认即可)


网络异常,图片无法展示
|


2. nodejs服务器向短信服务平台发起短信调用


以上配置完成并审核通过之后, 我们就可以使用 nodejs 愉快的发送短信了. 这里我们需要安装腾讯云的sdk:


# nest项目中
npm install tencentcloud-sdk-nodejs --save


然后在 nest 服务端存储上一步获取的:


  • 用户手机号
  • SmsSdkAppId(应用id)
  • TemplateId(模版id)
  • SignName(签名内容)
  • TemplateParamSet(需要发送的验证码)


核心代码如下:


/**
   * 发送手机验证码
   * @param params 请求体
   */
   async registerCode(params: any): Promise<any> {
    const { phone } = params;
    if (!phone) {
      return {
        code: 400,
        msg: '手机号为空',
      };
    }
    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).



目录
相关文章
|
2月前
|
存储 NoSQL 数据库
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程,重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库,以及用户登录时的远程服务调用和密码匹配校验的实现细节。
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
|
8天前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
17 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
|
资源调度 JavaScript API
nest.js + sms 实现短信验证码登录
本文介绍了在Nest.js框架中集成短信验证码登录的实现方案,详细阐述了使用阿里云短信服务的配置流程、资质申请、短信模板设置,并提供了API调用示例和工程代码的运行步骤。
nest.js + sms 实现短信验证码登录
|
5天前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
2月前
|
JavaScript
Nest.js 实战 (七):如何生成 SVG 图形验证码
这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先,通过powershell代码安装依赖pnpmaddsvg-captcha。然后,在控制器中使用TypeScript代码引入相关依赖,创建一个图形验证码的接口,当请求该接口时,返回一张随机图片验证码。最后,进行了效果演示。
Nest.js 实战 (七):如何生成 SVG 图形验证码
|
2月前
|
JavaScript 前端开发
js随机验证码
js随机验证码
32 2
|
2月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
2月前
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
|
4月前
|
JavaScript
|
5月前
|
缓存 算法 NoSQL
短信验证码登录接口,如何防止恶意攻击
该文讨论了移动应用中常见的手机短信验证码登录(短验登录)的安全设计。后端通常需要提供获取短信验证码和手机短验登录两个API。为了增强机短验登录API的安全性,提出了几种无需依赖Redis等存储介质的方案:1)使用数字签名确保请求合法性;2)基于时间戳的验证,允许在一定时间范围内有效;3)应用TOTP算法生成动态码进行验证;4)利用JWTToken进行身份验证并设置有效期。文章强调了创新思考在解决安全问题中的重要性,并鼓励读者分享更多方案。
514 1