如何在rails掛載reCAPTCHA

陳漢庭
3 min readSep 25, 2020

--

有一次收到的任務是串接 Google reCAPTCHA Enterprise。基於在網路上查不到大家是怎麼串接reCAPTCHA,以及沒有以下是GCP console的畫面。下面的金鑰ID對應的就是SiteKey,平台詳細資料可以設定哪一些網域可以進來。

GCP reCAPTCHA 畫面

這裡的掛法為 reCAPTCHA Enterprise checkbox、reCAPTCHA Enterprise score一起掛。這裡有一個小插曲是之前有遇到一個問題是,如果單單的掛reCAPTCHA Enterprise checkbox的話會出現400錯誤(這可能是官方的問題,因為掛v2, v3 enterprise score都沒問題)。但如果是 reCAPTCHA Enterprise checkbox、reCAPTCHA Enterprise score一起掛的話,這邊有解法。

截圖的地方想要表達的是,script只要掛reCAPTCHA Enterprise score的sitekey(reCAPTCHA Enterprise score對應reCAPTCHA v2 score)。這裡講解更多關於從reCAPTCHA遷移到reCAPTCHA Enterprise的對應

渲染在畫面的application_helper.rb

主要後台判斷reCAPTCHA是否通關都寫在application_controller.rb。與前台戶動的部分寫在verify_recaptcha?,後台使用者以及前台註冊頁(是前台但前台的註冊頁因為安全問題放在後台)寫在verify_admin_recaptcha?

畫面的話就先以後台登入功能為例:

後台登入(Controller)

後台登入(View)

最後一件很重要的事情,如果掛了reCAPTCHA記得要附註著作權,不然可能有機率會出事。

參考資料:
1. Rails 如何不用Gem掛載reCAPTCHA:[連結1]、[連結2]
2. 五倍紅寶石如何一次掛載v2、v3:[連結]
3. VueJS 掛載外部Script:[連結]
4. VueJS 使用reCAPTCHA callback:[連結]
5. defer 和 async 的概念:[連結]
6. reCAPTCHA 官方提供的常見問題:[連結]

--

--

陳漢庭
陳漢庭

Written by 陳漢庭

由於零散的紀錄過了一段時間之後就看不懂了,於是為了強迫自己用故事的方式記錄學到的東西,就開啟我的發文之路。

No responses yet