Next.js中通过容联云通讯实现手机验证码收发

本文链接：https://blog.csdn.net/Erin_jwx/article/details/125350874

本文详细介绍了如何通过容联云通讯平台发送短信验证码，包括短信模板的设置、前端请求接口的封装、后端调用云通信服务端接口的实现以及验证码的验证策略。示例代码展示了从用户点击获取验证码到短信实际发送的完整过程，涉及 axios 封装、接口调用以及验证码的生成和存储。

摘要由CSDN通过智能技术生成

短信组成

【腾讯云】您的验证码是:${1}

上述为短信验证的基本模板，由短信签名及短信模板组成，其中${}中的内容可动态替换。
短信签名：【腾讯云】
短信模板：您的验证码是: ${1}

容联云通讯

本文中使用的SMS平台为容联云通讯。它有一定的免费额度，在没有正式接入的情况下可以使用三个手机号码作为测试号码收发短信。
容联云官网：https://www.yuntongxun.com/

注册服务

注册账号，登录后进入控制台可看到账号信息
在这里插入图片描述
在号码管理中提前配置测试号码

请求接口

参考官方文档给云通信服务端发送数据即可
模板短信业务接口：官方文档

前端请求本地后端接口

封装axios

安装依赖yarn add axios
在项目根目录中新建service/fetch.ts

// service/fetch.ts
import axios from 'axios';
const requestInstance = axios.create({
  baseURL: '/',
});
requestInstance.interceptors.request.use(
  (config) => config,
  (error) => Promise.reject(error)
);
requestInstance.interceptors.response.use(
  (response) => {
    console.log('response', response);

    if (response?.status === 200) {
      return response?.data;
    } else {
      return {
        code: -1,
        msg: '未知错误',
        data: null,
      };
    }
  },
  (error) => Promise.reject(error)
);
export default requestInstance;

处理获取验证码的点击回调

  const handleGetVerifyCode = () => {
    // 读取state中的数据，手机号不能为空
    if (!form?.phone) {
      // 使用antd提示 
      message.warning('请输入手机号');
      return;
    }
    // 向后端发送请求
    request
      .post('/api/user/sendVerifyCode', {
        to: form?.phone,
        templateId: 1,
      })
      .then((res: any) => {
        console.log('res', res);
        if (res?.code === 0) {
          // 成功的回调，开启倒计时
          setIsShowVerifyCode(true);
        } else {
          message.error(res?.msg || '未知错误');
        }
      });
  };

后端请求云通信服务端接口

// pages/api/user/sendVerifyCode.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { format } from 'date-fns';
// ts中使用md5需要安装处理类型的依赖  yarn add @types/md5 -D
import md5 from 'md5';
import { encode } from 'js-base64';
import request from 'service/fetch';
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // 接受前端post请求体中的两个参数，如果前端没传数据，默认值分别为''和'1'
  const { to = '', templateId = '1' } = req.body;
  // 下面三个参数换成自己的账户信息
  const AccountId = '8a216da880d67afb01817603ec001ed6';
  const AuthToken = '5e94e**********************5a12c';
  const AppId = '8a216da880d67afb01817603ed1d1edd';
  // format用于对时间戳格式化，需要提前安装依赖：yarn add date-fns
  const NowDate = format(new Date(), 'yyyyMMddHHmmss');
  // 该参数需要使用MD5进行加密，需要提前安装依赖：yarn add md5
  const SigParameter = md5(`${AccountId}${AuthToken}${NowDate}`);
  // encode为js-base64中的方法，用于加密，需要提前安装依赖：yarn add js-base64
  const Authorization = encode(`${AccountId}:${NowDate}`);
  // 动态模板参数
  // 四位验证码
  const verifyCode = Math.floor(Math.random() * 8999) + 1000;
  // 过期时间(分钟)
  const expireMinute = '5';
  // 组合成完整的地址
  const url = `https://app.cloopen.com:8883/2013-12-26/Accounts/${AccountId}/SMS/TemplateSMS?sig=${SigParameter}`;
  const response = await request.post(
    url,
    {
      to,
      templateId,
      appId: AppId,
      datas: [verifyCode, expireMinute],
    },
    {
      headers: {
        Authorization,
      },
    }
  );
  console.log('response', response);
  res.status(200).json({ code: 0, data: 'ok' });
}