配合监管要求,网站评论必须绑定个人手机号

Wordpress整合腾讯云短信登录注册

一、开发前准备

  1. 下载腾讯云短信SDK。
  2. 腾讯云短信接口申请(签名、模板审核通过方可发信)。

Wordpress整合腾讯云短信登录注册

二、创建项目文件

  1. 在主题目录下创建qqcloud文件夹,将下载下来的官方SDK解压到该目录
  2. 删除无用的SDK

Wordpress整合腾讯云短信登录注册

demo文件夹为官方演示demo,可以仔细看一下,我们要用到的只有src文件夹下的SmsSingleSender.php,SmsSenderUtil.php这两个文件,如果你有更多的发信需求,则需要相关的sdk文件。

三、整合项目到wordpress

首先我们在qqcloud文件夹下新建php文件sms.php,内容如下

<?php
require_once __DIR__ . "/src/SmsSingleSender.php";
require_once __DIR__ . "/src/SmsSenderUtil.php";

use Qcloud\Sms\SmsSingleSender;
use Qcloud\Sms\SmsMultiSender;
use Qcloud\Sms\SmsVoiceVerifyCodeSender;
use Qcloud\Sms\SmsVoicePromptSender;
use Qcloud\Sms\SmsStatusPuller;
use Qcloud\Sms\SmsMobileStatusPuller;

use Qcloud\Sms\VoiceFileUploader;
use Qcloud\Sms\FileVoiceSender;
use Qcloud\Sms\TtsVoiceSender;
class TopicNote_Ucenter_Sms{
	
	public function __construct() {
		
	}
	
	public function TopicNote_Sms_Send(){
		
	}
}
new TopicNote_Ucenter_Sms();

如果有开发能力的朋友,也可以自己封装类,下面是配合SDK发信,个人比较喜欢ajax操作,于是就直接上ajax的代码了

public function TopicNote_Sms_Send(){
	$appid = '1400195640';//应用ID
	$appkey = 'befc46e0ebff1071ed53af6b3380832d';//应用密钥
	$phonenumbers = '18000000000';//接收验证码的手机号
	$templateid = 308124;//模板ID
	$smsSign = '主题笔记';//签名内容,请在腾讯云后台查看
	$code = str_pad(mt_rand(10, 999999), 6, "0", STR_PAD_BOTH);//随机验证码
	$ssender = new SmsSingleSender($appid, $appkey);
	$params = [$code,1];
	$result = $ssender->sendWithParam('86',$phonenumbers,$templateid,$params,$smsSign,'','');
	$res = json_decode($result);
	if($res->result == 0){
		$status =1;
		$message = '发送成功';
	}else{
		$status = 0;
		$message = $res->errmsg;//如果错误获取接口错误内容
	}
	$arr=array(
		"status"=>$status, 
		"message"=>$message
	);
	$jarr=json_encode($arr); 
	echo $jarr;
	die();
}

在项目中使用时,请注意相关验证,我这里没有做,接下来添加wp_ajax动作

public function __construct() {

	add_action('wp_ajax_sms_send_action', array( $this, 'TopicNote_Sms_Send' ) );
	add_action('wp_ajax_nopriv_sms_send_action', array( $this, 'TopicNote_Sms_Send' ) );

}

四、jQuery操作

jQuery('.send-code').bind("click", function(e){
	ctrl = jQuery(this);
	$.ajax({
	    type: 'POST',
            dataType: 'json',
            url: Auth_Object.ajaxurl,//主题该地址的正确性
	    data: { 
		'action': 'sms_send_action', 
		"mobile": jQuery("#mobile").val(),
	},
	success: function(data){
		if (data.status == 0) {
			if (data.message) {
				new Noty({
					text: (data.message),
					type: 'error',
					layout: 'topLeft',
					timeout: 5000
					}).show();
				}
				return
			}else{
				new Noty({
					text: (data.message),
					type: 'success',
					layout: 'topLeft',
					timeout: 5000
				}).show();
			}
		}
	});
	e.preventDefault();
    });

我这儿的消息通知使用了Noty.js插件,相关文章请查看

笔记

一款jQuery通知插件Noty

2017-10-13227

五、新建页面模板

最后我们新建一个页面模板page-sms.php,内容如下

<?php 
/**
 * Template Name: 短信登录
 */
get_header();?>
<form id="tp_mobile" class="mobile-captcha" action="" method="post">
	<div class="form-group">
		<input id="mobile" class="input" name="mobile" type="text" placeholder="手机号" required />
	</div>
	<div class="form-group form-group-captcha">
		<div class="input-group">
			<input id="mobile_captcha" class="input" name="mobile_captcha" type="text" placeholder="验证码" required />
			<span class="captchaBtn send-code">获取验证码</span>
		</div>
	</div>
</form>
<?php get_footer();?>

访问页面即可,为了保证正常使用,这里需要注意ajax.url的路径。

六、阿里云短信与腾讯云短信对比

  1. 腾讯云SDK更精简
  2. 方便个人申请

写在最后

如果要实现wordpress登录注册,还需相关验证,以上代码仅仅是实现ajax发信。后期笔记会出一款wordpress手机登录注册插件或者在topic-ucenter插件中整合此功能,有需要的朋友可以关注一下

笔记

wordpress用户中心插件topic-ucenter

2019-04-03300