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

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

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


开始


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


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


签名添加

eed81a4d0b684e8f9e8fe5b57a0888b5.png


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


模板添加


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


5061117bbbb24f48a4cea37837973356.png


测试短信


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


0f808a96ee5c4312b2af657d129c4802.png


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


c8ae563228dd410ba394303696599522.png


可以拿到


28543e1148bd45d080675d4863e8eaba.png


然后就可以接收到短信


8f4d7a48912a45aca0f4440e3ac92792.jpg


项目中使用


首先我们新建一个node项目


首先使用npm init初始化项目 然后依次下载 koa2 nodemon  koa2-cors koa-bodyparser koa-router


然后运行项目


6e6330bce68b44298c25e88ccda5d682.png


然后我们需要下载


yarn add @alicloud/pop-core


下载之后直接先复制到我们的项目中post请求里面


f6f7f5adcd944d6390bea04be7780032.png


然后我们这里来一点点完善代码


Core


首先看文档可以看出我们的new Core


accessKeyId | accessKeySecret


首先就是我们的accessKeyId


我们的accessKeyId和accessKeySecret一样都需要我们自己在阿里云进行创建


82489619d03447819ca04525b49d5fbc.png


然后这里的AccessKey ID和AccessKey Secret就分别是我们的accessKeyId和accessKeySecret了


d8f246278c594e459a2b35d92cafdc5f.png


后面几个参数就可以直接使用就可以了


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就是我们添加的模板,需要我们自己提前增加


d9042011a6684779ad9c40f4bc2bf96f.png


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>


接着发送请求


这里首先我们的前台已经请求成功了,也拿到请求成功的回调

0603af7e5355424fb0848bb842d782dd.png


然后就是我们的手机上也获取到了验证信息,


594c89dee4ff42a6a8bcf1b414c847ba.png


后续我们就可以将用户输入的验证码跟我们生成的验证码信息相匹配,如果匹配成功就可以继续自己需要的操作。


4.结束


到这里我们的node.js实现阿里云配置发送短信验证码就已经结束了,


完整的代码我放github上了需要的可以自取


https://github.com/cqxzq/note


如果你觉得这篇文章对您有帮助就三连支持一下呗。


相关文章
|
2天前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
17 5
|
2天前
|
存储 弹性计算 固态存储
阿里云服务器CPU内存配置详细指南,如何选择合适云服务器配置?
阿里云服务器配置选择涉及CPU、内存、公网带宽和磁盘。个人开发者或中小企业推荐使用轻量应用服务器或ECS经济型e实例,如2核2G3M配置,适合低流量网站。企业用户则应选择企业级独享型ECS,如通用算力型u1、计算型c7或通用型g7,至少2核4G配置,公网带宽建议5M,系统盘可选SSD或ESSD云盘。选择时考虑实际应用需求和性能稳定性。
144 6
|
2天前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
6 0
|
2天前
|
前端开发 API
nuxt.config.js 配置
我们在使用Nuxt.js提供的create-nuxt-app 创建项目后,更希望对它自定义一些东西,这里我们可以在根目录下找到nuxt.config.js
19 7
|
2天前
|
Kubernetes 安全 API
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
|
2天前
|
缓存 资源调度 JavaScript
nodejs环境安装与配置记录
nodejs环境安装与配置记录
15 1
|
2天前
|
存储 弹性计算 固态存储
阿里云服务器租用价格参考,2核16G、4核32G、8核64G配置收费标准
阿里云服务器2核16G、4核32G、8核64G配置最新租用价格更新,2024年阿里云产品再一次降价,降价之后2核16G配置按量收费最低收费标准为0.596元/小时,按月租用标准收费标准为260.44元/1个月。4核32G配置的阿里云服务器按量收费标准最低为1.085元/小时,按月租用标准收费标准为520.88元/1个月。8核64G配置的阿里云服务器按量收费标准最低为2.17元/小时,按月租用标准收费标准为1041.77元/1个月。云服务器实例规格的地域和实例规格不同,收费标准不一样,下面是2024年阿里云服务器2核16G、4核32G、8核64G配置的最新租用收费标准。
阿里云服务器租用价格参考,2核16G、4核32G、8核64G配置收费标准
|
2天前
|
存储 弹性计算 固态存储
阿里云服务器配置选择指南,2024年全解析
阿里云服务器配置选择涉及CPU、内存、带宽和磁盘。个人开发者或中小企业推荐使用轻量应用服务器或ECS经济型实例,如2核2G3M配置,适合网站和轻量应用。企业用户则应选择企业级独享型ECS,如计算型c7、通用型g7,至少2核4G起,带宽建议5M,系统盘考虑SSD云盘或ESSD云盘以保证性能。阿里云提供了多种实例类型和配置,用户需根据实际需求进行选择。
|
2天前
|
存储 弹性计算 固态存储
阿里云服务器配置怎么选择合适?收藏级教程大家参考下
阿里云服务器配置选择涉及CPU、内存、带宽和磁盘。个人开发者或中小企业推荐使用轻量应用服务器或ECS经济型实例,如2核2G3M配置,适合低流量网站。企业用户应选择企业级独享型ECS,如通用算力型u1、计算型c7或通用型g7,至少2核4G配置,公网带宽建议5M,系统盘可选SSD或ESSD云盘。具体配置需根据实际应用需求来定。
|
2天前
|
存储 弹性计算 运维
深度解读:阿里云服务器ECS经济型e实例配置整理和性能参数表
阿里云推出经济型ECS e系列服务器,适用于个人开发者、学生和小微企业。该系列采用Intel Xeon Platinum处理器,支持多种CPU内存配比,性价比高,2核2G3M配置只需99元/年,新老用户不限量购买且续费不涨价。提供相同可用性SLA和安全标准,具备ESSD Entry云盘等企业级特性。适合中小型网站、开发测试和轻量级应用

热门文章

最新文章