node.js实现阿里云配置发送短信验证码-阿里云开发者社区

node.js实现阿里云配置发送短信验证码

2022-10-20 1488

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： node.js实现阿里云配置发送短信验证码

这段时间在自己准备做一个博客系统，在写登录页面的时候突然想到除了正常账号密码登录和其他第三方登录之后，在加一个手机号登录岂不是更好。说干就干，于是就是阿里云上找了一下关于短信的服务，看了一下还是比较符合我们的需求，于是就决定使用阿里云，

开始

首先项目开始我们需要配置我们的短信服务，进入阿里云搜索我们的短信服务阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

然后第一步就需要找到我们的国内信息

签名添加

第一次使用的小伙伴需要新添加我们的签名，这里添加比较严格，小伙伴如果添加失败可以多试几次，

模板添加

签名添加好了之后然后需要添加我们的模板管理

测试短信

这里我们的签名和模板都添加成功之后我们就可以测试一下短信是否可以正常发送了，

这里填写信息然后点击测试

可以拿到

然后就可以接收到短信

项目中使用

首先我们新建一个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>