uni-app中使用unicloud短信验证码(开通、模板报备、使用)

现在Dcloud公司在各方面都在不断完善功能、应用,嫁接一些新技术进来。对一个从事前端开发的程序员,Dcloud公司做的一些东西对于我们前端真的太友好了,首先框架开源,开发时可以引入各种插件,ui视图组件也很丰富。

真的是良心开发商,大赞!!!!

最近,hbuilderx 2.8.11版本正式上线,优化和新增一些功能,里面内容有点多久不一一介绍了,有兴趣的小伙伴可以看一下。

我这里简单介绍一下短信验证码如何使用。

第一步:开通短信服务

请前往Dcloud开发者中心具体详情看官方指南:https://ask.dcloud.net.cn/article/37534
成功时获取到smsKey、smsSecret两个值(下面会用到)
在这里插入图片描述

第二步:短信模板报备

使用 开发者账号邮箱 发送标题为 短信服务模板报备 的邮件,编辑内容为:

DCloud公司: 我的应用appid为xxx、应用名称为xxx。
我已开通uniCloud短信服务,现申请为此应用报备短信模板,该模板为验证类短信模板,其内容如下:
【这里填短信签名】验证码: c o d e , 用 于 {code},用于 code{action},${expMinute}分钟内有效,请勿泄露并尽快验证。

发送到:service@dcloud.io

大概 0~3个工作日 开发者邮箱会收到DCloud公司回复,样式如下:
在这里插入图片描述

第三步:使用
(1)创建云服务(我这里以阿里云为例)
在这里插入图片描述
(2)云服务下面,右键选择新建云函数 sandcode文件:
内容如下:

'use strict';
exports.main = async (event, context) => {
  try {
    const res = await uniCloud.sendSms({
      //smsKey、smsSecret值为开通
      smsKey: 'xxxxxxxxxxxxxxxxxx', 
      smsSecret: 'xxxxxxxxxxxxxxxxxxxxxx',
      phone: '183xxxxxxxx', // 为验证码的接收者号码
      templateId: 'xxxxxxx', // 短信模板id
	  name: 'telcode', // 请注意使用自行申请的模板时必须传name字段,值为报备时填写的应用名称
      data: {
        code: '123456', // 测试的验证码,可自定义
        action: '注册', // 表明用途
        expMinute: '3', // 有效时间 单位分钟
      }
    })
    // 调用成功,请注意这时不代表发送成功
    return res
  } catch(err) {
    // 调用失败
    console.log(err.errCode)
    console.log(err.errMsg)
    return {
      code: err.errCode,
      msg: err.errMsg
    }
  }
};

(3)在uniapp项目的登录页面触发调用云函数

<button type=“default” @tap=“send()”>发送

send() {
 uniCloud.callFunction({
 	name: 'sendcode',
	success: (e)=> {
		console.log('这是发送验证码', e.result);
	}
 })
 }

第四步:测试
此时接收者(我)手机收到一条短信:
在这里插入图片描述

到此,短信验证码分享结束,欢迎大家留言!

  • 5
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
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实现图形验证码的步骤。需要注意的是,本示例仅供参考,实际使用时还需要进行适当的修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值