在 EyouCMS 的表單提交前添加驗(yàn)證碼是一個(gè)非常有效的防垃圾留言和惡意提交的安全措施。操作主要分為兩大步:1. 后臺(tái)開(kāi)啟并配置驗(yàn)證碼功能;2. 在前端表單中插入驗(yàn)證碼顯示和驗(yàn)證代碼。

以下是詳細(xì)的步驟。
這是最標(biāo)準(zhǔn)、最兼容的方法,EyouCMS 已內(nèi)置了強(qiáng)大的驗(yàn)證碼功能。
登錄 EyouCMS 后臺(tái)。
根據(jù)你的表單類(lèi)型,找到對(duì)應(yīng)設(shè)置位置:
如果是留言板表單:
進(jìn)入 系統(tǒng) -> 系統(tǒng)設(shè)置 -> 安全與效率。
找到 驗(yàn)證碼設(shè)置 區(qū)域。
在 留言板驗(yàn)證碼 選項(xiàng)中,選擇 開(kāi)啟。
重要: 你還可以開(kāi)啟 驗(yàn)證碼重疊度 和 驗(yàn)證碼加密串 來(lái)增強(qiáng)安全性。
如果是自由表單:
進(jìn)入 系統(tǒng) -> 自由表單 -> 管理表單。
點(diǎn)擊你想要編輯的表單的 設(shè)置 按鈕。
在表單配置中,尋找 是否開(kāi)啟驗(yàn)證碼 的選項(xiàng),將其開(kāi)啟并保存。
你需要編輯顯示表單的模板文件(如 message.Html或你的自由表單模板)。
在 <form>表單內(nèi)部,提交按鈕之前, 添加以下代碼:
代碼解釋?zhuān)?/strong>
<input name="verify">: 這個(gè)輸入框的名稱 必須 是 verify,因?yàn)橄到y(tǒng)會(huì)驗(yàn)證這個(gè)字段。
<img src="{:url('/api/ajax/verify')}">: 這是調(diào)用 EyouCMS 生成驗(yàn)證碼圖片的接口。
onclick="this.src='...': 這是一小段 Javascript 代碼,實(shí)現(xiàn)點(diǎn)擊驗(yàn)證碼圖片即可刷新的功能,非常用戶友好。
<form action="{:url('/api/index/message')}" method="post">
<input type="text" name="username" placeholder="您的姓名" required>
<input type="tel" name="phone" placeholder="聯(lián)系電話" required>
<!-- 添加驗(yàn)證碼區(qū)域 -->
<div class="form-group">
<label>驗(yàn)證碼</label>
<input type="text" name="verify" placeholder="輸入驗(yàn)證碼" required>
<img src="{:url('/api/ajax/verify')}" onclick="this.src='{:url('/api/ajax/verify')}?tm='+Math.random();" alt="驗(yàn)證碼" style="cursor: pointer;">
</div>
<button type="submit">提交留言</button>
</form>至此,EyouCMS 自帶驗(yàn)證碼功能已添加完畢。 系統(tǒng)會(huì)自動(dòng)在后臺(tái)驗(yàn)證用戶輸入的驗(yàn)證碼是否正確,無(wú)需你編寫(xiě)額外的驗(yàn)證邏輯。
如果需要更強(qiáng)的安全性(如滑動(dòng)拼圖、點(diǎn)選文字等交互式驗(yàn)證),可以使用第三方服務(wù)。這里以免費(fèi)易用的 Vaptcha 或 極驗(yàn) 為例,簡(jiǎn)述流程。
注冊(cè)并獲取ID:前往 Vaptcha 或極驗(yàn)官網(wǎng)注冊(cè)賬號(hào),創(chuàng)建驗(yàn)證單元,獲取 VID和 Key。
引入JS庫(kù):在你的表單模板頁(yè)面頭部引入第三方驗(yàn)證碼的 JavaScript 庫(kù)。
放置容器:在表單中放置一個(gè)用于顯示驗(yàn)證碼的容器 <div>。
前端驗(yàn)證:配置驗(yàn)證碼,并在驗(yàn)證通過(guò)后,將得到的 token填入一個(gè)隱藏域。
后端驗(yàn)證:修改 EyouCMS 的表單處理邏輯(通常需要二次開(kāi)發(fā)),在提交時(shí)向第三方服務(wù)器驗(yàn)證 token的有效性。
<!-- 1. 引入Vaptcha的JS SDK --> <script src="https://cdn.vaptcha.com/v3.js"></script> <form action="{:url('/api/index/message')}" method="post" id="myForm"> <input type="text" name="username" placeholder="姓名" required> <!-- 2. 驗(yàn)證碼容器 --> <div id="vaptchaContainer" style="width: 300px;height: 36px;"> <div class="vaptcha-init-main"> <div class="vaptcha-init-loading"></div> </div> </div> <!-- 3. 用于存放驗(yàn)證成功后token的隱藏域 --> <input type="hidden" name="vaptcha_token" id="vaptchaToken" value=""> <button type="submit">提交</button> </form> <script> // 4. 初始化Vaptcha vaptcha({ vid: '你的VID', // 替換成你的VID container: '#vaptchaContainer', area: 'auto' }).then(function (vaptchaObj) { vaptchaObj.render(); // 渲染驗(yàn)證碼 // 監(jiān)聽(tīng)驗(yàn)證成功事件 vaptchaObj.listen('pass', function() { // 驗(yàn)證通過(guò)后,將token設(shè)置到隱藏域 document.getElementById('vaptchaToken').value = vaptchaObj.getToken(); }); // 監(jiān)聽(tīng)表單提交,可在此進(jìn)行額外驗(yàn)證 document.getElementById('myForm').addEventListener('submit', function(e) { if (!vaptchaObj.getToken()) { alert('請(qǐng)完成驗(yàn)證碼驗(yàn)證!'); e.preventDefault(); // 阻止表單提交 } }); }); </script>
注意: 方法二需要你具備一定的二次開(kāi)發(fā)能力,以修改 EyouCMS 的提交接口,使其能處理第三方驗(yàn)證碼的驗(yàn)證請(qǐng)求。對(duì)于大多數(shù)用戶,方法一(使用系統(tǒng)自帶驗(yàn)證碼) 已經(jīng)完全足夠。
方法 | 優(yōu)點(diǎn) | 缺點(diǎn) | 適用場(chǎng)景 |
|---|---|---|---|
EyouCMS 自帶驗(yàn)證碼 | 配置簡(jiǎn)單、穩(wěn)定、無(wú)需付費(fèi),與系統(tǒng)無(wú)縫集成。 | 是傳統(tǒng)圖片驗(yàn)證碼,可能被高級(jí)機(jī)器識(shí)別。 | 絕大多數(shù)場(chǎng)景的首選,有效防御普通垃圾提交。 |
第三方驗(yàn)證碼服務(wù) | 安全性極高,用戶體驗(yàn)好(如滑動(dòng)驗(yàn)證),能有效防御機(jī)器批量操作。 | 配置復(fù)雜,需要二次開(kāi)發(fā),免費(fèi)版有調(diào)用次數(shù)限制。 | 對(duì)安全性要求極高的場(chǎng)景,如注冊(cè)、支付等。 |
給你的建議:
直接使用 方法一,即開(kāi)啟 EyouCMS 自帶的驗(yàn)證碼功能。它已經(jīng)能攔截 99% 的垃圾信息,且配置非常簡(jiǎn)單,是性價(jià)比最高的選擇。
標(biāo)簽:
本文鏈接:http://m.373753.com/xinwendongtai/2093.html
版權(quán)聲明:站內(nèi)所有文章皆來(lái)自網(wǎng)絡(luò)轉(zhuǎn)載,只供模板演示使用,并無(wú)任何其它意義!