iT邦幫忙

0

網頁設計問題Google reCAPTCHA V2,當用戶沒有【選】【我不是機器人】前端如何alert阻擋submit

com 2019-10-25 17:36:354996 瀏覽
  • 分享至 

  • xImage

各位前輩好~
請問下面幾個有使用reCAPTCHA V2的網頁設計問題
http://whois.twnic.net.tw

https://www.xn.com.tw/article/recaptcha/
有些人不會去【選】【我不是機器人】就送出。
要如何在前端檢查,而不是等submit後才告知用戶【他沒選我不是機器人】?

UPDATE 2019-10-26 13:52
感謝淺水員前輩的範例,完全幫我解答了。

var gResponse=grecaptcha.getResponse();
if(typeof(gResponse)!=='string' || gResponse==='') {
    return false;
}

剛剛網頁設計實驗遇到例外性狀況。
某些地區的網路無法讀取https://www.google.com/recaptcha/api.js
希望這些地區的用戶前端可以遶過if(typeof(gResponse)!=='string' || gResponse==='')判斷
沒使用過【無法讀取URL】的Javascript判斷,不知道有前輩提供方向?

UPDATE 2019-10-27 14:20
感謝淺水員前輩的再次解答,原本以為要利用AJAX去讀URL再從反匱來判斷用戶端無法讀取GOOGLE API,實在是把問題複雜化了,還是淺水員提供的邏輯簡潔。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
4
淺水員
iT邦大師 6 級 ‧ 2019-10-25 18:40:26
最佳解答

grecaptcha.getResponse 函式會回傳一個字串
如果使用者尚未打勾,會回傳空字串
用這個可以在送給後端之前做處理

PS. 不管前端有沒有判斷使用者勾選,後端還是必須用google文件描述的流程檢查。前端檢查只是為了提升使用者體驗。

淺水員 iT邦大師 6 級 ‧ 2019-10-25 18:46:54 檢舉

照提問給的範例,大概可以改成

function xoopsFormValidate_order_form() {
    var gResponse=grecaptcha.getResponse();
    if(typeof(gResponse)!=='string' || gResponse==='') {
        return false;
    }
    //後面是原程式碼,略
}
淺水員 iT邦大師 6 級 ‧ 2019-10-26 21:06:17 檢舉

如果某些地區無法讀取 https://www.google.com/recaptcha/api.js
那麼應該不會存在 grecaptcha 物件
前端的部分可以寫成

function xoopsFormValidate_order_form() {
    if(grecaptcha) {
        var gResponse=grecaptcha.getResponse();
        if(typeof(gResponse)!=='string' || gResponse==='') {
            return false;
        }
    }
    //後面是原程式碼,略
}

只是這樣一來,後端勢必要調整成有些用戶不需要經過 recaptcha 就可登入,會降低原先的安全性。例如:

  1. 有心人可以假裝自己讀不到api.js跳過recapcha的檢查。
  2. 假使為了防止第一點,後端有透過IP等訊息判斷使用者的地區做過濾。有心人一樣可以透過VPN等方式偽裝自己的發出request的地區。
1
小魚
iT邦大師 1 級 ‧ 2019-10-25 18:03:17

使用JavaScript可以判斷,
這你Google一下應該可以找到.
而且後端應該無法判斷.

1
YoChen
iT邦研究生 1 級 ‧ 2019-10-25 18:10:35

請參考Google的官方文件
Verifying the user's response

我要發表回答

立即登入回答