在國內使用Google驗證碼reCaptcha

　　　　如今各大網站都不可缺少的一部分就是驗證碼，驗證碼具有防止惡意批量操作，保護賬戶安全等作用。但是現在各種暴力破解驗證碼的手段層出不窮，驗證碼的保護也就失去了意義。所以各大平台為了應對這種情況也是使用類似滑動拼圖（京東、嗶哩嗶哩等）看圖識物（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中比較常見的復選框形式，另外還有幾種其他形式這里就不過多介紹了，如有需要可以去自行搜索，使用方法與本文介紹的方法基本一致。