reCAPTCHA Enterprise
reCAPTCHA Enterprise 是 Google 提供的服務,透過先進的機器人偵測技術,在不影響使用者體驗的情況下保護網站免於詐騙與濫用。本指南將帶你完成將 reCAPTCHA Enterprise 與 Logto 整合的流程。
先決條件
- 一個 Google Cloud 專案
建立 reCAPTCHA 金鑰
- 前往 Google Cloud Console 的 reCAPTCHA 頁面。
- 點擊「reCAPTCHA keys」旁的 Create key 按鈕。
- 填寫下列資訊:
- Display name:你想給這個金鑰的任何名稱
- Application type:Website
- Domain list:新增 Logto 的端點網域
- Verification type:選擇 Score-based (invisible) 或 Checkbox challenge。這會決定 reCAPTCHA 呈現給使用者的方式。詳情請參閱 驗證模式 (Verification mode)。
- 建立金鑰後,會自動導向金鑰詳細頁面,複製 ID。
建立 API 金鑰
- 前往 Google Cloud Console 的 Credentials 頁面。
- 點擊 Create credentials 按鈕並選擇 API key。
- 複製 API 金鑰。
- 你可以選擇將 API 金鑰限制於 reCAPTCHA Enterprise API,以提升安全性。
- 若不清楚「Application restrictions」用途,請保持為 None。
取得專案 ID
- 從 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」的切換按鈕。