评论

小程序云开发实现短信验证

小程序云开发实现短信验证

废话不多说,先上效果



一、用到的相关知识点

1.腾讯云中的消息接口

2.小程序云开发相关知识点

3.小程序相关知识点

技术点就这些,还是蛮简单的,有基础的小伙伴可以思考下原理,没基础的呢,ctrl+c复制一下,ctrl+v到代码里,再改改参数就能用了

二、登录腾讯云,开通消息接口

云产品-->云通讯-->短信

完成签名管理和正文模板管理

关于腾讯云的准备工作就到这里了,这里有个小细节要补充一下

这段话的意思呢,就是说{1}{2}是自己填入的变量,不用去改变,改变的是后面的文字

三、小程序云开发调用API,实现短信验证

我先把样式布局贴出来(没有专门设计,只为了演示下大致效果)

<view class="box">    

            <text>请输入您的手机号码</text>

            <input class="input" type="number" bindblur="getPhone"></input>

            <text>请输入验证码</text>

            <input class="input" type="text" bindblur="getSms"></input>

            <text>状态:{{result}}</text>

            <button type="primary" bindtap="send">点击发送</button>

            <button type="primary" bindtap="check">点击验证</button>

</view>


.box{ padding:20rpx;}

button{ margin-top: 20rpx;}

.input{ border:1px solid #eee;}


好了,下面开始讲云开发调用短信接口的部分(创建小程序,再创建云开发模式,删除自动生成的模板啥的,我省略了)

1.新建Node.js云函数

2.再package.json中的"dependencies"加入:"qcloudsms_js": "^0.1.1"


//下面的除了标注的地方外,其余的不用更改


const cloud = require('wx-server-sdk')


const QcloudSms = require("qcloudsms_js")


const appid = ****** // 替换成云短信的 SDK AppID


const appkey = "*********" // 替换成云短信的 App Key


const templateId = ****** // 替换成模板 ID


const smsSign = "******" // 替换成签名内容


cloud.init()


exports.main = async (event, context) => new Promise((resolve, reject) => {


    /**


    * 下面这段代码的作用是,生成随机的验证码,因为循环了6次,就是6位数的


    */


    // 生成6位数验证码 


    var code = "";


    for (var i = 0; i < 6; i++) {


        var radom = Math.floor(Math.random() * 10);


        code += radom;


     }


    // 生成6位数验证码 


    var qcloudsms = QcloudSms(appid, appkey);


    var ssender = qcloudsms.SmsSingleSender();


    var params = [code,"2"];


    var mobile = event.mobile


    var nationcode = event.nationcode


    ssender.sendWithParam(nationcode, mobile, templateId, params, smsSign, "", "", (err, res, resData) => {


        if (err) {


            reject({ err })


        } else {


            resolve({ res: res.req, resData})


        }


    }


    );


})

里面有段代码标红了,因为比较重要

 var params = [code,"2"]

上面的参数,就是之前短信模板里面的参数

比如说,你填的是

{1}为您的登录验证码,请于{2}分钟内填写。如非本人操作,请忽略本短信。

var params = ["1234","2"]

收到的短信就是:

1234为您的登录验证码,请于2分钟内填写。如非本人操作,请忽略本短信。

下面是小程序中js调用云函数的接口


Page({

    /**

    * 页面的初始数据

    */

    data: {

        result: "未发送"

    },

    /**

    * 获取输入的手机号码

    */

    getPhone: function(e) {

        let phone = e.detail.value;

        this.setData({

            phone

        })

    },

    /**

    *获取输入的验证码

    */

    getSms: function(e) {

        let sms = e.detail.value;

        this.setData({

            u_sms: sms

        })

    },

    /**

    * 点击【点击验证】后,比较随机生成的二维码和用户输入的二维码是否一致

    */

    check: function() {

        let s_sms = this.data.s_sms;

        let u_sms = this.data.u_sms;

        if (s_sms == u_sms) {

            wx.showToast({

                title: '验证成功',

                icon: 'success',

                duration: 2000

            })

        } else {

            wx.showToast({

                title: '验证码输入错误',

                icon: 'none',

                duration: 2000

            })

        }

    },

    /**

    * 点击发送,调用云函数

    */

    send: function() {

        let _this = this;

        wx.cloud.callFunction({

            name: 'sendsms',

            data: {

                mobile: _this.data.phone,

                nationcode: '86'

            },

            success: res => {

                let sms = res.result.res.body.params[0];

                let result = res.errMsg;

                if (result == "cloud.callFunction:ok") {

                    _this.setData({

                        result: "发送成功",

                        s_sms: sms

                    })

                } else {

                    _this.setData({

                        result: "发送失败"

                    })

                }

            },

            fail: err => {

                console.error('[云函数] [sendsms] 调用失败', err)

            }

        })

    }

})

好了,这样就完成了云开发实现短信验证的效果

最后一次编辑于  05-15  
点赞 1
收藏
评论

1 个评论

  • 英忠通信
    英忠通信
    09-02

    请问:腾讯云提供的短信验证接口,响应速度(从开始到短信抵达)不超过多少秒?

    09-02
    赞同
    回复
登录 后发表内容