reCAPTCHA 是眾所皆知的工人 OCR 驗證系統,在 v3 中,直接由分數判斷是否是機器人,因此也不需要核取方塊了。
最近在幫 Telegram 蒐集君 寫提交工具,因為驗證碼很麻煩,自己也懶得打所以直接拿 reCAPTCHA 來用了,由於使用 XHR 提交資料,因此 reCAPTCHA 的部分需要稍稍改寫才能夠正常運作。
始步:在 reCAPTCHA 註冊新的網站
要使用 reCAPTCHA,必須要先到 Google 註冊才能夠使用,以下是註冊流程。
註冊新網站:https://www.google.com/recaptcha/admin/create
標籤:填入自己方便記憶的名稱即可
類型:選 v3
網域:輸入自己要用的網域,如果你要在本地測試,可以再加上 localhost
全部輸入完成後按下下方的「提交」即可
註冊完成後,你會拿到兩串金鑰,請好好保存,其中密鑰不能給他人知道。
加入 reCAPTCHA 到前端頁面吧!
把下面的程式碼貼到你的網頁中吧!別忘了將 reCAPTCHA_site_key 換成你的網站金鑰
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(token => {
//這裡拿到的 token 要在 XHR 請求時也發給伺服器驗證
});
});
</script>
完成後,應該就能在網頁右下角看見 reCAPTCHA 的標誌了
完成後端驗證
發送請求的方式百百種,因為我的後端語言用 node.js 所以就拿 request-promise 來送請求。
*請自行修改程式碼以符合需求
const rp = require("request-promise")
let result = await rp({
method: 'post',
uri: "https://www.google.com/recaptcha/api/siteverify",
qs: {
secret: reCAPTCHA_secret_key, //你的密鑰
response: token //前端送來的 token
},
transform: x => JSON.parse(x)
})
// 驗證失敗
if (!result.success) return res.json(result)
提交工具也有在 GitHub 上開源,尼也可以參考其中的程式碼
https://github.com/gnehs/tg-submit