uni-app中使用uniCloud实现发送短信验证码(开通、配置、使用)

登录dcloud开发者中心,通过以下几个步骤,即可实现发送短信功能。注意是,这里讲解的是通过uniCloud实现调用功能,如需使用REST API调用,请查看官方文件。

一、开通服务

地址:DCloud开发者中心

开通成功后,页面如下所示:

注:页面中显示的“账号API密钥”用于接口身份验证,此信息需要妥善保存,一旦泄露可能会给您带来不必要的财务损失。

二、签名配置

以上内容按要求真实填写好之后 ,等1~2个工作日即可。一般内容真实无虚构,基本第二天就能通过审核。一旦过审,即可发布短信模板了。

三、短信模板配置

添加模拟后,如模板审核通过,则可以进行短信接入。

模板示例:“${name}”验证码:${code},${expMinute}分钟内有效,请勿泄露并尽快验证。

注:模板内容即为发送给用户验证码信息内容,这里name、code、expMinute则为后期接口中传入参数键名,需保持一致。

四、进行充值

短信验证码为预付费业务,使用短信验证码服务前,需要先进行充值。

五、安全配置

在此页面可以进行一些安全设置,以提高接口的调用安全性,防止被他人盗用。

注:添加服务空间,需要选登录uniCloud云开发平台,创建服务空间,否则后续云函数无法更新在线调用。因涉及费用,为保障安全,本功能在云函数中调用,而不是在前端调用。

 uniCloud云开发平台地址:uniCloud官网 - web控制台

六、发送短信

云函数API名称:uniCloud.sendSms

6.1 参数说明

参数名类型必填说明
appidStringDCloud appid,可以在项目manifest.json内看到
smsKeyString调用短信接口的密钥key,从 dev.dcloud.net.cn/uniSms 后台获取
smsSecretString调用短信接口的密钥secret,从 dev.dcloud.net.cn/uniSms 后台获取
phoneString和phoneList二选一发送目标手机号,暂仅支持中国大陆手机号
phoneListArray和phone二选一发送目标手机号,暂仅支持中国大陆手机号,最多50个手机号码,HBuilderX 3.3.0起支持
templateIdString模版Id,短信内容为固定模板,详见下方说明(应用开发阶段,可以使用 DCloud 提供的测试模板)
dataObject模版里的各个变量字段,json格式

6.2 云函数的package.json添加uni-cloud-sms

"extensions": {
    "uni-cloud-sms": {} // 启用uni-cloud-sms扩展,值为空对象即可
}

6.3 返回值

参数名类型说明
errCodeNumber成功返回0,调用失败错误码见下表
errMsgString错误描述,调用失败时返回

6.4 错误说明

错误码错误
1001参数校验未通过,errMsg内会给出详细信息
4000参数错误
4001apiKey 不存在 或 templateId 不正确
4002请检查smsKey、smsSecret是否有误
4003服务空间或IP地址不在白名单中
5000服务错误,请联系DCloud进行排查
5001服务器异常,请重试!

6.5 创建uniCloud

目前有两个云服务商,分别是 阿里云 和 腾讯云, 在创建项目时可以选择某个云服务商。

已创建项目,可以在项目名上右击,点击 “创建uniColoud云开发环境”,选择某个云服务商即可。

 已创建云空间,可选择“关联云服务空间项目”,如下图

以上步骤完成后,则可以创建云函数,实现发短信了。

6.6 创建云函数

 打个uniCloud目录,选中cloudfunctions右击选择“新建云函数”,例如命名为sendSms,点击“创建”后,cloudfunctions目录会出现sendSms目录,打开sendSms中index.js文件,具体如下代码:

'use strict';
exports.main = async (event, context) => {
	try {
		const res = await uniCloud.sendSms({
            //uni-app应用标识,请替换为自己Dcloud appID
			appid: '__UNI__xxxxxxx',            

			//请填写自己开通短信中的账号 API 密钥,如开通服务中第二张图上
			smsKey: '****************',        
			smsSecret: '****************',

            // 请替换为自己申请的短信模板id
			templateId: '100**',                 

			//调用接口传入参数
			phone: event.phone,
			data: event.data
		})
		// 调用成功,请注意这时不代表发送成功
		return res
	} catch(err) {
		// 调用失败
		console.log(err.errCode)
		console.log(err.errMsg)
		return {
			code: err.errCode,
			msg: err.errMsg
		}
	}
};

以上操作完成后,选择云函数sendSms目录,右击选择”上传部署“,等上传完成后,则可以”连接云端云函数“进行发送短信了。

 6.7 定义随机生成验证码函数

//返回6位数长度验证码
export const randomSms = () => {
	let res = '';
	for(var i = 0; i < 6; i++) res += Math.floor(Math.random()*10);
	return res;
}

6.8 前端调用发送短信

uniCloud.callFunction({
	name: 'sendSms',    //对应的云函数名
	data: {
		phone: "手机号码",
		data: {
			name: '项目名或公司名称',
			code: randomSms(),		//随机生成的验证码,如123456
			action: '注册',			//校验类型为“注册”
			expMinute: '5',			//短信的有效期,5分钟
        }
	}
}).then(res => {
	console.log('success', res);
}).catch(msg => {
	console.error(msg);
});

以上函数调用后,则可以发送短信到手机上了。

更详细说明请访问官方文档查看:发送短信 | uni-app官网

  • 8
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Uni-app是一款跨平台开发框架,而Uni-Cloud则是一个为开发者提供云端服务的平台。实现图形验证码可以使用Uni-Cloud的云函数功能,具体步骤如下: 1. 在Uni-Cloud创建一个云函数,命名为`getVerificationCode`; 2. 在云函数引入`jimp`模块,用于生成验证码图片。 ```javascript const jimp = require('jimp'); ``` 3. 定义生成验证码的函数`generateCode`,该函数接受两个参数,分别是验证码长度和验证码图片的宽度和高度。 ```javascript async function generateCode(length, width, height) { const code = [...Array(length)].map(() => (~~(Math.random() * 36)).toString(36)).join(''); const image = new jimp(width, height, '#fff'); const font = await jimp.loadFont(jimp.FONT_SANS_64_BLACK); image.print(font, 0, 0, code); return { code, buffer: await image.getBufferAsync(jimp.MIME_PNG) }; } ``` 4. 在云函数的主函数,调用`generateCode`函数生成验证码,并将验证码的`code`和图片的`buffer`返回给前端。 ```javascript exports.main = async (event) => { const { length = 4, width = 200, height = 100 } = event.queryStringParameters || {}; const { code, buffer } = await generateCode(length, width, height); return { code: 0, message: 'success', data: { code, buffer: buffer.toString('base64') } }; }; ``` 5. 在前端页面,通过Uni-Cloud的API调用云函数,获取验证码图片的`base64`编码,并将其显示在页面上。 ```javascript uniCloud.callFunction({ name: 'getVerificationCode', data: { length: 4, width: 200, height: 100 }, success(res) { const { code, buffer } = res.result.data; if (code === 0) { const base64ImgUrl = `data:image/png;base64,${buffer}`; // 将base64编码转换成图片并显示在页面上 } }, fail(err) { console.error(err); } }); ``` 以上就是使用Uni-Cloud实现图形验证码的步骤。需要注意的是,本示例仅供参考,实际使用时还需要进行适当的修改和优化。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值