使用 HTML、CSS 和 JavaScript 創建 CAPTCHA 驗證表單
驗證碼是網站安全不可或缺的一部分。人們每天在線完成數百萬次驗證碼測試。
如果您沒有在您的網站上實施驗證碼驗證，則很可能會讓您面臨重大漏洞，並使您的網站容易受到垃圾郵件實體的惡意攻擊。
以下是驗證碼的全面概述，包括有關使用 HTML、CSS 和 JavaScript 實現驗證碼的信息。這些知識將為您提供將 CAPTCHA 功能合併到 Web 應用程序中所需的所有詳細信息。
什麼是驗證碼?
CAPTCHA 代表“完全自動化的公共圖靈測試來區分計算機和人類”，由 Luis von Ahn、Manuel Blum、Nicholas J. Hopper 和 John Langford 首次提出，作為在網站上區分人類和計算機的一種手段。挑戰-響應格式。
驗證碼機制通過提出挑戰來增強網站安全性，這些挑戰對於自動化網絡機器人來說是繁重的，但對於敏銳的人類用戶來說卻是易於管理的。舉例來說，區分一系列所描繪的車輛屬於人類的能力範圍，但對機器人代理來說卻構成了巨大的障礙。
驗證碼的概念源於圖靈測試，該測試旨在確定人工智能是否可以表現出與人類無法區分的智能行為。從本質上講，驗證碼充當“反向圖靈測試”，要求被假定為人類的用戶展示其認知能力，並將自己與試圖通過欺騙手段獲得未經授權的訪問的自動化實體區分開來。
為什麼您的網站需要驗證碼驗證
通過實施區分人類用戶和自動機器人的額外安全層，驗證碼在保護網站免受垃圾郵件、通過表單提交有害內容以及某些類型的黑客攻擊等惡意活動方面發揮著至關重要的作用。
儘管谷歌是一家技術先進的公司，但它也利用驗證碼作為保護其係統免受不必要的垃圾郵件攻擊的手段。
HTML 驗證碼
本次嘗試中使用的源代碼已上傳到 GitHub 存儲庫，該存儲庫根據 MIT 許可證條款授予免費使用權限。感興趣的人可以通過檢查提供的演示來仔細閱讀操作示例。
在此項目中，我們將利用提供的代碼片段將驗證碼機制合併到現有的 HTML 表單中，如下所示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">
Captcha Validator Using HTML, CSS and JavaScript
</h1>
<div id="captchaBackground">
<canvas id="captcha">captcha text</canvas>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
這段代碼主要由七個要素組成:
上述 HTML 代碼代表驗證碼，用於驗證用戶確實是人類而不是自動化機器人。該組件包含一個 ID 為“captchaHeading”的標題標籤，用作驗證碼表單的標題。
上述 HTML 代碼包含一個“
”標籤，用於在網頁中顯示圖像。此外，還有兩個 ID 為“top”和“bottom”的 元素，以及另一個沒有任何 ID 的 元素，用作驗證碼文本的容器。後者使用 ID 為“captcha”的畫布元素顯示。
提供的代碼片段似乎是一個 HTML 片段，其中包括一個簡單的文本輸入字段，標記為“Text”，關聯 ID 為“textBox”。如果沒有關於其在較大網頁或應用程序中的預期用途的附加上下文或信息，則該輸入字段的用途不清楚。
ID 為“submitButton”的輸入元素是一個提交按鈕，單擊該按鈕後，將處理表單數據並驗證輸入的驗證碼是否與頁面上顯示的相符，並檢查用戶響應中的任何拼寫錯誤。
上述元素包含一個 ID 為“refreshButton”的按鈕，其類型為“submit”。單擊此按鈕時，會刷新驗證碼。
上述代碼片段具有 HTML span 元素，該元素用作顯示內容的視覺上吸引人的容器。顯示的內容是根據用戶通過實施驗證碼系統提供的輸入驗證動態生成的。
上述組件用作父實體，在其邊界內包含各種從屬元素，充當所述組件的容器。
上述 CAPTCHA HTML 模板通過使用 和 元素合併鏈接功能，前者位於該部分內，後者位於文檔的結尾處。
對於某些人來說，瀏覽大量的 HTML 標籤及其相應的屬性可能具有挑戰性。幸運的是，有一種現成的資源稱為 HTML 備忘單，它提供了基本 HTML 元素的簡明摘要。對於那些尋求快速復習 HTML 語法的人來說，這個有用的工具可以作為一個有價值的參考點。
通過將該腳本合併到網站的設計中是可行的，從而允許與其中託管的預先存在的表單無縫集成。
CSS 驗證碼
利用 CSS 或級聯樣式表將樣式屬性應用於 HTML 元素。隨後的CSS代碼可用於美化CAPTCHA驗證表單的外觀:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}
您可以通過應用 CSS box-shadow 屬性來增強表單容器的外觀，這會在元素周圍添加時尚的陰影效果。此外，您還可以根據自己的喜好靈活修改其他 CSS 屬性，以進一步完善表單的設計。
使用 JavaScript 進行驗證碼驗證
為了給網站注入額外的功能，有必要使用 JavaScript。首先，使用 document.getElementById() 方法檢索必需的元素，例如畫布和文本輸入字段。這將使您能夠有效地訪問和操作這些組件。
let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";
let userText = document.getElementById('textBox');
let submitButton = document.getElementById('submitButton');
let output = document.getElementById('output');
let refreshButton = document.getElementById('refreshButton');
在本例中，我們使用 document.getElementById() 來根據稱為“ID”的唯一標識符來識別和隔離文檔中的特定元素。
要創建驗證碼質詢，必須選擇一系列任意字符。有多種方法可以完成此任務，包括將可能的字符的集合存儲在數組中作為選擇的起點。
var captchaStr = "";
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T', 'U',
'V', 'W', 'X', 'Y', 'Z', 'a', 'b',
'c', 'd', 'e', 'f', 'g', 'h', 'i',
'j', 'k', 'l', 'm', 'n', 'o', 'p',
'q', 'r', 's', 't', 'u', 'v', 'w',
'x', 'y', 'z', '0', '1', '2', '3',
'4', '5', '6', '7', '8', '9'];
下面是如何結合使用 HTML5 Canvas 和 Math.random() 方法在 JavaScript 中實現驗證碼生成函數的示例:javascriptfunctiongenerateCaptcha() {//為驗證碼創建畫布元素 imagevar canvas=document.createElement(“canvas” ”); canvas.width=200;canvas.height=80;//獲取畫布上下文var ctx=canvas.getContext(“2d”);//隨機設置背景和文本顏色var bgColor=“#” + Math.floor (Math. random() * 16777215).toString(16);var txtColor=“#” + Math.floor(Math
我們首先構建一個由 alphaNums 中的任意字符組成的全新數組。我們將迭代此過程預定次數-在本例中為七次迭代。在每次傳遞中，我們都會從“alphaNums”中引入一個新選擇的字符到不斷增長的數組中。最後，我們使用 fillText() 方法將完整的集合作為單個實體寫入畫布上。
function generate_captcha() {
let emptyArr = [];
for (let i = 1; i <= 7; i\+\+) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaStr = emptyArr.join('');
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
output.innerHTML = "";
}
generate_captcha();
請注意，此特定功能會擦除繪圖表面並恢復所有輸出，這兩者在恢復驗證碼文本顯示方面都發揮著至關重要的作用。
驗證用戶輸入的過程涉及將其與原始驗證碼字符串進行比較。為此，您可以創建一個專用函數來執行比較並返回一個布爾值，指示輸入的代碼是否與預期的代碼匹配。這將確保在允許訪問您網站上的敏感數據或功能之前進行正確的身份驗證。
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
通過在適當的元素（例如表單）中分別添加“keydown”和“click”事件的事件偵聽器，指示在按下“Enter”鍵或單擊“Submit”按鈕時應執行代碼字段或按鈕，具有相應的功能來處理提交表單數據以更新電子表格的邏輯。
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
為了解決驗證碼只生成一次，頁面刷新或者url變化後驗證碼不可用的問題，我們必須實現一種在每次請求時刷新驗證碼的機制。要實現此目的，只需將驗證碼生成按鈕的“提交”事件與包含該按鈕的腳本標記內的“generate_captcha()”函數調用相關聯即可。這將確保每次表單提交或 URL 更改時都會生成新的驗證碼，從而維持必要的安全措施，同時實現無縫的用戶體驗。
refreshButton.addEventListener('click', generate_captcha);
CAPTCHA 驗證器項目的輸出
事實上，在您自己的服務器或本地環境上成功複製驗證碼驗證表單後，您將能夠查看網頁中顯示的預期輸出，確認驗證碼功能已與代碼庫正確集成。這表明實施已正確執行並且有效地實現了預期目的。
