今天写了个小程序的短信验证码,闲来无事,也怕时间长了自己忘了,特来此做一下笔记。
1.首先是先去腾讯云拿sdk,
2.拿到后在extend目录下建一个sms文件夹
3.将(SmsMultiSender.php ,SmsSenderUtil.php,SmsSingleSender.php)放到sms文件夹下,其中它们的命名空间为namespace sms 例:
4.然后在Controller里面引用:
接下来上php接口代码:
public function getPhoneInfo(){
$util=new SmsSenderUtil();
$randCode=$util->getRandom();//生成验证码
// 短信应用SDK AppID
$appid = 14001; // 1400开头
// 短信应用SDK AppKey
$appkey = "6da160fd69";
// 短信模板ID,需要在短信应用中申请
$templateId = 1670; // NOTE: 这里的模板ID`7839`只是一个示例,真实的模板ID需要在短信控制台中申请
// 签名
$smsSign = "艾呀艾"; // NOTE: 这里的签名只是示例,请使用真实的已申请的签名,签名参数使用的是`签名内容`,而不是`签名ID`
//用户输入的手机号
$tel=input('phone');
try {
$res=db('user_login')->where('l_phone',$tel)->find();//验证用户输入的手机号在数据库中是否存在
//如果不存在就往数据库中添加
if(!$res){
$data['l_phone']=$tel;
$data['l_verification']=$randCode;//验证码
$data['l_time']=time();//创建时间
$data['l_failuretime']=time()+120;//验证码失效时间
$ins=db('user_login')->insert($data);
//添加成功之后再发送验证码
if($ins){
$sender = new \sms\SmsSingleSender($appid, $appkey);
$params = [$randCode,2];//验证码与有效时间
// 假设模板内容为:测试短信,{1},{2},{3},上学。
$result = $sender->sendWithParam("86",$tel,$templateId,$params, "", "", "");
//以json格式返回
return json($result);
}else{
return false;
}
}
//如果存在就只修改验证码与失效时间
else{
$data['l_verification']=$randCode;
$data['l_failuretime']=time()+120;//验证码失效时间
$update=db('user_login')->where('l_phone',$tel)->update($data);
if($update){
$sender = new \sms\SmsSingleSender($appid, $appkey);
$params = [$randCode,2];
// 假设模板内容为:测试短信,{1},{2},{3},上学。
$result = $sender->sendWithParam("86",$tel,$templateId,$params, "", "", "");
//以数组格式输出
return json($result);
}else{
return false;
}
}
}
catch(\Exception $e) {
echo var_dump($e);
}
}
//登录信息接口
public function getLoginInfo(){
//执行登录操作
$submitPhone=input('submitPhone');//接收form传参
$res=db('user_login')->field('l_phone,l_verification,l_failuretime')->where('l_phone',$submitPhone)->find();//查看用户输入的信息是否存在并返回
return json($res);
}
小程序代码:
wxml
- <view>
<!-- 图片 -->
<view class='img'>
<image style='width:40px;height:40px;' src='../../images/aSecondInvite.png'></image>
</view>
<!-- -->
<!-- 登录信息 -->
<form bindsubmit="formSubmit">
<view class='loginInfo'>
<view class='loginPhoneInfo'>
<image style='width:14px;height:21px;' src='../../images/phoneIcon.png'></image>
<input class='inputTxt' bindinput='getPhoneValue' type='text' value='{{phone}}' name='phone' placeholder='请输入手机号' />
</view>
<view class='loginPasswordInfo'>
<image style='width:16px;height:20px;' src='../../images/passwordIcon.png'></image>
<input class='inputTxt' bindinput='getCodeValue' value='{{code}}' type='text' name='verification' placeholder='短信验证码' />
<button bindtap='getVerificationCode' disabled='{{disabled}}' class='verificationCode'>{{codename}}</button>
</view>
</view>
<view class='loginBtnView'>
<button form-type='submit' class='loginBtn'>下一步</button>
</view>
</form>
<!-- -->
<!-- 解释说明 -->
<view class='txtView'>
<text class='txt'>未注册过的手机号将自动保存为一秒招聘账户</text>
</view>
<!-- -->
<!-- 一秒招聘用户协议 -->
<view class='protocolView'>
<text>登录或注册即代表同意</text>
<navigator url='../protocol码ocol' class='protocol'>《一秒招聘用户协议》</navigator>
</view>
<!-- -->
</view>
js
- `
Page({
data: {
codename: ‘发送验证码’,
phone: ”, //手机号
code: ”, //验证码
// iscode: null,//用于存放验证码接口里获取到的code
},
//获取input输入框的值
getPhoneValue: function(e) {
// console.log(e.detail.value)
this.setData({
phone: e.detail.value
})
},
getCodeValue: function(e) {
this.setData({
code: e.detail.value
})
},
getCode: function() {
// console.log(this.data.phone)
var a = this.data.phone;
var _this = this;
var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
if (this.data.phone == “”) {
wx.showToast({
title: ‘手机号不能为空’,
icon: ‘none’,
duration: 1000
})
// return false;
} else if (!myreg.test(this.data.phone)) {
wx.showToast({
title: ‘请输入正确的手机号’,
icon: ‘none’,
duration: 1000
})
return false;
} else {
_this.setData({
disabled: true
})
wx.request({
url: ‘接口地址’,
data: {
phone: this.data.phone
},
success(res) {
console.log(res.data)
// _this.setData({
// iscode: res.data.data
// })
var num = 121;
var timer = setInterval(function() {
num–;
if (num <= 0) {
clearInterval(timer);
_this.setData({
codename: ‘重新发送’,
disabled: false
})
} else {
_this.setData({
codename: num + "秒"
})
}
}, 1000)
}
})
}
},
//获取验证码
getVerificationCode() {
this.getCode();
},
//提交表单信息
formSubmit: function(e) {
// console.log(e.detail.value)
var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
if (this.data.phone == “”) {
wx.showToast({
title: ‘手机号不能为空’,
icon: ‘none’,
duration: 2000
})
return false;
} else if (!myreg.test(this.data.phone)) {
wx.showToast({
title: ‘请输入正确的手机号’,
icon: ‘none’,
duration: 2000
})
return false;
}
if (this.data.code == “”) {
wx.showToast({
title: ‘验证码不能为空’,
icon: ‘none’,
duration: 2000
})
return false;
}
else {
wx.request({
url: ‘接口地址’,
data: {
submitPhone: e.detail.value.phone,
},
method: ‘POST’,
success: function(res) {
console.log(res.data);
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;//获取当前时间戳
console.log(timestamp);
if (res.data.l_verification == e.detail.value.verification && timestamp < res.data.l_failuretime) {
wx.showToast({
title: ‘登陆成功’,
icon: ‘success’,
duration: 2000
})
wx.redirectTo({
url: ‘../index/index’,
})
} else {
wx.showToast({
title: ‘验证码错误’,
icon: ‘none’,
duration: 2000
})
}
}
})
}
},
})`