驗證碼可以在很大程度上防止機器注冊，惡意注冊等表單提交類型的攻擊。WordPress 沒有提供驗證碼機制，于是有很多插件為 WordPress 提供了驗證碼支持，對于普通用戶，直接安裝一個驗證碼插件就可以在 WordPress 站點上實現(xiàn)驗證碼功能了。而對于開發(fā)者來說，如果每個功能都用插件來實現(xiàn)，那安裝的插件就太多了，插件太多會拖慢網(wǎng)站的速度。很多負(fù)責(zé)任有追求的開發(fā)者會自己實現(xiàn)一個類似的功能。今天為大家介紹一個不用插件實現(xiàn)驗證碼的方法。

安裝 URL router 庫和生成驗證碼的庫并引入

使用 Gregwar Captcha 生成驗證碼的方法非常簡單，只需要實例化 CaptchaBuilder 類，新建一個對象就可以了。在下面的對象中，WordPress Dispatch 是我們用來創(chuàng)建請求網(wǎng)址的類庫。

require_once( dirname( __FILE__ ) . '/../vendor/autoload.php' );

use Gregwar\Captcha\CaptchaBuilder;
use TheFold\WordPress\Dispatch;

new Dispatch( [

	'captcha/([a-z0-9]+)' => function ( $request, $type ) {

        // 生成驗證碼
		$builder = new CaptchaBuilder;

        // 把生成的驗證碼寫入 WordPress 數(shù)據(jù)庫中，供第三步中驗證使用
		update_option( $type . '_captcha', $builder->getPhrase());
        
        // 輸出驗證碼
        header( 'Content-type: image/jpeg' );
		$builder->build()->output();

	},

] );

在表單中顯示生成的驗證碼，點擊圖片刷新驗證碼。

在前端顯示驗證碼的方法非常簡單，只需要把驗證碼圖片的 src 地址設(shè)置為我們上面新建的 URL 就可以了，網(wǎng)址中“captcha/”后面的字符串是驗證碼的類型，供區(qū)分不同的驗證碼使用。

<div class="form-group">
    <label for="re_password">驗證碼</label> <span class="text-msg"></span>
    <img alt="captcha" onclick="RefreshCode(this)" id="captcha_img" data-toggle="tooltip" title="<?php _e('點擊刷新驗證碼','wizhi'); ?>" src="<?= home_url('captcha/account'); ?>" />
    <input type="text" class="form-control" name="captcha" id="captcha" value="" placeholder="輸入右圖中的驗證碼, 點擊圖片刷新"/>
</div>

刷新驗證碼用到的 JacaScript 函數(shù)非常簡單，也就是當(dāng)用戶點擊圖片時，重新加載圖片，在這是給驗證碼圖片加上了一個隨機的字符串，防止緩存導(dǎo)致圖片不刷新。

<script>
function RefreshCode(obj){
    obj.src = obj.src + "?code=" + Math.random();
}
</script>

對比用戶提交的驗證碼和程序生成的驗證碼。

當(dāng)用戶提交表單的時候，我們獲取用戶提交過來的驗證碼，并和生成驗證碼時保存在數(shù)據(jù)庫中的驗證碼做對比，如果對比通過，則說明驗證碼正確，如果對比失敗，驗證碼錯誤，返回錯誤信息。

$account_captcha = $_POST[ 'captcha' ];
if ( ! strcasecmp( get_option( 'account_captcha' ), $account_captcha ) == 0 ) {
    //進行注冊操作
} else {
    $msg = [
         'registered' => false,
         'message' => __( '<p class="c-alert c-alert-danger" data-c-alert="c-alert">驗證碼錯誤.</p>', ' wizhi' ),
     ];
}

wp_send_json( $msg );

至此，使用 Gregwar Captcha 為 WordPress 表單添加驗證碼的方法就介紹完畢了，可以看出，整個過程中需要的代碼量非常小。如此，我們就可以把我們的精力集中在完善業(yè)務(wù)邏輯上了，花在業(yè)務(wù)邏輯上的時間多了，相信開發(fā)出來的程序 Bug 會少很多，使用起來會更加穩(wěn)定。