使用PHP实现的随机验证码隐藏文章内容

2020-08-04

前言

前段时间给小站加了个直播源下载页面。顺带想了想：诶，加个验证码隐藏内容可能会好些罢？不管是防爬虫还是防小人，亦或者是单纯好看些。

到网上去找了找，大多数运行于WordPress的验证码插件/代码，都是在诸如用户注册，用户登录，评论区等地方出现，这和我们的需求不大符合。没关系，我们可以自己写

生成验证码

参考了这篇博文，使用PHP生成一个具有六位字母数字的验证码图片，完整代码如下：

//生成验证码专用API，保存为yzm.php

<?php

    $string = str_split("abcdefghijklmnopqrstuvwxyz0123456789");
    $str = "";
    for($i=0;$i<6;$i++)
    {
        $pos = rand(0,35);
        $str .= $string[$pos];
    }
    
    session_start();
    $_SESSION['img_number'] = $str;
    $img_handle = Imagecreate(80, 20);  //图片大小80X20
    $back_color = ImageColorAllocate($img_handle, 255, 255, 255); //背景颜色（白色）
    $txt_color = ImageColorAllocate($img_handle, 0,0, 0);  //文本颜色（黑色）
    
    //加入干扰线
    for($i=0;$i<3;$i++)
    {
        $line = ImageColorAllocate($img_handle,rand(0,255),rand(0,255),rand(0,255));
        Imageline($img_handle, rand(0,15), rand(0,15), rand(100,150),rand(10,50), $line);
    }
    //加入干扰像素
    for($i=0;$i<200;$i++) 
    {
        $randcolor = ImageColorallocate($img_handle,rand(0,255),rand(0,255),rand(0,255));
        Imagesetpixel($img_handle, rand()%100 , rand()%50 , $randcolor);
    }
    Imagefill($img_handle, 0, 0, $back_color);             //填充图片背景色
    ImageString($img_handle, 28, 10, 0, $str, $txt_color); //水平填充一行字符串

    ob_clean();   // ob_clean()清空输出缓存区    
    header("Content-type: image/png"); //生成验证码图片    
    Imagepng($img_handle);//显示图片

?>

保存之后，在浏览器里面访问这个文件，就可以看到验证码了

显示与输入验证码

用Notepad2打开function.php，在文件头部的“<?php”标签之后加入：

//图中有一些要修改的，已经用【】括起来，请注意

add_action ('wp_loaded', 'initSession' );

function initSession(){ 
    if( !session_id() ){
        session_start();
    }
} 

//-----------------------------------------------------------
function e_secret($atts, $content=null){
    if(isset($_SESSION['img_number']) && $_POST['e_secret_key'] == $_SESSION['img_number'])
    {
        return '<div class="e-secret" id="eallsecret">'.$content.'</div>';
    }
    else
    {
        return '<form class="e-secret" action="'.get_permalink().'#eallsecret'.'" method="post" name="e-secret">
        <label class="e_secret_lab">输入图中验证码查看内容：</label>
        <br>
        <img src="【刚刚做好的ymz.php的路径】" style="width:300px;">
        <input type="text" name="e_secret_key" class="euc-y-i" maxlength="50">
        <input type="submit" class="euc-y-s" value="确定">
        <div class="euc-clear"></div>
        </form>';
    }
}
add_shortcode('yzm','e_secret');


function secret_css() {
global $post,$posts;
foreach ($posts as $post) {
if ( has_shortcode( $post->post_content, 'yzm') ){
 echo '<style type="text/css">.e-secret {margin: 20px 0;padding: 20px;background: #f8f8f8;overflow: auto;}.e-secret input.euc-y-i[type="text"] {float: left;bacground: #fff;width: 100%;line-height: 36px;margin-top: 5px;border-radius: 3px;}.e-secret input.euc-y-s[type="submit"] {float: right;margin-top: -47px;width: 30%;margin-right: 1px;border-radius: 0 3px 3px 0;}input.euc-y-s[type="submit"]{background-color:#FF0016;color:#fff;font-size:21px;box-shadow:none;-webkit-transition: .4s;-moz-transition: .4s;-o-transition: .4s;transition:.4s;-webkit-backface-visibility:hidden;position:relative;cursor:pointer;padding: 13px 20px;text-align: center;border-radius: 50px;-webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;border: 0;height: auto;outline: medium;line-height: 20px;margin: 0;}input.euc-y-s[type="submit"]:hover{background-color:#CE0416;}input.euc-y-i[type="text"],input.euc-y-i[type="password"]{border:1px solid #F2EFEF;color:#777;display:block;background: #FCFCFC;font-size:18px;transition:all .5s ease 0;outline:0;box-sizing:border-box;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;padding:5px 16px;    margin: 0;height: auto;line-height: 30px;}input.euc-y-i[type="text"]:hover,input.euc-y-i[type="password"]:hover{border:1px solid #56b4ef;box-shadow:0 0 4px #56b4ef</style>';


}}

}

add_action('wp_head', 'secret_css');

并保存。

测试

在使用当中，只需要在文章/页面中，插入如下的代码即可：

注意：实际使用时，【和】请替换为英文中括号！！！

【yzm】

.......要输入验证码才能看的内容......

【/yzm】

例如：

[yzm]

这里是输入了验证码才能看的内容

[/yzm]

这样，就实现了用验证码来隐藏文章内容的效果