教你設定Google reCAPTCHA:從申請到整合,保護你的網站

教你設定Google reCAPTCHA:從申請到整合,保護你的網站

相信任何活躍的網路使用者,都對「我不是機器人」的勾選框或那些要求我們點選「所有包含紅綠燈的圖片」的驗證畫面不陌生。這項無所不在的技術,就是由 Google 提供的 reCAPTCHA 服務。它的核心目標非常單純:在不影響真人使用者體驗的前提下,有效地區分並阻擋惡意的自動化程式(机器人),保護网站的內容免於垃圾訊息、惡意註冊、帳戶盜用和詐欺交易等威脅。

隨著人工智慧技術的飛速發展,傳統的扭曲英文字captcha驗證碼早已被輕易破解。為此,reCAPTCHA 也不斷演進,從使用者必須手動完成的挑戰,進化到現今有著全新運作方式、能夠在背景「無感」運作的智慧分析系統。本篇文章將深入探討 reCAPTCHA 的世界,從不同版本的運作原理、詳細的申請設定流程,到結合後端的實戰應用策略,為網站開發者與管理者提供一份包含詳盡說明與設定範例的終極指南。

reCAPTCHA 的演進與運作原理

reCAPTCHA 的歷史饒富趣味。它最初由卡內基美隆大學的研究團隊開發,其早期的主要目的之一是利用全球用戶的力量,協助數位化典籍,例如將《紐約時-報》的古老報紙存檔中,那些光學字元辨識(OCR)技術難以判讀的文字,轉化為驗證問題,讓人類在驗證身份的同時,也為知識保存貢獻心力。2009年被 Google 收購後,reCAPTCHA 開始了其作為全球領先網路安全服務的演變之路。

reCAPTCHA v2:經典的互動式挑戰

v2 是我們最熟悉的驗證類型,它主要分為兩種模式:

「我不是機器人」核取方塊 (Checkbox):

這是最經典的 v2 模式。使用者需要點擊一個方框。然而,驗證的關鍵並非僅在於用手點擊這個動作。在使用者將滑鼠游標移動到方框並點擊的整個過程中,Google 的風險分析引擎會收集並分析數百個訊號,包括但不限於:

  • 滑鼠軌跡與速度: 真人使用者的移動通常帶有微小的抖動和不規則性,而机器人則是直線或規律的移動。
  • IP 位址與瀏覽紀錄: 評估該 IP 的歷史信譽。
  • 瀏覽器環境: 包括安裝的插件、螢幕解析度、時區等,形成一個獨特的「瀏覽器指紋」。
  • 網頁捲動行為: 使用者在頁面上的捲動模式。

如果綜合評分顯示為低風險(高度可能為人類),勾選後即可通過。若系統判定存在風險,則會跳出第二階段的圖片挑戰,例如辨識圖片中的物件。

隱形 reCAPTCHA 標記 (Invisible reCAPTCHA Badge):

這是對使用者體驗的一大改進。在這種模式下,頁面上不會顯示核取方塊。reCAPTCHA 會在背景默默分析使用者行為。只有當用戶進行關鍵操作(如點擊登入或送出按鈕)且其風險評分過高時,才會跳出圖片驗證挑戰。對於絕大多數正常使用者而言,整個過程是完全無感的。

reCAPTCHA v3:無感知的智慧評分時代

google recaptcha v3 帶來了典範轉移。它完全移除了互動式挑戰,致力於提供「無摩擦」的使用者體驗。使用者在瀏覽網站時,不會看到任何需要點擊的方框或圖片問題,只會在頁面角落看到一個小的 reCAPTCHA 保護標記。

其運作方式如下:

reCAPTCHA v3 的 JavaScript API 會在網站後端持續觀察使用者的行為,例如頁面停留時間、點擊模式、表單輸入節奏等。基於這些行為,它會為使用者的每次關鍵操作(如登入、留言、購物)產生一個風險分數,範圍從 0.0 到 1.0。

  • 1.0 代表極低風險,幾乎可以肯定是真人。
  • 0.0 代表極高風險,極有可能是机器人。

網站管理者可以根據這個分數,在後端自訂應對策略,而非被動地依賴 Google 顯示的統一驗證。例如,高分使用者可以直接通過,中等分數的使用者可以要求進行兩步驟驗證(MFA),而極低分數的使用者則可以直接阻擋。

reCAPTCHA Enterprise:企業級的全方位詐騙防護

這是建立在 v3 技術之上的付費企業級服務。它不僅提供更精細的風險分數和原因代碼,更將防護範圍從傳統的「人機識別」擴展到偵測各種惡意行為,主要應用場景包括:

  • 帳戶防護: 防範帳戶盜用(ATO)和利用外洩密碼進行的「憑證填充」攻擊。
  • 交易保護: 分析交易風險,即時識別並阻擋盜刷等詐欺性付款。
  • 防範假帳戶: 在註冊環節攔截惡意的大規模假帳戶建立。
  • 簡訊費用詐欺防護: 防止机器人濫用手機驗證功能,觸發大量高額簡訊,造成企業損失。

它整合了 Google 全球規模的威脅情報,並利用機器學習為企業客戶建立專屬的防護模型,是應對複雜、大規模網路攻擊的頂級方案。

申請與設定 Google reCAPTCHA:通用指南

無論您選擇哪個版本來使用recaptcha,申請流程都已整合至 Google Cloud Platform (GCP)。

步驟一:前往 Google reCAPTCHA 管理控制台

首先,登入您的 Google 帳戶,然後前往 Google reCAPTCHA 官方網站,點擊「v3 Admin Console」或類似的入口按鈕。

步驟二:註冊新的網站金鑰

在管理後台,點擊建立(通常是「+」圖示),您需要填寫以下資訊:

  • 標籤 (Label): 僅供您自己識別,可填寫網站名稱或用途,例如「我的部落格」或「電商網站-登入頁」。
  • reCAPTCHA 類型 (reCAPTCHA Type): 這是最關鍵的選擇,請根據您的需求選擇。
reCAPTCHA 類型 適用情境與說明
reCAPTCHA v3 (推薦) 不會中斷使用者。透過回傳一個風險分數(0.0-1.0),讓您在後端決定後續操作。適合所有新網站,提供最佳使用者體驗和最高的自訂彈性。
reCAPTCHA v2 -「我不是機器人」核取方塊 傳統的勾選區塊模式。只有在系統懷疑時,才會要求使用者進行圖片辨識。實現簡單直接,但會輕微干擾使用者流程。
reCAPTCHA v2 – 隱形 reCAPTCHA 標記 不會顯示勾選框。僅在使用者點擊按鈕且被判定為可疑時,才跳出驗證。是 v2 中對使用者體驗影響最小的選項。
  • 網域 (Domains): 輸入您要使用此 reCAPTCHA 的網站網址。
    • 生產環境: 填寫您的主網域,例如 example.com,無需加入 https:// 或 http://。
    • 開發環境: 為了方便在本機測試,請務必加入 localhost 和 127.0.0.1。
  • Google Cloud Platform 專案: reCAPTCHA 現在是 GCP 的一部分。如果您沒有專案,系統會自動為您建立一個。

步驟三:取得網站金鑰 (Site Key) 與密鑰 (Secret Key)

提交後,您將獲得兩組非常重要的金鑰:

  • 網站金鑰 (Site Key / 公鑰): 這組金鑰是公開的,需要放置在您網站的前端 HTML 或 JavaScript 程式碼中。
  • 密鑰 (Secret Key / 私鑰): 這組金鑰是機密的,絕對不能出現在任何前端程式碼中。它僅用於您的後端伺服器與 Google 伺服器之間進行驗證。

步驟四:啟用 Google Cloud 計費功能(強烈建議)

這是許多人忽略但至關重要的一步。reCAPTCHA 提供非常慷慨的免費額度(例如 v2 每月有100萬次免費呼叫)。但是,為了避免在流量突然增大、超出免費額度時服務被 Google 中斷,導致使用者無法登入或註冊,您必須為關聯的 GCP 專案啟用計費功能並連結一個有效的付款方式(如信用卡)。這是一個重要的技術性步驟。

請放心,啟用計費不等於立刻付費。 只要您的用量未超過免費額度,就不會產生任何費用。這只是一個確保服務持續性的保險措施。

網站整合實戰:從前端到後端

前端整合

引入 reCAPTCHA 的 JavaScript 檔案:

將 Google 提供的 script 標籤加入到您的 HTML 頁面的 <head> 或 <body> 結尾處,並整合到您的應用程式中。請將 YOUR_SITE_KEY 替換為您自己的網站金鑰。

對於 v2:

html <script src=”https://www.google.com/recaptcha/api.js” async defer></script>

對於 v3:

html <script src=”https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY”></script>

在前端觸發驗證:

對於 v2 (Checkbox):

在您的表單中,放置一個 <div> 區塊元素,並將您的網站金鑰填入 data-sitekey 屬性。

html <div class=”g-recaptcha” data-sitekey=”YOUR_SITE_KEY”></div>

對於 v3 (Score-based):

當使用者要執行某個操作時(例如點擊送出按鈕),您需要呼叫 grecaptcha.execute 函式。這個函式會回傳一個 token。

function onLoginSubmit(e) {

e.preventDefault(); // 🚫 防止表單預設提交行為

grecaptcha.ready(function() {

grecaptcha.execute(‘YOUR_SITE_KEY’, {action: ‘login’}).then(function(token) {

// ✅ 成功取得 token,接下來將 token 與表單資料一併送出至後端

// 範例:

// fetch(‘/login’, {

// method: ‘POST’,

// headers: { ‘Content-Type’: ‘application/json’ },

// body: JSON.stringify({

// token: token,

// username: …, // 其他表單資料

// password: …

// })

// });

});

});

}

後端驗證

無論前端使用哪個版本,最終的驗證步驟都在後端完成。

接收前端傳來的 token。

您的後端伺服器向 Google 的驗證 API 發送一個請求。

這個請求的內容必須包含您的密鑰 (Secret Key)和從前端收到的token。

API 端點: https://www.google.com/recaptcha/api/siteverify

請求方法: POST

請求參數:

  • secret: 您的密鑰 (Secret Key)
  • response: 從前端傳來的 token
  • remoteip: (可選但建議) 使用者的 IP 位址

解析 Google 的回應內容:

Google 會回傳一個 JSON 物件。您需要檢查其中的欄位:

  • “success”: true 或 false:表示驗證是否成功。
  • “score”: 0.9 (僅限 v3):表示該次操作的風險分數。
  • “action”: “login” (僅限 v3):回傳您在前端設定的 action 名稱,確保請求未被竄改。
  • “error-codes”: […]:如果驗證失敗,會提供錯誤原因。

安全提醒: 處理後端驗證最安全、最現代化的方式,是使用 Google 官方提供的雲端用戶端函式庫(例如 Node.js 的 @google-cloud/recaptcha-enterprise),並透過「服務帳戶 (Service Account)」的 JSON 憑證這種安全技術進行驗證,而非直接在程式碼中寫死密鑰。

解讀 reCAPTCHA v3 分數與應用策略

v3 的精髓在於如何利用風險評分。單純地阻擋所有低分使用者並非最佳策略。您可以建立一個更細緻的風險應對矩陣:

風險分数 (Risk Score) 風險等級 建議操作
0.9 – 1.0 極低風險 無需任何操作,直接允許請求,提供最流暢的體驗。
0.7 – 0.8 低風險 信任該使用者,但可記錄其行為以供日後分析。
0.4 – 0.6 中度風險 觸發第二層驗證,例如要求 Email 或簡訊驗證碼,或者動態載入一個 reCAPTCHA v2 的圖片挑戰。
0.1 – 0.3 高風險 要求強制性的多重要素驗證 (MFA),或者直接拒絕該次請求,並提示使用者聯絡客服。
0.0 極高風險 確認為机器人,立即封鎖請求,並可考慮將其 IP 列入暫時黑名單。

透過這種方式,您可以完美平衡安全性與使用者體驗,僅對可疑流量增加驗證步驟,而讓絕大多數正常使用者享受無干擾的服務。

常見問題 (FAQ)

Q1: 設定 reCAPTCHA 一定要付費嗎?

A: 不用。reCAPTCHA 本身有非常慷慨的免費方案,足以應對絕大多數中小型網站的需求。要求您啟用「計費功能」是為了在您未來用量超過免費額度時,服務不會中斷。您只會在實際用量超出免費額度後,才需要為超出的部分付費。

Q2: 我應該選擇 v2 還是 v3?

A: 對於所有新網站,官方和業界都強烈推薦使用recaptcha v3 的最新版本。因為它提供了最佳的使用者體驗,且您可以利用其分數系統,在需要時才動態觸發 v2 作為後備驗證,兼具兩者優點。如果您只需要一個非常簡單、明確的「關卡」,且不在意對使用者體驗的輕微干擾,v2 也是一個可行的選項。

Q3: 我的網站在本地開發 (localhost),可以設定 reCAPTCHA 嗎?

A: 絕對可以。在 reCAPTCHA 管理後台設定網域時,務必將 localhost 和 127.0.0.1 加入到允許的網域清單中,這樣您就可以在本地電腦上進行完整的開發與測試。

Q4: 為什麼我的 reCAPTCHA 設定後沒有反應或導致無法登入?

A: 最常見的原因有:

  1. 金鑰錯誤: 前端的網站金鑰或後端的密鑰複製錯誤。
  2. 網域不符: 您網站的目前網域未被加入到 reCAPTCHA 的允許清單中。
  3. 服務中斷: 您可能已超過免費額度,且未啟用計費功能,導致 Google 暫停了您的服務。
  4. JavaScript 錯誤: 檢查瀏覽器控制台是否有與 reCAPTCHA 相關的腳本錯誤。
  5. 後端驗證失敗: 後端伺服器未能正確地向 Google API 發送包含完整内容的驗證請求。

Q5: reCAPTCHA v3 會在頁面上顯示什麼嗎?

A: 是的。根據 Google 的使用條款,v3 預設會在您網站的右下角顯示一個小小的保護標記。這個標記是為了告知使用者,他們的活動受到 google recaptcha v3 的保護,並提供了指向 Google 隱私權政策和服務條款的連結。雖然有技術方法可以隱藏它,但建議保留以符合政策要求。

總結

Google reCAPTCHA 已從一個簡單的captcha工具,發展成為一個複雜且強大的網站安全平台。對於現代網站而言,它不僅是防範垃圾訊息的盾牌,更是保護用戶帳戶與交易安全的關鍵基礎設施。

  • 對於新專案, 強烈建議直接採用 reCAPTCHA v3,以其無感的智慧評分機制,為使用者提供最佳體驗,同時賦予開發者最大的控制彈性。
  • 對於需要簡單直覺防護的場景, reCAPTCHA v2 依然是個可靠的選擇。
  • 對於安全性要求極高的企業級應用程式, reCAPTCHA Enterprise 提供了超越人機識別的全面詐騙防護能力。

最終,選擇並實施合適的 reCAPTCHA 策略,是在追求極致安全與保障使用者便利性之間取得智慧平衡的藝術。正確地使用它,將為您的網站帶來長遠而穩固的價值。

資料來源

返回頂端