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

javascript html 網頁安全網頁設計

com 2019-10-25 17:36:35 ‧ 4874 瀏覽

分享至

各位前輩好~
請問下面幾個有使用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 }} |

直播中

3 個回答

淺水員

iT邦大師 6 級 ‧ 2019-10-25 18:40:26

最佳解答

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

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

回應 2
分享
檢舉

淺水員 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 就可登入，會降低原先的安全性。例如：