如何使用ThinkPHP6實作驗證碼功能

在網站或應用程式的登入、註冊、找回密碼等登入認證系統當中，驗證碼功能已成為常見的一種使用者驗證方式。驗證碼功能能夠有效防止惡意攻擊和機器人攻擊，保護使用者資料和系統安全。本文將介紹如何使用ThinkPHP6框架實作驗證碼功能。

一、ThinkPHP6驗證碼功能介紹

ThinkPHP6框架中的驗證碼功能可以透過使用thinkcaptchaCaptcha類別來實現。這類提供了許多選項，可以設定驗證碼的長度、字型、字號、幹擾線類型、幹擾點類型等等。這些選項可以讓我們客製化自己的驗證碼，滿足具體業務場景的需求。

二、實作步驟

1. 安裝ThinkPHP6框架

在本機環境中配置好PHP環境後，可以使用composer安裝ThinkPHP6框架。在命令列中輸入以下命令：

composer create-project topthink/think myproject

這會建立一個名為myproject的專案目錄，並自動安裝和初始化專案所需的所有依賴項。

2. 建立驗證碼方法

在ThinkPHP6框架中，我們可以在控制器中定義驗證碼方法。例如，我們可以在Index控制器中建立一個verify方法。這個方法可以接受一個參數，用於指定驗證碼的長度，程式碼如下：

namespace appindexcontroller;

use thinkcaptchaCaptcha;

class Index
{
    public function verify($length = 4)
    {
        $captcha = new Captcha([
            'length'    =>  $length,
            'useNoise'  =>  true,
            'fontSize'  =>  30,
            'useCurve'  =>  false,
        ]);
        return $captcha->entry();
    }
}

在上面的程式碼中，我們使用了Captcha類別來產生驗證碼。我們傳遞了一些參數來指定驗證碼的長度、是否使用乾擾線或乾擾點等設定。

3. 顯示驗證碼

在上面的控制器程式碼中，我們使用$captcha->entry()方法來顯示驗證碼。這個方法將會產生一張圖片，並在瀏覽器上直接輸出圖片。

我們可以在範本或檢視檔案中建立一個img元素，將它的src屬性設定為我們在步驟2中建立的驗證碼方法的URL，即可在前端頁面上顯示驗證碼了。程式碼如下：

<img src="{:url('index/verify', ['length'=>4])}" onclick="this.src=this.src+'?rand='+Math.random()" />

在上面的程式碼中，我們使用url函數產生驗證碼圖片的URL，並將長度設定為4，在點擊圖片時重新載入驗證碼圖片，以更新驗證碼。

4. 校驗驗證碼

我們可以在提交表單資料時，使用PHP的session機制來取得使用者輸入的驗證碼，然後與產生的驗證碼進行比較來校驗驗證碼是否正確。程式碼如下：

namespace appindexcontroller;

use thinkcaptchaCaptcha;

class Index
{
    public function verify($length = 4)
    {
        $captcha = new Captcha([
            'length'    =>  $length,
            'useNoise'  =>  true,
            'fontSize'  =>  30,
            'useCurve'  =>  false,
        ]);
        return $captcha->entry();
    }
    
    public function check()
    {
        $code = input('post.captcha');
        if(captcha_check($code)){
            // 验证码正确
        }else{
            // 验证码错误
        }
    }
}

在上面的程式碼中，我們定義了一個check方法，用於校驗使用者輸入的驗證碼。我們使用captcha_check()函數來比較使用者輸入的驗證碼和產生的驗證碼是否相等。

5. 驗證碼刷新功能

有時我們需要在使用者輸入驗證碼錯誤的情況下，提供刷新驗證碼的功能，以便使用者更快地通過驗證。我們可以透過簡單地刷新頁面，或透過修改驗證碼圖片的URL來實現這項功能。

在前端頁面上，在驗證碼圖片的元素中加入一個刷新按鈕，點擊該按鈕可以重新載入驗證碼圖片，以更新驗證碼。程式碼如下：

<img id="captcha" src="{:url('index/verify', ['length'=>4])}" onclick="this.src=this.src+'?rand='+Math.random()" />
<button onclick="document.getElementById('captcha').src='{:url('index/verify', ['length'=>4])}?' + Math.random(); return false;">刷新验证码</button>

在上面的程式碼中，我們使用JavaScript程式碼修改驗證碼圖片的src屬性，並將其中的Math.random()函數作為參數傳遞給url函數。這樣每次刷新都會產生一個新的URL，以重新載入驗證碼。

6. 完整範例程式碼

上面的程式碼片段可能不夠完整，以下是使用ThinkPHP6實作驗證碼功能的完整程式碼。

namespace appindexcontroller;

use thinkcaptchaCaptcha;

class Index
{
    // 验证码函数
    public function verify($length = 4)
    {
        $captcha = new Captcha([
            'length'    =>  $length,
            'useNoise'  =>  true,
            'fontSize'  =>  30,
            'useCurve'  =>  false,
        ]);
        return $captcha->entry();
    }
    
    // 验证码校验函数
    public function check()
    {
        $code = input('post.captcha');
        if(captcha_check($code)){
            // 验证码正确
        }else{
            // 验证码错误
        }
    }
}

<!-- 登录表单页面 -->
<form method="post" action="{:url('index/check')}">
    <div>
        <label>用户名</label>
        <input type="text" name="username" />
    </div>
    <div>
        <label>密码</label>
        <input type="password" name="password" />
    </div>
    <div>
        <label>验证码</label>
        <img id="captcha" src="{:url('index/verify', ['length'=>4])}" onclick="this.src=this.src+'?rand='+Math.random()" /><br/>
        <input type="text" name="captcha" />
        <a href="#" onclick="document.getElementById('captcha').src='{:url('index/verify', ['length'=>4])}?' + Math.random(); return false;">刷新验证码</a>
    </div>
    <button type="submit">登录</button>
</form>

以上就是使用ThinkPHP6實作驗證碼功能的全流程。如果你正在開發網頁應用程式或網站，那麼使用驗證碼功能可以提高系統的安全性，並且保護使用者資料免受惡意攻擊。

以上是如何使用ThinkPHP6實作驗證碼功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！