这段时间在自己准备做一个博客系统，在写登录页面的时候突然想到除了正常账号密码登录和其他第三方登录之后，在加一个手机号登录岂不是更好。说干就干，于是就是阿里云上找了一下关于短信的服务，看了一下还是比较符合我们的需求，于是就决定使用阿里云，
开始
首先项目开始我们需要配置我们的短信服务，进入阿里云搜索我们的短信服务 阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台
然后第一步就需要找到我们的国内信息
签名添加
第一次使用的小伙伴需要新添加我们的签名，这里添加比较严格，小伙伴如果添加失败可以多试几次，
模板添加
签名添加好了之后然后需要添加我们的模板管理
测试短信
这里我们的签名和模板都添加成功之后我们就可以测试一下短信是否可以正常发送了，
这里填写信息然后点击测试
可以拿到
然后就可以接收到短信
项目中使用
首先我们新建一个node项目
首先使用npm init初始化项目 然后依次下载 koa2 nodemon koa2-cors koa-bodyparser koa-router
然后运行项目
然后我们需要下载
yarn add @alicloud/pop-core
下载之后直接先复制到我们的项目中post请求里面
然后我们这里来一点点完善代码
Core
首先看文档可以看出我们的new Core
accessKeyId | accessKeySecret
首先就是我们的accessKeyId
我们的accessKeyId和accessKeySecret一样都需要我们自己在阿里云进行创建
然后这里的AccessKey ID和AccessKey Secret就分别是我们的accessKeyId和accessKeySecret了
后面几个参数就可以直接使用就可以了
accessKeyId: '<your-access-key-id>', accessKeySecret: '<your-access-key-secret>', // securityToken: '<your-sts-token>', // use STS Token endpoint: 'https://dysmsapi.aliyuncs.com', apiVersion: '2017-05-25'
params
到我们的params，就是我们在页面上使用的一些信息，比如电话号码，短信内容之类的，这里我们电话和短信内容肯定不能写死的，这里需要做一下特殊的处理
PhoneNumbers
首先是我们的电话号码，我们需要前台传递给我们，我们可以通过 ctx.request.body.phone
来获取电话号码，
SignName
SignName就是我们前面的标题，告诉你是谁谁谁给你发的这个短信。
TemplateCode
TemplateCode就是我们添加的模板，需要我们自己提前增加
TemplateParam
最后一个TemplateParam就是我们的验证码信息了，这里肯定不能写死，我们这里写一个函数来随机获取然后将数据赋值
// 随机验证码 function ran(num) { let code = ""; for (let i = 0; i < num; i++) { let radom = Math.floor(Math.random() * 10); code += radom } return { "code": code } } const randCode = ran(6);
然后我们的数据需要值转换为 JSON 字符串 的格式传递
最后我们的client.request可以改成我们习惯的async awati的新式，
外层使用try catch来捕获错误
try { const response = await client.request('SendSms', params, requestOption) console.log('response', response) if (response.Code === 'OK') { ctx.body = { code: '200', message: '发送成功' } } else { ctx.body = { code: '400', message: '发送失败' } } } catch (error) { console.log('error', error) }
前台代码
因为我们主要是测试发送短信的处理，前台就不做过多讲解，这里直接使用原生html请求axios
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <input class="input" type="text" placeholder="请输入电话号码"> <button id="btn">验证</button> </body> <script> let val= document.querySelector('.input') document.querySelector("#btn").addEventListener("click",function (params) { console.log(val.value) var url = "http://localhost:3001/note"; var paramsdataa = {phone:val.value}; axios({ url:url, method:'POST', data:paramsdataa }).then(function (res) { console.log(res.data); }); }); </script> </html>
接着发送请求
这里首先我们的前台已经请求成功了，也拿到请求成功的回调
然后就是我们的手机上也获取到了验证信息，
后续我们就可以将用户输入的验证码跟我们生成的验证码信息相匹配，如果匹配成功就可以继续自己需要的操作。
4.结束
到这里我们的node.js实现阿里云配置发送短信验证码就已经结束了，
完整的代码我放github上了需要的可以自取
如果你觉得这篇文章对您有帮助就三连支持一下呗。
![node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘](https://ucc.alicdn.com/3rkpnpbboddyy/developer-article1611150/20240924/6d75171d53ae4374be44c9d91a3bd8f0.png?x-oss-process=image/resize,h_160,m_lfit)
