在國內使用Google驗證碼reCaptcha

loeyo發表於2020-10-30
GoAPT

　　　　如今各大網站都不可缺少的一部分就是驗證碼，驗證碼具有防止惡意批量操作，保護賬戶安全等作用。但是現在各種暴力破解驗證碼的手段層出不窮，驗證碼的保護也就失去了意義。所以各大平臺為了應對這種情況也是使用類似滑動拼圖（京東、嗶哩嗶哩等）看圖識物（12306）等各種辦法，但是國內的驗證碼平臺大多是收費的，那有沒有即是免費的，驗證效果又好認可度較高的驗證碼平臺呢？這就是今天的主角了reCaptcha了。

　　　　reCaptcha最初由CMU設計，具體做為將OCR軟體無法識別的文字掃描圖傳遞給世界各大網站，用以替換原本的圖片驗證碼，網站使用者正確識別出文字之後，便會將結果傳回CMU。後來Google接手了這個專案，也就形成了Google reCaptcha，廢話不多說直接介紹如何在國內使用Google reCaptcha。

 

　　　　一、賬號註冊

　　　　首先需要去Google reCaptcha註冊賬號（https://www.google.com/recaptcha）需要梯子，這一步其實就是登入你的Google賬號，如果沒有的話請自行百度

　　　　二、驗證碼配置

　　　　開啟上方網址之後，點選Admin Console，進入到控制檯，如果之前有配置過的話控制檯會顯示一段時間內驗證碼的使用次數。如果之前沒有配置過，則會讓你建立

            

 

 

 

 　　　　下方的圖片就是沒有配置過的情形：

　　　

　　　　Label是你為當前站點所建立的名稱

　　　　reCAPTCHA type為當前所使用的驗證碼版本，這裡我們使用reCAPTCHA v2版本，並勾選"I'm not a robot" Checkbox，這樣你就得到了一個最常見的Google reCaptcha

　　　　Domains為當前驗證碼可用網域，reCaptcha只有在你寫好的域名下才可以使用，不需要寫入完整域名，比如可以寫：baidu.com, jd.com，在此域名下的所有次級地址均可使用

　　　　Owners為當前站點的管理員，如果有需要可以新增其他人的Google賬號

　　　　將上述內容填寫完成後就可以點選提交了，提成之後會得到如下的資訊：

               

 

 

　　　　　　其中Site Key是前端用來請求驗證碼所使用，需要將此key值放到前端

　　　　Secret Key是後端用來跟Google伺服器通訊校時所使用的

 

　　　　三、站點整合

　　　　當上述工作都準備完成之後，就可以開始進行站點整合了。首先來說前端部分：

　　　　a. 引用reCaptcha的js檔案到前端，國內搭建了一個映象站點來解決js檔案訪問不到的問題，請將下段程式碼複製到index.html中去：

<script src="https://www.recaptcha.net/recaptcha/api.js?render=explicit" async defer></script>

 

　　　　async和defer是為了避免載入js時間過長導致頁面空白不動，畢竟驗證碼是為了頁面而服務的

　　　　b. 載入完成之後就需要寫載入驗證碼的邏輯了

<!--驗證碼的顯示區域-->
<div id="captcha" style="margin: 10px"></div>
<script>
　　//驗證碼載入方法
　　handleLoadGoogleCaptcha() {
　　　　this.codeFlag = false;
　　　　let env = this;
　　　　env.captchaId = grecaptcha.render("captcha", {
　　　　　　//在Google reCaptcha網站獲取的Site Key
　　　　　　"sitekey": env.config.siteKey,
　　　　　　//主題
　　　　　　"theme": "light",
　　　　　　//驗證成功後的回撥函式
　　　　　　"callback": env.handleCaptchaCallback,
　　　　　　//驗證碼超時後的回撥函式
　　　　　　"expired-callback": env.handleCaptchaExpired,
　　　　　　//驗證失敗時的回撥函式
　　　　　　"error-callback": env.handleCaptchaError,
　　　　　　//預設語言 預設是英語，簡體中文寫zh-CN 如果有其他需要請自行搜尋
　　　　　　"hl": this.$i18n.locale
　　　　});
　　},
　　handleCaptchaCallback(val) {
　　　　if (val != null) {
　　　　　　this.register.captchaCode = val;
　　　　　　this.codeFlag = true;
　　　　}
　　},
　　handleCaptchaExpired() {
　　　　this.register.captchaCode = "";
　　　　this.codeFlag = false;
　　},
　　handleCaptchaError() {
　　　　this.register.captchaCode = "";
　　　　//重置驗證碼
　　　　grecaptcha.reset(this.captchaId);
　　　　this.codeFlag = false;
　　},
</script>

 

　　

　　　　c. 驗證結果，當完成上述配置之後驗證碼應就會出現了，如下圖：

               

 

 

 　　　　至此前端部分的配置就算完成了，更多詳細細節可以檢視官方的配置指導手冊，接下來講後端部分：

　　　　後端部分的配置就簡單的多了只需要去傳送一個請求驗證結果就可以了，直接上程式碼

//國內映象站點URL
String TOKEN_RESTRICTIONS_URL = "https://www.recaptcha.net/recaptcha/api/siteverify";
public static boolean verify(String secret, String token) {
　  log.info("verify({},{})",secret,token);
　  RequestBody body = new FormBody.Builder()
　　　　　　//secret 就是在Google reCaptcha控制檯獲取到的secret key
　　　　　　.add("secret",secret)
　　　　　　//token是前端驗證碼驗證通過後返回的結果
　　　　　　.add("response",token)
　　　　　　.build();
　　Request request = new Request.Builder()
　　　　　　.url(TOKEN_RESTRICTIONS_URL)
　　　　　　.post(body)
　　　　　　.build();
　　try (Response response = client.newCall(request).execute()) {
　　　　String result = response.body().string();
　　　　log.info("google response:{}", result);
　　　　ApiResponse apiResponse = JsonUtils.fromJson(result, ApiResponse.class);
　　　　return apiResponse.getSuccess();
　　} catch (IOException e) {
　　　　throw new RuntimeException(e);
　　}
}

 

　　　　驗證通過之後整體流程才算完成，具體可以檢視開發指導手冊

　　　　四、總結

　　　　此篇使用的Google reCaptcha中比較常見的核取方塊形式，另外還有幾種其他形式這裡就不過多介紹了，如有需要可以去自行搜尋，使用方法與本文介紹的方法基本一致。

 

 

相關文章