短信验证码登陆已经非常流行，我们怎样在 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; }); |
发送注册登录验证短信之后，前端后段的实现都有了，最后就是实现用户注册或登录了，这一步就是比较常规的操作了，根据用户的手机号，从数据库中取出验证码，和用户提交过来的验证码比对，如果一致，说明验证码正确，进行下一步的处理；如果不一致，说明验证码错误，提示用户验证码错误，让用户修正或者重新发送验证码。
