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

WordPress基础知识普及: Demo内容可以用插件导入么?

大家好,最近有小白同学咨询关于Demo导入的问题,因为不同主题Demo使用方法不同,用这篇文章普及下。 先举一个例子,从ThemeForest购买的RT-Theme 18主题,这是一个老主题,主题自带Demo内容,是一个XML文件,放在主题包里,用WordPr…

短信验证码登陆已经非常流行,我们怎样在 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

3

/**

* 发送手机验证码

*/

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

3

//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;

});

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

Apache、Nginx 与 Node.js 之争 —— WordPress 与 Ghost 的性能大对决

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
幸运草
电脑桌面整理技巧大揭秘! 知识分享

电脑桌面整理技巧大揭秘!

使用腾讯电脑管家 免费领加速器时长即日起,在加速器官网首页或本公告页下载电脑管家,享三重加速福利:   福利一:蓄能5天免费领1天加速时长 第一步,下载电脑管家。 点击此处下载电脑管家       第...

发表评论