Google – 育心文具行

關於 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 時截圖）。這種服務大多就是搶市佔率，然後套養殺的商業模型。到時看看有沒有越來越貴就知道他用的人多不多了。

標籤: Google

如何在網站中整合 Google reCAPTCHA v3