前言
最近正在整理形象網站的後台技術，我想說在登入頁面加上「機器人驗證」。
常見的機器人驗證有 2 家廠商：Google reCAPTCHA 以及 Cloudflare Turnstile
這 2 間的技術我都沒寫過，所以我打算來踩雷一下，就先用 Google reCAPTCHA 試水溫。
說到 Google reCAPTCHA，它有分 v3 和 v2，以前的 v2 版本就是「圖形驗證」。
不過我自己還蠻討厭狂按圖形的，因為還要動腦解謎題，實在有夠煩。
網路上面好像都是 v2 版本的教學居多，這次我就寫看看 v3 版本！
前端、後端我都會寫範例 Code，總共拆成 2 篇文章。
使用情境
1. 你想要保護網站，阻擋機器人的惡意嘗試。
2. 你希望從 v2 版本轉換至 v3 版本。
註冊 reCAPTCHA
先進入 Google reCAPTCHA 的官網，下方有簡單的介紹和影片。
影片講解蠻清楚的，有時間的話可以看看。
看完就點擊「開始使用」。
接下來就是工程師常看的串接文件，相信你一定不陌生...
不過這篇沒有重頭帶大家看啦，因為這樣很花時間，有需要再回來查。
所以就先點「開始使用」吧～
現在就來設定 reCAPTCHA 的資訊
1. 標籤：輸入專案名稱 (建議與 GCP 專案名稱一致)
2. reCAPTCHA 類型：選 v3
3. 網域：去除 http 和 port 號，例如：
(1) user-name.github.io：方便線上測試
(2) localhost：在本地端開發用
4. Google Cloud Platform 專案名稱：可以與上方「標籤」一樣。
過幾分鐘，你就會拿到公鑰和私鑰～
寫前端程式碼
現在就來寫扣，建立一個基本的 HTML。
第 8 行：加入 JavaScript API
第 13 行：建立一個 form 表單，包含一顆 button 提交按鈕。
class 名稱需要為 g-recaptcha，並且包含 data-sitekey。
其中「api_public_key」就是網站公鑰 (上圖第一個)
進入 Demo 網站，看到右下方出現「保護機制」，就代表成功了。
改天我再來寫後端驗證的方式～
今天就跟大家介紹到這邊，如果我有幫助到你，或者你有疑問，都可以在下方跟我聊～
我是 W 先生，我們下次見！
順便打個廣告：我預計在 2025 上半年舉辦我的碩士論文訪談，想參加的可以看這裡。
懶人包
參考文章
用 reCAPTCHA v3 來做非機器人驗證 - Google - Let's Write
🔥 馬上追蹤本站，千萬別錯過最新文章～
留言列表
軟體教學 (30)