谷歌人机验证接入实践篇-技术圈

先前文章简单介绍过谷歌人机验证的流程，今天直接把实现代码与实现过程中的几点思考同步说明一下，以供参考。

在服务端判断是否需要人机验证，判断逻辑主要基于以下几个规则：

1分钟内同一IP请求超过5次，或同一帐号请求超过5次
3分钟内请求超过8次（同一IP或同一帐号）
帐号登录地点发生变化时（国家、城市），直接启用人机验证
触发人机验证后，30分钟内都启用人机验证
人机验证通过且账号密码都正确时，下次登录请求不需要人机验证，然后循环以上判断。

网页端的代码参考实现：

指定元素盒模型，避免文字超出边界

.g_recaptcha_wrapper {    * {      box-sizing: border-box;    }}

初始化验证控件时，指定过期、错误回调，重新刷新控件；校验未勾选通过时，禁用按钮提交。

var g_logSignData = {  grecaptchaDisableLogin: false,  grecaptchaWidget: null,  grecaptchaToken: null,  disableSubmitBtn: function () {    g_logSignData.grecaptchaDisableLogin = true;        g_logSignData.grecaptchaToken = null;        //禁止提交    $("#js_signInBtn").addClass('validate-disabled');  },  enableSubmitBtn: function () {    g_logSignData.grecaptchaDisableLogin = false;    g_logSignData.grecaptchaToken = grecaptcha.getResponse(g_logSignData.grecaptchaWidget);    $("#js_signInBtn").removeClass('validate-disabled');  },  recaptchaOnloadCadllback: function () {    g_logSignData.disableSubmitBtn();    if(g_logSignData.grecaptchaWidget !== null) {      grecaptcha.reset(g_logSignData.grecaptchaWidget);      return;    }    g_logSignData.grecaptchaWidget = grecaptcha.render(document.querySelector('.g_recaptcha_wrapper'), {      sitekey: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',      'callback': function () {        g_logSignData.enableSubmitBtn();      },      'expired-callback': function () {        g_logSignData.disableSubmitBtn();      },      'error-callback': function () {        g_logSignData.disableSubmitBtn();      }    });  }};

......

如果使用gmail邮箱，可以轻易拥有无限个子邮箱。比如注册邮箱是xxx@gmail.com。以下两种方式都可以接收到邮件，在用户名中任意位置插入“.”字符或在用户名后指定+和其他字符，比如x.x.x@gmail.com、

xxx+zhihu@gmail.com。通过谷歌邮箱的这个特性，在支持的网站上，我们就可以用同一邮箱来区分注册，或实现一个邮箱注册多个账号。

检测邮箱泄漏：
https://haveibeenpwned.com/

网站流量统计、分析

https://www.similarweb.com/zh/