今天做小程序,遇到了短信验证码,所以就总结一下:
我今天也是第一次微信短信验证码, 做完发现真的好简单.但是要找对方向和步骤,不然还是需要费点时间.
废话不多说,看步骤
第一: ui给到界面图,先排好界面
第二: 看开发购买短信服务, 可以去阿里 ,腾讯 ,华为....好多短信服务的企业,我就不列举了,我买的是阿里的,因为我的服务器就是阿里的,所以就买的一个阿里的
第三: 说买其实也没有花钱,他有一个100免费测试版,我们去阿里注册完成之后,就可以购买一个100条短信测试版
在搜索框中搜索 : 短信服务
这里有一个免费开通
按照他的步骤即可完成免费开通测试版 记住只有100条
第四:
开通好了之后,就需要完成一些列的申请/认证操作,如果不会的话,可以问客服,阿里的客服还是可以的,我第一次做的时候就是打了很多电话,问了很多客服.
第五: 线上测试一下,绑定测试手机号,完成测试
接下来要改的地方就两个,第一个就是自己买的服务器,第二个就是要发的验证号码
接下来就是要获取sdk,其实就是accesskey
完成之后,开始后端编写,我这里就用node做后端,其实Java是一样的.
node:
const Core = require('@alicloud/pop-core'); // 需要一个阿里的插件
// 配置信息
const client = new Core({
accessKeyId: '自己的sdkid',
accessKeySecret: '自己的sdk密码',
endpoint: 'https://dysmsapi.aliyuncs.com', // 固定不动,写死的
apiVersion: '2017-05-25' // 固定不动,写死的
});
// 短信模板ID和签名名称，这些需要在阿里云短信服务控制台创建
const templateId = '这个是短信模板的code';
const signName = '这个是短信模板的name';
//验证码产生的方法 定义一个生成验证码的方法
function zymcode() {
let str = ""
for (let i = 0; i < 6; i++) {
str += Math.floor(Math.random() * 10)
}
return str
}
//发送验证码的方法
// 发送短信验证码
async function sendSmsVerificationCode(phoneNumber, code) {
try {
// 构建请求参数
const params = {
PhoneNumbers: phoneNumber,
SignName: signName,
TemplateCode: templateId,
TemplateParam: JSON.stringify({ "code": code }) // 根据你的模板格式，替换相应的参数
};
// 发送短信请求
const response = await client.request('SendSms', params);
if (response && response.Code === 'OK') {
console.log('短信发送成功');
return true;
} else {
console.error('短信发送失败:', response);
return false;
}
} catch (err) {
console.error('发送短信时发生错误:', err);
return false;
}
}
//验证码接口方法
router.post("/yzm", (req, res) => {
// console.log("验证码进来");
//获取手机号
let tel = req.body.tele
// 接收短信的手机号码和验证码
const phoneNumbers = tel;
const code = zymcode();
let rr = sendSmsVerificationCode(phoneNumbers, code)
if (rr) {
res.send({
code: 200,
message: "暂无数据",
data: {
yzm: code
}
})
} else {
res.send({
code: 401,
message: "验证码发送失败",
data: {}
})
}
})
前端代码:
<view class="logincontent">
<u--form labelPosition="left" :model="obj" :rules="rules" ref="uForm" class="formbox">
<u-form-item prop="tele" borderBottom ref="item1">
<u--input placeholder="请输入手机号码" prefixIcon="phone-fill"
prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.tele"
border="none"></u--input>
</u-form-item>
<u-form-item prop="yzm" borderBottom>
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input placeholder="请输入验证码" border="none" prefixIcon="lock-fill"
prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.yzm">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input placeholder="请输入验证码" border="none" prefixIcon="lock-fill"
prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.yzm">
<!-- #endif -->
<template slot="suffix">
<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
</template>
<!-- #ifndef APP-NVUE -->
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</u--input>
<!-- #endif -->
</u-form-item>
</u--form>
<u-button type="primary" @click="gotoLogin" class="cccccc">登录</u-button>
<u-button type="primary" @click="gotoRegister" class="cccccc">注册</u-button>
</view>这样就完事了 ,很简单!
