
博客公众号引流的方法,其中就包括使用关键词回复获取密码的插件,不过那个插件的验证码是站长手动输入的,今天给大家推荐的这款是自动生成和获取验证码,实现验证码自动更换引流的功能。
实现原理:
WordPress真微信公众号验证码查看插件
看到标题的时候,很多人应该就会说这个功能已经好长时间就有了,为什么还发这个文章呢? 云落肯定不至于把以前的功能拿过来写的,今天写的是不是一个真正的公众号验证码查看功能,是一个睡床上的时候想到的一个功能。
思路
这里先简单说一下这个设计思路,公众号验证码可见首先我们要设计一个验证码,这个验证码必须是唯一,并且是有过期时间的,从这一点来说,目前网上流传这些公众号验证码可见功能其实是假的,因为这个验证码是人工设置的,是一个固定的字符,使用一次之后就会知道。
首先想到的方法是采用一个公共的验证码池,就是一次性生成一些验证码,然后放在一个txt文件里面,然后去随机调用,读取文件之后组成数组,然后从数组中调出验证码,这个方法实现之后,然后经过思考了下,发现虽然能实现我需要的功能,但是没法用,毕竟这样等于验证码直接公开了,所以这个方法被淘汰了,又重新设计了另一个验证码方法。
验证码设计
重新设计的验证码方案是基于时间,域名和微信token的,时间上以1个小时为单位,那么有60分钟,每分钟对应一个验证码,就是有60个,比如13-12,分钟就是12,那么验证码可以简单的设为12,如果需要每2分钟换一次验证码,当前分钟数除以2就可以了,以此类推。将网站域名和当前分钟拼接字符串,比如拼接成12https://gitcafe.net,再加上微信公众号token拼接成【12https://gitcafe.netweixintoken】,稍后对其加密计算,使用Sha1方法,计算出来是40位的字符串,我们截取其中6位作为验证码,这个时候再加入日期,比如今天是2-18,那么就从第18个截取6为字符串,保证一个月30天验证码不发生重复,最终这个6位字符串作为验证码可以发送到微信公众号以及用来验证网页输入的验证码是否正确。
验证码设计OK了,下面就是连接微信公众号了,在公众号示例代码基础上稍微改改,只保留微信类,其他代码全部不要,试验一下,OK,没问题。
微信端好了,然后就是WordPress端了,这里我要吐槽一下网上流行的那个微信公众号验证码可见的代码了,那么多时间还是一个原生的表单提交,而且是刷新之后会重复提交的。云落这里稍微改下,改为ajax提交实际体验会好些。
本文代码不重要,重要的是验证码设计思路,后面需要使用验证码的地方也可以这样设计,另外这种验证码有一个小缺点,就是过期时间并不是从验证码生成之后开始计算的,是验证码随着时间过期的,所以如果你在59秒时获取到验证码就会立马失效,当然这个只是小缺点,不妨碍使用,过期验证码重新申请就可以了。
插件说明
因为是非常简单的插件,所以就没有后台,在插进里面有两个常量,自己定义下,一个是微信token,一个是公众号二维码图片,插件就一个文件打开一看就明白,另外说明下,Js代码使用Jquery的
另外一个就是管理员是没有效果的,管理员需要查看的话,需要退出账号看下
代码:
插件代码如下:
<?php /* Plugin Name: 微信公众平台验证码查看插件 Plugin URI: https://gitcafe.net/ Description: 微信公众平台验证码可见插件,接口地址为:域名?wxcaptcha ,其实随便 Version: 1.0 Author: 云落 Author URI: https://gitcafe.net/ */ // 此token必须和微信公众平台中的设置保持一致 define('WX_TOKEN', ''); define('WX_QR', '');//公众号二维码 // 以下内容不需要改动 /*** 微信端开始 ***/ class Wechat_Captcha { function __construct($wx_captcha) { $this->captcha = $wx_captcha; } private function checkSignature() { $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"]; $token = WX_TOKEN; $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr, SORT_STRING); $tmpStr = implode($tmpArr); $tmpStr = sha1($tmpStr); if ($tmpStr == $signature) return true; else return false; } protected function valid() { $echoStr = $_GET["echostr"]; //valid signature , option if ($this->checkSignature()) { echo $echoStr; exit; } else { echo 'error signature'; } } public function responseMsg() { //如果是验证请求,则执行签名验证并退出 if (!empty($_GET["echostr"])) { $this->valid(); //验证签名是否有效 return; //返回退出 } if ($_SERVER['REQUEST_METHOD'] != 'POST') { echo ''; return; } //如果不是验证请求,则 //首先,取得POST原始数据(XML格式) //$postData = $GLOBALS["HTTP_RAW_POST_DATA"]; $postData = file_get_contents('php://input'); if (empty($postData)) { echo ''; return; } //如果没有POST数据,则退出 if (!empty($postData)) { //解析POST数据(XML格式) $object = simplexml_load_string($postData, 'SimpleXMLElement', LIBXML_NOCDATA); $messgeType = trim($object->MsgType);//取得消息类型 $this->fromUser = "" . $object->FromUserName; $this->toUser = "" . $object->ToUserName; $keyword = trim($object->Content); if( $messgeType == 'text' && $keyword == '验证码') { $response_content = '您的验证码为:【'.$this->captcha.'】,验证码有效期为2分钟,请抓紧使用,过期需重新申请'; $xmlTemplate = "<xml> <ToUserName><![CDATA[%s]]></ToUserName> <FromUserName><![CDATA[%s]]></FromUserName> <CreateTime>%s</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[%s]]></Content> <FuncFlag>%d</FuncFlag> </xml>"; $xmlText = sprintf($xmlTemplate, $this->fromUser, $this->toUser, time(), $response_content, 0); echo $xmlText; } } else { echo ""; exit; } } } //class end //生成微信验证码 function wx_captcha(){ date_default_timezone_set('Asia/Shanghai'); $min = floor(date("i")/2); $day = date("d"); $day = ltrim($day,0); $url = home_url(); $captcha = sha1($min.$url.WX_TOKEN); $captcha = substr($captcha , $day , 6); return $captcha; } function wx_process() { global $object; $object = new Wechat_Captcha(wx_captcha()); $object->responseMsg(); return; } add_action('pre_get_posts', 'wx_process', 4); /*** 微信端结束 ***/ /*** WP端开始 ***/ //密码可见 function wx_captcha_view() { $action = $_POST['action']; $post_id = $_POST['id']; $pass = $_POST['pass']; $wxcaptcha = wx_captcha(); if(!isset( $action ) || !isset( $post_id ) || !isset( $pass ) ) exit('400'); if($pass == $wxcaptcha ) { $pass_content = get_post_meta($post_id, '_pass_content')[0]; exit($pass_content); }else{ exit('400'); } } add_action('wp_ajax_nopriv_gdk_pass_view', 'wx_captcha_view'); add_action('wp_ajax_gdk_pass_view', 'wx_captcha_view'); // 部分内容输入密码可见 function gdk_secret_view($atts, $content = null) { $pid = get_the_ID(); add_post_meta($pid, '_pass_content', $content, true) or update_post_meta($pid, '_pass_content', $content); if ( current_user_can( 'administrator' ) ) { return $content; }//admin show return '<link rel="stylesheet" id="pure_css-css" href="https://cdn.jsdelivr.net/npm/css-mint@2.0.7/build/css-mint.min.css?ver=0.0.1" type="text/css"/> <div class="cm-grid cm-card pass_viewbox"> <div class="cm-row"> <div class="cm-col-md-4"> <img src="'.WX_QR.'" class="cm-resp-img"> </div> <div class="cm-col-md-8"> <div class="hide_content_info" style="margin:10px 0"> <div class="cm-alert primary">本段内容已被隐藏,您需要扫码关注微信公众号申请验证码查看,发送【验证码】获取验证码,验证码2分钟有效</div> <input type="text" id="pass_view" placeholder="输入验证码并提交" style="width:70%"> <input id="submit_pass_view" class="cm-btn success" data-action="gdk_pass_view" data-id="'.$pid.'" type="button" value="提交"> </div> </div> </div> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.1.0/dist/jquery.min.js?ver=2.1"></script> <script> function show_hide_content(a, b) { $(a).hide(); $(a).after("<div class=\"cm-alert success\">" + b + "</div>"); } /** * 点击开启密码可见 */ $("#submit_pass_view").click(function () { var ajax_data = { action: $("#submit_pass_view").data("action"), id: $("#submit_pass_view").data("id"), pass: $("#pass_view").val() }; $.post("'.admin_url( 'admin-ajax.php' ).'", ajax_data, function (c) { c = $.trim(c); if (c !== "400") { show_hide_content(".pass_viewbox", c); localStorage.setItem("gdk_pass_" + ajax_data["id"], c); /**隐藏内容直接存入浏览器缓存,下次直接读取,ps.有个问题,内容更新会略坑,不管了 */ } else { alert("您的密码错误,请重新申请"); } }); }); /** * 已经密码可见的自动从浏览器读取内容 * 并显示,这里加个延时处理 */ (function () { if ($("#submit_pass_view").length > 0) { /**如果网站有密码可见,就执行 */ setTimeout(function () { var id = "gdk_pass_" + $("#submit_pass_view").data("id"), length = localStorage.length; for (var i = 0; i < length; i++) { var key = localStorage.key(i), value = localStorage.getItem(key); if (key.indexOf(id) >= 0) { /*发现目标 */ show_hide_content(".pass_viewbox", value); break; } } }, 900); } }()); /**密码可见end */ </script> '; } add_shortcode('wxcaptcha', 'gdk_secret_view'); //按钮 function wx_captcha_btn() { ?> <script type="text/javascript"> QTags.addButton( 'wxcaptcha', '微信公众号验证码可见', '[wxcaptcha]', '[/wxcaptcha]\n' );//快捷输入标签 </script> <?php } add_action('after_wp_tiny_mce', 'wx_captcha_btn'); /*** WP端结束 ***/
需要配置的地方为以下两处:
// 此token必须和微信公众平台中的设置保持一致 define('WX_TOKEN', ''); define('WX_QR', '');//公众号二维码 一个是wx_token,在微信公众号管理后台可以获取,另外一个就是你公众号的二维码图片地址。
使用方法:
1、下载并安装插件
2、修改插件的wx_token和wx_qr的值。
3、发文章使用短代码[wxcaptcha]和[/wxcaptcha]把需要隐藏的内容包裹起来。
作者发布地址:
下载地址: