跳至主要內容

reCAPTCHA Enterprise

reCAPTCHA Enterprise 是 Google 提供的服務,透過先進的機器人偵測技術,在不影響使用者體驗的情況下保護網站免於詐騙與濫用。本指南將帶你完成將 reCAPTCHA Enterprise 與 Logto 整合的流程。

先決條件

  • 一個 Google Cloud 專案

建立 reCAPTCHA 金鑰

  1. 前往 Google Cloud Console 的 reCAPTCHA 頁面
  2. 點擊「reCAPTCHA keys」旁的 Create key 按鈕。
  3. 填寫下列資訊:
    • Display name:你想給這個金鑰的任何名稱
    • Application type:Website
    • Domain list:新增 Logto 的端點網域
    • Verification type:選擇 Score-based (invisible)Checkbox challenge。這會決定 reCAPTCHA 呈現給使用者的方式。詳情請參閱 驗證模式 (Verification mode)
  4. 建立金鑰後,會自動導向金鑰詳細頁面,複製 ID

建立 API 金鑰

  1. 前往 Google Cloud Console 的 Credentials 頁面
  2. 點擊 Create credentials 按鈕並選擇 API key
  3. 複製 API 金鑰。
  4. 你可以選擇將 API 金鑰限制於 reCAPTCHA Enterprise API,以提升安全性。
  5. 若不清楚「Application restrictions」用途,請保持為 None

取得專案 ID

  1. Google Cloud Console 首頁 複製 Project ID

驗證模式 (Verification mode)

reCAPTCHA Enterprise 支援兩種驗證模式:

  • Invisible:分數制驗證,於背景自動執行,無需使用者互動。此為預設模式。
  • Checkbox:顯示經典的「我不是機器人」勾選框,需要使用者互動。
備註:

你在 Logto 選擇的驗證模式必須與 Google Cloud Console 建立金鑰時的類型一致。若建立的是分數制金鑰,請選擇 Invisible;若建立的是勾選挑戰金鑰,請選擇 Checkbox

Bring your UI

如果你使用 Bring your UI,Logto 無法自動在你的自訂前端注入或執行 reCAPTCHA。啟用 CAPTCHA 後,你的自訂 UI 必須自行載入 reCAPTCHA Enterprise 腳本、取得 CAPTCHA 權杖,並將其傳送給 Experience API。

對於 Invisible 模式,請以你的 site key 載入腳本:

<script src="https://www.google.com/recaptcha/enterprise.js?render=<siteKey>" async defer></script>

若你在 Logto 設定了自訂網域,請將 www.google.com 替換為該網域,例如 recaptcha.net

在互動開始前,以固定 action interaction 執行 reCAPTCHA,並將回傳的權杖作為 captchaToken 傳給 PUT /api/experience

const captchaToken = await grecaptcha.enterprise.execute('<siteKey>', {
action: 'interaction',
});

await fetch('/api/experience', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
interactionEvent: 'SignIn',
captchaToken,
}),
});

對於 Checkbox 模式,請以 render=explicit 載入腳本,在頁面上渲染元件,並於呼叫 PUT /api/experience 時將 callback 權杖作為 captchaToken

自訂網域

預設情況下,Logto 會從 www.google.com 載入 reCAPTCHA 腳本。但在某些地區,Google 標準網域可能無法存取,你可以設定替代網域。

支援的網域:

  • www.google.com(預設)
  • recaptcha.net

如需設定自訂網域,請於 Logto Console 設定 reCAPTCHA Enterprise 時,在 Domain 欄位輸入網域。

啟用 CAPTCHA

完成 CAPTCHA 服務商設定後,請記得啟用 CAPTCHA 機器人防護。

前往安全性頁面,找到 CAPTCHA 分頁,並開啟「Enable CAPTCHA」的切換按鈕。