发送短信之前,我们肯定要生成一个随机的验证码,通过短信发送验证码的同时,也吧验证码保存到数据库里,供验证时对比,判断验证码是否正确。下面是我在做一个网站注册登录的时候,发送代码的简单逻辑,大家可以参考一下。
下面的代码中需要注意两点:一是在发送验证码之前,先保存验证码数据库中,以免验证码发出去了,数据库却保存失败了,这时候就算用户收到了短信验证码,去验证的时候也是失败的,如果保存数据库失败,直接提示一个发送失败的消息就可以了,不要再发送短信造成浪费;二是保存数据库的时候,需要考虑用户没有收到短信,重新发送的情况,这个时候是更新数据库中的记录,而不是新建,如果是新建,短信验证记录就重复了,验证短信的时候,很可能获取的是上一条验证记录,用户使用当前收到的验证码验证的时候,也是验证通不过的。
其实下面的验证逻辑里面,还却少一条手机号码正确性的验证,由于是后来加上的,就不再粘贴了。
/**
* 发送手机验证码
*/new Dispatch( ['wizhi/get_phone_code' => function ( $request ) {
$phone = isset( $_POST[ 'phone' ] ) ? $_POST[ 'phone' ] : false;
if ( $phone ) {
// 生成随机验证码
$phone_code = str_pad( mt_rand( 1, 99999 ), 6, '0', STR_PAD_LEFT );
// 先创建数据库记录,再发送短信,
// 用 findOrCreate 而不是直接 create 密码发送失败后重试时,创建重复记录导致验证失败
$code = R::findOrCreate( CODES, [ 'phone' => $phone ] );
$code->code = $phone_code;
$success = R::store( $code );
// 数据库记录创建成功后再发送短信,否则就不用发短信了,发了也验证不了
$sms = false;
if ( $success ) {
$sms = send_sms( $phone, $phone_code );
} else {
$msg = [
'success' => 1,
'message' => '验证短信发送失败,请重试',
];
}
if ( $sms ) {
$msg = [
'success' => 1,
'message' => '验证短信已发送',
];
} else {
$msg = [
'success' => 1,
'message' => '验证短信发送失败,请重试',
];
}
} else {
$msg = [
'success' => 0,
'message' => '请输入正确的手机号码',
];
}
wp_send_json( $msg );},] );
接收了正确的请求之后,上面的路由返回的是一个 JSON 格式的消息字符串,我们可以在前端根据返回的字符串做进一步的处理,下面我们来看一下前端代码的实现。
下面的代码实现的就是一个点击发送验证码之后,请求后端接口,发送短信给用户的功能,发送验证短信一分钟之后,可以重新发送,需要注意的是计时器的触发时机,要在成功发送了短信之后,才启用计时器。否则用户的手机填错了,或者因为其他原因没能发送短信的时候,用户还要白等一分钟,才能继续发送短信。如果更严谨一点,可以加一个随机验证码的机制,以防被恶意程序扫描到发送短信炸弹。
//timer处理函数var InterValObj; //timer变量,控制时间var count = 60; //间隔函数,1秒执行var curCount;//当前剩余秒数/**
* 设置计时器
* @constructor
*/function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#get_code").removeAttr("disabled");//启用按钮
$("#get_code").val("重新发送");
}
else {
curCount--;
$("#get_code").val(curCount + "后重新获取");
}}/**
* 发送短信验证码
* @returns {boolean}
*/$('#get_code').on('click', function (event, element) {
event.preventDefault();
// 向后台发送处理数据
$.ajax({
method : 'POST',
url : WizUrls.get_phone_code,
dataType: "json",
data : {
'phone': $('form#modal-register #user_login').val()
},
success : function (data) {
if (data.success === 0) {
$('form#modal-register div.status').removeClass('c-alert-success').addClass('c-alert c-alert-danger').html(data.message);
return false;
} else {
// 验证码发送成功后,启动计时器
curCount = count;
// 设置button效果,开始计时
$(this).attr("disabled", "true");
$(this).val(curCount + "后重新获取");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
$('form#modal-register div.status').removeClass('c-alert-danger').addClass('c-alert c-alert-success').html(data.message);
return true;
}
}
});
return false;});
发送注册登录验证短信之后,前端后段的实现都有了,最后就是实现用户注册或登录了,这一步就是比较常规的操作了,根据用户的手机号,从数据库中取出验证码,和用户提交过来的验证码比对,如果一致,说明验证码正确,进行下一步的处理;如果不一致,说明验证码错误,提示用户验证码错误,让用户修正或者重新发送验证码。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。