nodejs实现发送验证码接口（包含申请短信服务、前端后端，非常详细）

void0086

已于 2023-08-05 14:41:16 修改

阅读量1.3k

点赞数 2

分类专栏： nodejs 文章标签： node.js react 前端后端数据库

于 2023-08-05 14:39:46 首次发布

本文链接：https://blog.csdn.net/weixin_47365243/article/details/132119539

版权

nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

nodejs实现发送验证码接口（包含前端后端）

一、短信服务申请

这里以腾讯云为例
在这里插入图片描述

1.免费试用(个人100条)或购买服务

在这里插入图片描述

购买后进入控制台

2.创建签名

在这里插入图片描述

这里的签名类型有4种，分别是：网站、APP、公众号、小程序

公众号需要去微信公众平台 (qq.com)注册(这里不做演示，请自行注册)

网站、APP、小程序需要已上线的项目才行

3.创建正文模板

在这里插入图片描述

这里{数字}表示参数，请注意参数只能是数字

4.使用官方api工具测试

API Explorer - 云 API - 控制台 (tencent.com)

（1）填写参数

在这里插入图片描述

参数说明（这里只介绍必填参数）：

PhoneNumberSet：你的手机号(这里有3中写法：‘手机号’，‘86手机号’，‘+86手机号’)
SmsSdkAppId：你的sdkAppId，请在应用管理->应用列表中查看
SignName：你的签名内容（注意国内短信该项是必填项），请在签名审核通过后在国内短信–>签名管理中查看
TemplateId：你的模板id，请在模板审核通过后在国内短信–>正文模板管理中查看
TemplateParamSet：模板参数，请按模板中的{}设置对应的参数，注意只能是数字

（2）发送请求

在这里插入图片描述

二、nodejs后端实现

完整代码已上传至guthub：https://github.com/void00013/7.phone_captcha_login_nodejs/tree/main/api_server

在代码中需要修改secretId、secretKey、SmsSdkAppId、SignName、TemplateId、TemplateParamSet、PhoneNumberSet

1.安装导入依赖

npm i tencentcloud-sdk-nodejs

2.编写接口

const db = require('../db/index')
const jwt = require('jsonwebtoken')
const config = require('../config')
const tencentcloud = require('tencentcloud-sdk-nodejs')

// 导入对应产品模块的client models。
const smsClient = tencentcloud.sms.v20210111.Client
/* 实例化要请求产品(以sms为例)的client对象 */
const client = new smsClient({
  credential: {
    /* 必填：腾讯云账户密钥对secretId，secretKey。
     * 这里采用的是从环境变量读取的方式，需要在环境变量中先设置这两个值。
     * 你也可以直接在代码中写死密钥对，但是小心不要将代码复制、上传或者分享给他人，
     * 以免泄露密钥对危及你的财产安全。
     * SecretId、SecretKey 查询: https://console.cloud.tencent.com/cam/capi */
    secretId: '你的secretId，请自行从控制台中查看',
    secretKey: '你的secretKey，请自行从控制台中查看'
  },
  /* 必填：地域信息，可以直接填写字符串ap-guangzhou，支持的地域列表参考 https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8 */
  region: 'ap-beijing',
  /* 非必填:
   * 客户端配置对象，可以指定超时时间等配置 */
  profile: {
    /* SDK默认用TC3-HMAC-SHA256进行签名，非必要请不要修改这个字段 */
    signMethod: 'HmacSHA256',
    httpProfile: {
      /* SDK默认使用POST方法。
       * 如果你一定要使用GET方法，可以在这里设置。GET方法无法处理一些较大的请求 */
      reqMethod: 'POST',
      /* SDK有默认的超时时间，非必要请不要进行调整
       * 如有需要请在代码中查阅以获取最新的默认值 */
      reqTimeout: 30,
      /**
       * 指定接入地域域名，默认就近地域接入域名为 sms.tencentcloudapi.com ，也支持指定地域域名访问，例如广州地域的域名为 sms.ap-guangzhou.tencentcloudapi.com
       */
      endpoint: 'sms.tencentcloudapi.com'
    }
  }
})
const params = {
  /* 短信应用ID: 短信SmsSdkAppId在 [短信控制台] 添加应用后生成的实际SmsSdkAppId，示例如1400006666 */
  // 应用 ID 可前往 [短信控制台](https://console.cloud.tencent.com/smsv2/app-manage) 查看
  SmsSdkAppId: '你的SmsSdkAppId，请自行从控制台中查看',
  /* 短信签名内容: 使用 UTF-8 编码，必须填写已审核通过的签名 */
  // 签名信息可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-sign) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-sign) 的签名管理查看
  SignName: '你的SignName，请自行从控制台中查看',
  /* 模板 ID: 必须填写已审核通过的模板 ID */
  // 模板 ID 可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-template) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-template) 的正文模板管理查看
  TemplateId: '你的TemplateId，请自行从控制台中查看',
  /* 模板参数: 模板参数的个数需要与 TemplateId 对应模板的变量个数保持一致，若无模板参数，则设置为空 */
  TemplateParamSet: ['你的模板中对应需要添加的参数，也就是验证码'],
  /* 下发手机号码，采用 e.164 标准，+[国家或地区码][手机号]
   * 示例如：+8613711112222， 其中前面有一个+号 ，86为国家码，13711112222为手机号，最多不要超过200个手机号*/
  PhoneNumberSet: ['要发送的手机号，国内手机号以+86开头，例如+8613711112222'],
  /* 用户的 session 内容（无需要可忽略）: 可以携带用户侧 ID 等上下文信息，server 会原样返回 */
  SessionContext: '',
  /* 短信码号扩展号（无需要可忽略）: 默认未开通，如需开通请联系 [腾讯云短信小助手] */
  ExtendCode: '',
  /* 国内短信无需填写该项；国际/港澳台短信已申请独立 SenderId 需要填写该字段，默认使用公共 SenderId，无需填写该字段。注：月度使用量达到指定量级可申请独立 SenderId 使用，详情请联系 [腾讯云短信小助手](https://cloud.tencent.com/document/product/382/3773#.E6.8A.80.E6.9C.AF.E4.BA.A4.E6.B5.81)。 */
  SenderId: ''
}

// 存储临时验证码和手机号
let captchaTemp = ''
let phoneTemp = ''

// 获取验证码接口
exports.getCaptcha = (req, res) => {
  phoneTemp = req.body.phone
  captchaTemp = Math.floor(Math.random() * 900000) + 100000 + ''
  // 60秒后清空验证码，之前的验证码过期
  setTimeout(() => {
    captchaTemp = ''
  }, 60000)
  params.TemplateParamSet = [captchaTemp]
  params.PhoneNumberSet = [`+86${phoneTemp}`]
  // 通过client对象调用想要访问的接口，需要传入请求对象以及响应回调函数
  client.SendSms(params, function (err, response) {
    // 请求异常返回，打印异常信息
    if (err) {
      res.cc(err)
      return
    }
    // 请求正常返回，打印response对象
    // console.log(response)
    res.send({
      status: 0,
      message: '发送成功！'
    })
  })
}

// 手机号登录接口
exports.loginPhone = (req, res) => {
  // 接收表单数据
  const { phone, captcha } = req.body
  console.log(phone, captcha)
  if (captchaTemp !== captcha) {
    return res.cc('验证码错误或已失效，请重新发送！')
  }
  if (phoneTemp !== phone) {
    return res.cc('手机号已更改，请重新发送验证码！')
  }

  // 查询数据库
  const sql = 'select * from ev_users where phone=?'
  db.query(sql, phone, (err, results) => {
    if (err) {
      return res.cc(err)
    }
    if (results.length !== 1) {
      return res.cc('您的手机号没有注册！')
    }
    const user = { ...results[0], password: '', user_pic: '' }
    const token = jwt.sign(user, config.secret, { expiresIn: config.expiresIn })
    res.send({
      status: 0,
      message: '登陆成功！',
      token: 'Bearer ' + token
    })
  })
}

三、前端实现

完整代码已上传至GitHub：https://github.com/void00013/7.phone_captcha_login_nodejs/tree/main/app

import { useState } from 'react'
import { Button, Input, Col, Row, message } from 'antd'
import axios from 'axios'
import qs from 'qs'
import './App.css'

let second = 60

function App() {
  const [messageApi, contextHolder] = message.useMessage()
  const [phone, setPhone] = useState('')
  // 按钮禁用状态
  const [captchaIsDis, setCaptchaIsDis] = useState(false)
  // 按钮文本
  const [captchaText, setCaptchaText] = useState('获取验证码')
  // 验证码
  const [captcha, setCaptcha] = useState('')

  // 提示函数
  const showTip = (type, content) => {
    messageApi.open({
      type,
      content
    })
  }

  // 改变验证码按钮文本
  const changeCaptchaText = () => {
    const secondCount = setInterval(() => {
      if (second === 0) {
        clearInterval(secondCount)
        second = 60
        setCaptchaIsDis(false)
        setCaptchaText('获取验证码')
      } else {
        setCaptchaIsDis(true)
        setCaptchaText(`${second}秒后可再次发送`)
        second--
      }
    }, 1000)
  }

  // 获取验证码
  const handleGetCaptcha = async () => {
    try {
      const { data: res } = await axios.post('http://127.0.0.1:100/api/get-captcha', qs.stringify({ phone }))
      if (res.status !== 0) {
        return showTip('error', res.message)
      }
      showTip('success', res.message)
      changeCaptchaText()
    } catch (error) {
      console.log(error)
    }
  }

  // 登录
  const handlePhoneLogin = async () => {
    try {
      const { data: res } = await axios.post('http://127.0.0.1:100/api/login-phone', qs.stringify({ phone, captcha }))
      if (res.status !== 0) {
        return showTip('error', res.message)
      }
      showTip('success', res.message)
      localStorage.setItem('token', res.token)
      // todo: 跳转首页
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <>
      {contextHolder}
      <div className="App">
        <Row>
          <Col span={3}>
            <Input
              placeholder="请输入手机号"
              value={phone}
              onChange={e => {
                console.log(e.target.value)
                setPhone(e.target.value)
              }}
            />
          </Col>
          <Col span={3}>
            <Button disabled={captchaIsDis} onClick={handleGetCaptcha}>
              {captchaText}
            </Button>
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            <Input placeholder="请输入验证码" value={captcha} onChange={e => setCaptcha(e.target.value)} />
          </Col>
        </Row>
        <Row>
          <Col span={3}>
            <Button type="primary" onClick={handlePhoneLogin}>
              登录
            </Button>
          </Col>
        </Row>
      </div>
    </>
  )
}

export default App