關於 Google reCAPTCHA v3 ，才想起來之前用的幾乎都是 v2 ，應該更新一下自己的技能樹，真的腿。
幾個注意事項：
- 幾個注意的要點：
- 引用 js 檔案，注意前端使用 site key
- 後端的 Secret Key 作驗證，注意不要外流
- 下面提供操作流程，除了使用 js 驗證的方法之外，官網也由提供 onSubmit 的方法，參考這裡。
- 後端確認的說明參考官網，這裡。注意分數的判斷。
- 如果不想用分數來做判斷，可以選用 v2 ，他也有不同的操作模式，參考這裡和這裡。
- 有其使用限制，不同版本參考這裡，免費上限是 10k / 月，注意是一個帳戶。
- 有一些操作細節，像是 action 的設置可以作為不同驗證分數的評估手段等等。
另外除了 Google reCAPTCHA v3 也有其他替代品，Cloudflare 也提供 Turnstile ，計費方式不太一樣。除了上述兩個，還有 hCaptcha ，甚至他還提供了 reCAPTCHA 轉換 hCAPTCHA 的說明，價格參考這裡（好像免費只能試用？）。
Google reCAPTCHA v3 驗證邏輯上大概就是 Google 透過魔法（笑）在前端透過瀏覽器判斷這個用戶是不是機器人，產出一個驗證的落落長咒語，然後傳給後端確認，後端透過回傳給 google 來判斷 score，自行判斷是不是機器人，我理解大致上 0.5 以上就是人類。
關於操作的流程，其實官網文章其實已經說了很明白了。既然要水字數的話，來人阿！上 AI：
如何在網站中整合 Google reCAPTCHA v3
Google reCAPTCHA v3 是一個無干擾的防護機制，它不需要使用者解決驗證挑戰，透過評分系統自動識別惡意行為。以下將介紹如何在網站中實作 reCAPTCHA v3 的步驟。
步驟 1: 註冊 Google reCAPTCHA v3
- 進入 Google reCAPTCHA 管理台。
- 登入你的 Google 帳戶，並填寫下列資訊：
- 標籤：為這個 reCAPTCHA v3 設定提供一個識別名稱。
- reCAPTCHA 類型：選擇 “reCAPTCHA v3″。
- 網域：輸入你網站的網域名稱。
- 所有者：設定擁有這個 reCAPTCHA 的電子郵件。
- 同意 reCAPTCHA 服務條款，並點擊 “提交”。
完成註冊後，你將獲得 站點金鑰 (Site Key) 和 祕密金鑰 (Secret Key)。
步驟 2: 將 reCAPTCHA v3 加入你的網站
在你的 HTML 頁面中，加入下列 JavaScript 程式碼以載入 reCAPTCHA v3：
<script src="https://www.google.com/recaptcha/api.js?render=你的站點金鑰"></script>在你想要執行驗證的操作中（例如表單提交），調用 grecaptcha.execute()：
<script>
grecaptcha.ready(function() {
grecaptcha.execute('你的站點金鑰', {action: 'submit'}).then(function(token) {
// 將 token 傳送至你的伺服器進行驗證
});
});
</script>步驟 3: 在後端進行驗證
當使用者提交表單時，你需要在伺服器端驗證 reCAPTCHA token。以下範例為使用 PHP 進行驗證：
<?php
$token = $_POST['token'];
$secret_key = '你的祕密金鑰';
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$token}");
$responseKeys = json_decode($response, true);
if ($responseKeys["success"] && $responseKeys["score"] >= 0.5) {
// 驗證通過，繼續處理表單
} else {
// 驗證失敗，阻止表單提交
}
?>步驟 4: 調整評分閾值
Google reCAPTCHA v3 使用 0 到 1 的評分來衡量使用者行為，1 表示良好使用者，0 表示惡意行為。你可以根據需求來調整評分閾值，例如將其設為 0.5 以上代表驗證通過。
以上，再來補一個 Cloudflare Turnstile 操作流程。
Cloudflare Turnstile 操作流程
1. 註冊並取得 Turnstile 金鑰
- 首先，登入你的 Cloudflare 帳戶，進入 Turnstile 管理頁面。
- 點選「新增站點」，輸入你的網站名稱和網域，選擇所需的小工具模式（例如隱形或管理模式）。
- 完成後，系統會生成一組 sitekey 和 secret key，請妥善保存這些金鑰，因為它們將用於驗證操作。
2. 在網站前端加入 Turnstile
在你的 HTML 頁面 <head> 區塊中插入以下 JavaScript 程式碼，用以載入 Turnstile 小工具：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>接著，在需要驗證的位置，加入以下 HTML 元素，例如表單內：
<form id="login-form" action="/login" method="POST">
<input type="text" name="username" placeholder="用戶名" required>
<input type="password" name="password" placeholder="密碼" required>
<div class="cf-turnstile" data-sitekey="YOUR-SITE-KEY"></div>
<button type="submit">登入</button>
</form>這段代碼會在頁面上自動載入 Turnstile 小工具，用於保護表單提交。
3. 後端驗證 Turnstile Token
當使用者提交表單後，Turnstile 會返回一個 token，必須在伺服器端進行驗證。
以下是後端驗證 token 的範例：
<?php
// 從表單中接收 Turnstile 的 response token
$turnstileToken = $_POST['cf-turnstile-response'];
// 你的 secret key，請妥善保管
$secretKey = 'your-secret-key';
// 設置驗證請求的參數
$data = [
'secret' => $secretKey,
'response' => $turnstileToken,
'remoteip' => $_SERVER['REMOTE_ADDR'] // 可選的，用來記錄用戶 IP
];
// 初始化 cURL
$ch = curl_init();
// 配置 cURL 請求
curl_setopt($ch, CURLOPT_URL, "https://challenges.cloudflare.com/turnstile/v0/siteverify");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// 執行 cURL 請求並獲取回應
$response = curl_exec($ch);
curl_close($ch);
// 將 JSON 格式的回應轉換為 PHP 陣列
$responseData = json_decode($response, true);
// 檢查驗證結果
if ($responseData['success']) {
// 驗證成功，執行你的邏輯
echo '驗證成功，繼續進行處理';
} else {
// 驗證失敗
echo '驗證失敗，請重試';
}
?>你也可以用 Cloudflare Worker 處理：
// This is the demo secret key. In production, we recommend
// you store your secret key(s) safely.
const SECRET_KEY = "1x0000000000000000000000000000000AA";
async function handlePost(request) {
const body = await request.formData();
// Turnstile injects a token in "cf-turnstile-response".
const token = body.get("cf-turnstile-response");
const ip = request.headers.get("CF-Connecting-IP");
// Validate the token by calling the
// "/siteverify" API endpoint.
let formData = new FormData();
formData.append("secret", SECRET_KEY);
formData.append("response", token);
formData.append("remoteip", ip);
const url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
const result = await fetch(url, {
body: formData,
method: "POST",
});
const outcome = await result.json();
if (outcome.success) {
// ...
}
}此步驟確保 token 是有效的，且未被重複使用，防止重放攻擊。
4. 從 Google reCAPTCHA 遷移
如果你目前使用的是 Google reCAPTCHA，可以使用 Turnstile 的兼容模式，修改載入腳本：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>將現有代碼中的 grecaptcha.render() 呼叫，改為使用你的 Turnstile sitekey，這樣可以無縫切換。
透過這些步驟，你可以在網站中輕鬆整合 Cloudflare Turnstile，提升網站安全性並替代傳統的驗證碼工具。
—
同場加映：
hCaptcha 運作的循序圖，這類操作大多都類似。
Cloudflare 提供 Turnstile 的計費方式（此為 2024-10-22 時截圖）。這種服務大多就是搶市佔率，然後套養殺的商業模型。到時看看有沒有越來越貴就知道他用的人多不多了。
