WordPress后台登陆添加短信注册验证码功能

短信验证码登陆已经非常流行，我们怎样在 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网站注册登录到发送的简单代码逻辑，大家可以参考一下。

注意两点：
一是在发送验证码之前，先保存验证码数据库中，以免验证码发出去了，数据库却保存失败了，这时候就算用户收到了短信验证码，去验证的时候也是失败的，如果保存数据库失败，直接提示一个发送失败的消息就可以了，不要再发送短信造成浪费；

二是保存数据库的时候，需要考虑用户没有收到短信，重新发送的情况，这个时候是更新数据库中的记录，而不是新建，如果是新建，短信验证记录就重复了，验证短信的时候，很可能获取的是上一条验证记录，用户使用当前收到的验证码验证的时候，也是验证通不过的。

/** * 发送手机验证码 */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 );},] );12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455/** * 发送手机验证码 */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('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;});1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859//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;});

发送注册登录验证短信之后，前端后段的实现都有了，最后就是实现用户注册或登录了，这一步就是比较常规的操作了，根据用户的手机号，从数据库中取出验证码，和用户提交过来的验证码比对，如果一致，说明验证码正确，进行下一步的处理；如果不一致，说明验证码错误，提示用户验证码错误，让用户修正或者重新发送验证码。

上一篇：wordpress全站https后常见问题及解决办法分享

下一篇：wordpress开发：如何给WordPress主题添加友情链接功能

---