用 reCAPTCHA v3 來做非機器人驗證

/

本篇要解決的問題

雖然在上一篇寫「v2」的文章中,說有看到網路上說 v3 太容易被誤認為是機器人,但因為沒實際執行過,因此也是半信半疑,再加上想趁著對 v2 的部份還記憶猶新時,來研究一下 v3,就有了這篇筆記。

v3 的文件比 v2 更加簡單,因為省去了使用者必須點擊按鈕這個動作,所以只要在我們想要加上驗證的按鈕或連結上,選擇用 HTML 或是用 JavaScript 的方式即可。

本篇最後的 Demo 連結:

https://letswritetw.github.io/letswrite-recaptcha-v3/

最後一段會附上 Demo 的原始碼。


註冊 reCAPTCHA

這段跟 v2 那篇的第一段相同,如果看過 v2 的朋友們可以直接跳過本段。

登入了 Google 帳號後,進到 reCAPTCHA 的頁面:Google reCAPTCHA

點選右上角的「Admin Console」:

點擊 Admin Console
點擊 Admin Console

會出現一張「註冊新網站」的表單:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

註冊新網站 的表單
註冊新網站 的表單

「標籤」就是取一個以後我們認得出是哪個站在用的名字。

「reCAPTCHA 類型」選擇「reCAPTCHA v3」:

類型選 reCAPTCHA v3
類型選 reCAPTCHA v3

勾選 v3 後,服務條款那邊會新增一段出來:

您同意明確地告知訪客您的網站採用 reCAPTCHA v3 驗證技術,且訪客使用 reCAPTCHA v3 的方式受 Google《隱私權政策》和《使用條款》的規範。reCAPTCHA 只能用來協助網站防範垃圾內容及濫用,不可挪做其他用途 (例如判斷使用者的信用等級、就業資格、財務狀態或可保險資格)。

明確告知訪看網站使用 reCAPTCHA v3 驗證技術,就是會在頁面上看到下面這個標誌:

頁面上會顯示 reCAPTCHA logo
頁面上會顯示 reCAPTCHA logo

「網域」是白名單的意思,要在這邊填寫的網域下才可以使用 reCAPTCHA 功能。

「傳送通知給擁有者」就是指當有可疑活動時,會主動收到通知信:

傳送通知給擁有者說明
傳送通知給擁有者說明

以上都填寫完,接受服務條款也勾選了,就可以按下「提交」。

按下完提交,註冊成功就會看到頁面顯示了:金鑰、密鑰。

取得金鑰及密鑰
取得金鑰及密鑰

金鑰是前端頁面使用,密鑰是後端在 server 使用。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

本篇會使用 Google Apps Script 來寫後端。

把這邊的金鑰跟密鑰都記下來,後面幾段都會用到。

忘記了也沒關係,因為 reCAPTCHA 後台 都看得到。


v3 特有的 2 個值:action、score

v3 比 v2 多出了二個值:

action

送驗證時要填的,限填英文、數字、斜線。

我們可以把他當作「貼標籤」來用,為這次的驗證貼上一個標籤,之後在後台的報表中會看到。

但因為在寫這篇時數據還不足,無法知道後台會呈現的樣子。

store

後端向 Google 發 POST 後,response 裡會帶上的值,數值是 0 到 1。

0 代表是機器人,1 代表是真的人。

目前實測,自己手動操作回來的值是 0.8。


頁面使用 reCAPTCHA 方法 1:直接埋 HTML

參考文件:Automatically bind the challenge to a button

跟 v2 一樣,v3 也提供了直接寫 HTML 的方法。

比方我們要在使用者點擊「送出」的按鈕時執行驗證,那「送出」按鈕的 HTML 就寫成以下:

必填的值就是這 4 個:

  • class 必須為「g-recaptcha」
  • data-sitekey,填入「網站金鑰」
  • data-action,v3 新增的,就是上一段中寫的「action」,這邊填的值會顯示在後台報表中
  • data-callback,驗證完成後要觸發哪個 function,會回傳 g-recaptcha-response token

這邊 callback 寫 verifyCallback,因此當 reCAPTCHA 在頁面驗證完,我們可以寫一個 verifyCallback 的 function 來抓 token 並丟給後端來驗證:

上面的程式碼是抓 0.5 以下當作機器人,實際應用時就看各自的需求。

後端收 token 後驗證的部份會寫在後續的段落中。


頁面使用 reCAPTCHA 方法 2:寫 JavaScript 使用

參考文件:Programmatically invoke the challenge

第二種方法,是直接寫 JavaScript 執行。

監聽「送出」按鈕的點擊事件,被點擊時就取 token 並送到後端做驗證。

頁面引用 JS 檔時要多帶一個參數:render,要填上網站金鑰。

在執行 grecaptcha.execute 時要帶上金鑰及 action

後端向 reCAPTCHA 驗證

這段因為跟 v2 那篇一模一樣,重複寫怕 SEO 扣分,就貼上連結,請各位移駕去看:

用 reCAPTCHA v2 來做非機器人驗證 – 後端向 reCAPTCHA 驗證

取 IP 的部份也有提供範例,同樣寫在上面 v2 的文章中。


Demo 及原始碼

本篇的 Demo 如下:

https://letswritetw.github.io/letswrite-recaptcha-v3/

方法 1、方法 2、GAS 部份,這三項都有,分成三頁。

直接看頁面原始碼可以看到 HTML 及 JS。

或是可以到 Github 上看整個 Demo 的原始碼:

https://github.com/letswritetw/letswrite-recaptcha-v3

Summary
用 reCAPTCHA v3 來做非機器人驗證
Article Name
用 reCAPTCHA v3 來做非機器人驗證
Description
本篇大綱:本篇要解決的問題。註冊 reCAPTCHA。v3 特有的 2 個值:action、score。頁面使用 reCAPTCHA 方法 1:直接埋 HTML。頁面使用 reCAPTCHA 方法 2:寫 JavaScript 使用。後端向 reCAPTCHA 驗證。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

WordPress

搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表

API

用 Performance API 檢測檔案讀取時間

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Vue

Vue CLI 安裝 Tailwind CSS

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

WordPress

如何用 MAMP 在本機安裝 WordPress

Analytics Google

GA:User-ID 功能 設定及報表檢視

API

如何用 Postman Mock Server 快速建立 API Server

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言