您的位置 首页 php

WordPress主题自定义注册登录表单中添加字符图片验证码

无论你是WordPress主题开发者还是想要对自己的网站进行二次开发,有时候我们需要在用户注册、登录的地方添加一个字符图片验证码来阻挡一些机器人暴力破解账户密码。

WordPress插件仓库里有很多这样的插件,但是基本上都是针对于WordPress自带的登录或者注册表单页面,而对于没有使用WordPress自身的注册登录表单,使用主题开发的注册登录功能的时候则安装了插件也不会有任何效果。

今天我们来讲讲针对于 WordPress主题自带的注册或登录表单模块如何添加字符图片验证码的功能 ,下面我们以在登录表单中添加验证码为示例,注册表单同理。

先上个示例效果演示

创建 captcha.php 字符图片验证码文件

我们的逻辑是使用php图像函数 imagecreate () 来创建图像,同时将生成的验证码写入session当中,然后在需要验证的页面中使用。

1、新建一个空白php文件,将下列代码复制到php文件中,保存并命名为captcha.php

 /**
 * 创建字符图片验证码
 * @Author   Jackie
 * @Author url   
 */
<?php
session_start();
getCode(4,60,20);

function getCode($num,$w,$h) {
	// 去掉了 0 1 O l 等容易产生混淆的字符
	$str = "23456789abcdefghijkmnpqrstuvwxyz";
	$code = '';
	for ($i = 0; $i < $num; $i++) {
		$code .= $str[mt_rand(0, strlen($str)-1)];
	}
	//将生成的验证码写入session,以备在验证页面中使用
	$_SESSION["captcha_code_char"] = $code; //验证码存储在session,键名为captcha_code_char
	//创建图片,定义颜色值
	Header("Content-type: image/PNG");
	$im = imagecreate($w, $h);
	$black = imagecolorallocate($im, mt_rand(0, 200), mt_rand(0, 120), mt_rand(0, 120));
	$gray = imagecolorallocate($im, 118, 151, 199);
	$bgcolor = imagecolorallocate($im, 235, 236, 237);

	//画背景
	imagefilledrectangle($im, 0, 0, $w, $h, $bgcolor);
	//画边框
	imagerectangle($im, 0, 0, $w-1, $h-1, $gray);
	//imagefill($im, 0, 0, $bgcolor);

	//在画布上随机生成大量点,起干扰作用;
	for ($i = 0; $i < 80; $i++) {
		imagesetpixel($im, rand(0, $w), rand(0, $h), $black);
	}
	//将字符随机显示在画布上,字符的水平间距和位置都按一定波动范围随机生成
	$strx = rand(3, 8);
	for ($i = 0; $i < $num; $i++) {
		$strpos = rand(1, 6);
		imagestring($im, 5, $strx, $strpos, substr($code, $i, 1), $black);
		$strx += rand(8, 14);
	}
	imagepng($im);
	imagedestroy($im);
}
?>  

2、将保存好的 captcha.php 文件复制粘贴或上传至你的 WordPress 主题根目录下 (wp-content\themes\你的主题名称\)

添加验证码显示和输入字段

首先我们要在主题文件中找到负责登录的表单代码,每个主题的登录表单名称和位置可能会不一样,一般情况下文件的名称都含有login,找到后用编辑器打开文件搜索 type=”password” ,这个是密码输入框,在这段代码下方我们添加下面代码:

 /**
 * 添加验证码显示及输入框
 * @Author   Jackie
 * @Author url   
 */
//input 验证码输入字段,设置属性 name="code"
<input class="captcha-input" type="text" name="code" placeholder="验证码" autocomplete="off"/>
//创建并显示验证码图片
<img src="<?php%20bloginfo("template_url");?>/captcha.php?<?php echo rand();?>" class="captcha-code" title="看不清,点击换一张"/>  

后端校验验证码

注册或登录表单一般是以form表单POST数据,后端验证登录操作代码部分一般包含wp_signon()函数,可以通过编辑器代码搜索找此函数位置,我们这里以Verdure主题为例,其他主题类推。

我们在验证登录的代码部分添加以下验证验证码的代码:

 /**
 * 验证码提交验证
 * @Author   Jackie
 * @Author url   
 */
session_start();
// 通过POST过来的验证码对比session存储的captcha_code_char键值来判断
if(empty($_POST['code']) || empty($_SESSION['captcha_code_char']) || trim(strtolower($_POST['code'])) != $_SESSION['captcha_code_char']){
        echo '验证码不正确'; //返回数据根据实际情况修改
        exit();
	}  

以上就是如何在WordPress主题自定义注册或登录表单中添加字符图片验证码多方法,这里仅作逻辑方法讲解,根据实际使用的主题不同,以上代码部分可能需要修改以适配主题,css美化部分这里就不说了,自己美化一下就可以了。

文章来源:智云一二三科技

文章标题:WordPress主题自定义注册登录表单中添加字符图片验证码

文章地址:https://www.zhihuclub.com/79110.shtml

关于作者: 智云科技

热门文章

网站地图