reCAPTCHA v3 會針對使用者要求傳回分數,使用者完全沒有阻礙。分數是根據網站的互動計算,方便您採取適當的行動。在 reCAPTCHA 管理控制台中註冊 reCAPTCHA v3 金鑰。
本頁說明如何在網頁上啟用及自訂 reCAPTCHA v3。
網站上的刊登位置
reCAPTCHA v3 不會對您的使用者造成乾擾,因此您隨時可以執行這項解決方案,而且完全不會影響轉換成效。reCAPTCHA 最適合用來處理與您網站互動的情境,而這一切都是源自於合法及濫用行為。因此,我們建議您在表單或動作及網頁背景中加入 reCAPTCHA 驗證,以便進行分析。
您可以針對同一頁面執行多項動作,不過不限次數。
自動將挑戰繫結至按鈕
在網頁上使用 reCAPTCHA v3 最簡單的方法,就是包含必要的 JavaScript 資源,並在 HTML 按鈕中加入一些屬性。
載入 JavaScript API。
<script src="https://www.google.com/recaptcha/api.js"></script>
新增回呼函式來處理權杖。
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } </script>
在 HTML 按鈕中加入屬性。
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>
透過程式叫用挑戰
如要進一步控制 reCAPTCHA 執行的時間,您可以在 grecaptcha
物件中使用 execute
方法。如要這麼做,您必須在 reCAPTCHA 指令碼載入中加入 render
參數。
使用您的網站金鑰載入 JavaScript API。
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
針對您要保護的各項動作呼叫
grecaptcha.execute
。<script> function onClick(e) { e.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) { // Add your logic to submit to your backend server here. }); }); } </script>
使用驗證要求將憑證立即傳送至您的後端。
解譯分數
reCAPTCHA v3 會傳回分數 (1.0 很可能是良好的互動,0.0 很可能是機器人)。根據分數,您可以在自己的網站上根據這些變數採取可行的動作。每個網站都各不相同,以下提供一些網站使用分數的範例。如下方範例所示,在背景執行動作,而不是封鎖流量,以加強保護您的網站。
用途 | 建議 |
---|---|
首頁 | 在篩選過濾器時,你可在管理控制台中查看整體流量的統一檢視畫面。 |
login | 如果分數偏低,需要進行雙重驗證或電子郵件驗證,以防止憑證填充攻擊。 |
社交 | 避免提出濫用使用者的好友要求,並且將有風險的留言傳送至審核機制。 |
電子商務 | 將您的實際銷售置於機器人之前並識別風險交易。 |
reCAPTCHA 透過解讀您網站上的實際流量來學習因此,在測試環境或實作之後不久的分數可能會與實際工作環境不同。由於 reCAPTCHA v3 不會中斷使用者流程,您可以先執行 reCAPTCHA,不需採取任何行動,然後透過「管理控制台」查看流量來判定門檻。根據預設,您可以使用 0.5 的門檻值。
動作
reCAPTCHA v3 導入了全新概念:動作。當您在執行 reCAPTCHA 的每個位置指定動作名稱時,即可啟用下列新功能:
- 管理控制台中前十大動作的詳細分析資料
- 濫用行為分析會根據動作的情境調整,因為濫用行為可能有所不同。
重要的是,當您驗證 reCAPTCHA 回應時,應確認動作名稱是否為您預期的名稱。
網站驗證回應
透過 reCAPTCHA v2 或 Invisible reCAPTCHA 提出驗證回應憑證的要求。
回應為 JSON 物件:
{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}