在国内使用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中比较常见的复选框形式，另外还有几种其他形式这里就不过多介绍了，如有需要可以去自行搜索，使用方法与本文介绍的方法基本一致。

巴特西

在国内使用Google验证码reCaptcha

最新文章

热门文章