异想天开

What's the true meaning of light, Could you tell me why

自己动手写一个wordpress登录验证码插件

日期:2013-12-29 18:21:23
  
最后更新日期:2016-11-27 11:25:42
【技术文章,非码农误入】
最后更新日期: 2014-9-15
wordpress后台登录是没有验证码的,如果喜欢捣鼓的话,可以自己写一个类似插件,当然怕麻烦可以去下载一个。因为我对web方面不是很了解,纯粹抱着好玩,捣鼓,瞎折腾的心态开始了这个插件。耗时3小时完成。
1.搭建一个本地环境。直接官网下载wordpress压缩程序,解压。放在wamp的www目录下。
2.将你的wordpress备份在本地。将用到的插件的目录和主题的目录ftp下来。
3.在pluins目录新建一个目录,取个名字wp-checkcode。这个里面可以放插件的php文件。
4.新建一个php文件。里面包含版本信息,这样就会在后台显示出来。
[code lang="cpp"]
<!--?php
/* Plugin Name: checkcode
Plugin URI:
Description: 此插件将在登录验证框下面有验证码功能
Version: 1.0
Author: bianzhuang
Author URI: /
License: GPL */
?-->
[/code]
这样在后台看到为:
Image1
5.编写插件的一般方法,add_action 和 add_filter 这两个函数,这两个功能都是注册回调函数,字面意思也可以区分,action是对操作而言,filter是对内容的过滤。第二个有点类似windows的钩子函数一样,你处理完后继续传给下一个钩子。我用到的类:
[code lang="cpp"]
<?php
/*
Plugin Name: checkcode
Plugin URI:
Description: 此插件将在登录验证框下面有验证码功能
Version: 1.0
Author: bianzhuang
Author URI: /
License: GPL
*/


class CheckCode {
protected $pluginDir = 'wp-checkcode';

function CheckCode_login(){
echo '<tr>';
echo '<td align="right" valign="top"> 验证码:</td>';
$getcode_url = plugins_url($this->pluginDir.DIRECTORY_SEPARATOR.'getcode.php');
//echo '<td>'.$getcode_url.'<td>';
echo '<td><img src="'.$getcode_url.'?rand='.rand().'" id=\'captchaimg\'><br>';

echo '<label for=\'message\'>请输入上面的验证码 :</label>';
echo '<br>';
echo '<input id="6_letters_code" name="6_letters_code" type="text">';
echo '<br>';
echo ' 无法读图片吗?点击 <a href=\'javascript: refreshCaptcha();\'>here</a> 刷新';
echo ' </p></td>';
echo ' </tr>';
}

function checkcode_login_check($url)
{
session_start();
if(isset($_POST['wp-submit'])){
if(empty($_SESSION['6_letters_code'] ) ||
(strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0))
{
$msg="验证码失败!";
echo $msg;
echo $_SESSION['6_letters_code'];
blog_clear_auth_cookie();
//echo $_SERVER["REQUEST_URI"];
//exit;
return $_SERVER["REQUEST_URI"];
}else{
//验证码验证正确,这里放验证成功后的代码
echo $url;
//exit;
return $url;
}
}
else
return $url;
}

public function WpCheckCodeJs() {
$js_url = plugins_url($this->pluginDir.DIRECTORY_SEPARATOR.'WpCheckCode.js');
echo '<script type="text/javascript" src="'.$js_url.'" ></script>';
}

}

$checklogin = new CheckCode ;

add_action('login_form',array($checklogin,'CheckCode_login'));

add_action('blog_print_scripts', array($checklogin,'WpCheckCodeJs'));

add_filter('login_redirect', array($checklogin,'checkcode_login_check'), 10, 3);


?>
[/code]
6.生成验证码getcode.php
这段代码网上找的,大意就是用选择的字体来生成随机的字符串图片,并将该字符串存放在后台。同时将该图片传回来。对于这点,这是浏览器和http服务器进行http通信的一次过程,http服务器的cgi程序,也就是php解释器会用一个sessionid来标识这次会话过程,用户在浏览器的时候没有登录的,所以http服务器根据sessionid来区分会话,同次会话可以包含多次浏览网页。知道了这些,也可以来弄一个简易的支持session功能的服务器和浏览器了。

7.js代码
这里用到一个js代码,就是你点击后,这个js会更改dom对象的源地址,然后浏览器会重新向getcode.php发送一个请求。
最终效果图如下:

Image
8.最后
这个插件很简单,但是你可以慢慢来,当然简单,并不意味着做起来很快,你可能会遇到一些你不知道的东西,解决不知道的东西就看你自己的办法了。主要是有一颗爱捣鼓和爱折腾的心。若身边有这方面的行家的话你是要顺利不少的。

补:
今天补充了下,后台看到这篇文章经常被搜索,那么有责任完善下这篇文章。需要注意的是验证码图片需要安装php-gd,在linux下只需要:
[code lang="cpp"]
1.确定php编译了gd模块没有
<?php
phpinfo();
?>
2.若没有则需要安装
yum -y install php-gd
3.测试gd模块安装正确,这个例子来自php manual。显示图片,则表示安装好了
<?php
header("Content-type: image/png");
$im = @imagecreate(100, 50)
or die("Cannot Initialize new GD image stream");

$background_color = imagecolorallocate($im, 255, 255, 255);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, "A Simple Text String", $text_color);
imagepng($im);
imagedestroy($im);
?>
[/code]

整个插件包下载,getcode.php代码抄袭自参考1。由于本站的带宽不多,这里提供百度网盘的下载地址:
http://pan.baidu.com/s/1qWkDsPQ
注意这里的字体文件也是直接放自己的主机上面,最好的办法应该是用google的在线字体,相当于人家给你提供cdn。
参考:
1.wordpress登录插件