短信验证码登陆已经非常流行，我们怎样在 WordPress 中的实现短信注册验证码登录功能呢？其实很简单，整合短信接口的对接完成接口实现，耐心调试就可以完成而且官方都提供的有 SDK 和代码供参考。所以操作起来也很方便。下面布大挖给大家介绍下整体的操作步骤。
验证码短信服务接口
短信接口是简单的技术实现，使用哪家的接口要看稳定性、灵活性价格等因素，国内常用的几个短信服务商，供大家参考。
服务商 模板短信内容短信 语音验证码 最低消费 最低消费单价
Luosimao × ✓ ✓ ￥850(1万条) ￥0.085/条
云片网络 × ✓ ✓ ￥55(1千条) ￥0.055/条
容联·云通讯 ✓ × ✓ 充值￥500 ￥0.055/条
SUBMAIL ✓ × × ￥100(1千条) ￥0.100/条
云之讯 ✓ × ✓ — ￥0.050/条
聚合数据 ✓ × ✓ — ￥0.035/条
阿里大鱼 ✓ × ✓ — ￥0.045/条
SendCloud ✓ × ✓ — ￥0.048/条
发送及验证短信后端代码实现
发送短信之前，我们需要生成一个随机的验证码，通过短信发送同时也保存到我们本地数据库里，供验证时判断验证码是否正确。下面是我在做一个wordpress网站注册登录到发送的简单代码逻辑，大家可以参考一下。
注意两点：
一是在发送验证码之前，先保存验证码数据库中，以免验证码发出去了，数据库却保存失败了，这时候就算用户收到了短信验证码，去验证的时候也是失败的，如果保存数据库失败，直接提示一个发送失败的消息就可以了，不要再发送短信造成浪费；
二是保存数据库的时候，需要考虑用户没有收到短信，重新发送的情况，这个时候是更新数据库中的记录，而不是新建，如果是新建，短信验证记录就重复了，验证短信的时候，很可能获取的是上一条验证记录，用户使用当前收到的验证码验证的时候，也是验证通不过的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
/**
* 发送手机验证码
*/
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 格式的消息字符串，我们可以在前端根据返回的字符串做进一步的处理，下面我们来看一下前端代码的实现。
发的短信验证码的前端代码实现
下面的代码实现就是发送验证短信一分钟之后，可以重新发送，需要注意的是计时器的触发时机，在成功发送了短信之后才启用，否则用户的手机或者其他原因没能发送短信，用户还要白等一分钟，才能继续发送短信。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
//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(‘alert-success’).addClass(‘alert 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(‘alert-danger’).addClass(‘alert alert-success’).html(data.message);
return true;
}
}
});
return false;
});
|
发送注册登录验证短信之后，前端后段的实现都有了，最后就是实现用户注册或登录了，这一步就是比较常规的操作了，根据用户的手机号，从数据库中取出验证码，和用户提交过来的验证码比对，如果一致，说明验证码正确，进行下一步的处理；如果不一致，说明验证码错误，提示用户验证码错误，让用户修正或者重新发送验证码。
来源：http://www.wazhuti.com/2462.html
