Google验证码接入

此文已由作者徐莉授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

goole验证码，是一个什么神奇的东西呢，我用google搜索东西的时候，有时候会出来一个页面，像12306图片验证码一样，让你选择图中的包含门牌号的，包含猫咪的图片。像这样，如果你越快速点点点，点错的越多，后面出来的越多。。。

如果你很幸运，像这样，一键点击就通过了

看他的提示说“I'm not a robot”，调研了下，他怎么确定我不是robot的呢。

大致原理就是他 会去检测客户端环境，判断使用者是否处于人类的操作环境中。如果检测结果在容错范围内则直接通过测试，否则弹出验证码进行二次认证。检测环境内容大致有：

• 插件

• User-agent

• 屏幕分辨率

• 执行时间，时区

• 在captcha的iframe中进行鼠标、键盘、触摸操作的次数和记录

• 针对不同浏览器进行JavaScript和CSS的功能测试（应该是用来识别浏览器种类和版本的）

• 渲染canvas图

• 像服务端cookies

• 检查IP、测算用户点击的方式、频率还有timing之类 以上这些评测内容是在纯代码模拟的客户端环境（Robot）下难以控制的，客户端只是采集这些数据，实际的验证计算还是由服务端进行。而且为了防止客户端从JS源代码方面逆向攻击验证机制，他们还用JS写了一个轻量级的虚拟机，然后把核心代码编译成了二进制文件来加载执行。

那么，我们如何引入到我们的使用中呢。因为在实际项目上我们很担心注册相关的流程被刷，所以对其中的诸多流程都想加上这个验证。

按照官方文档介绍的api，接入起来也很方便。

 <script src='https://www.google.com/recaptcha/api.js'></script>

刚开始按照这个方式引入，页面上提供一个节点，他会在这个节点下通过iframe嵌入他的内容，但是因为我们是基于vue进行开发的，上面那种引入方式，需要节点在页面初始就已经存在了。

所以我们需要一种手动初始化的方式来按需引入。于是用这种方式

<script src='https://www.google.com/recaptcha/api.js' async defer></script>

并且把这些初始化工程通过封装成vue单文件组件

<template>
    <div
            id="g-recaptcha"
           
            :>
    </div></template>

他会根据g-recaptcha这个类去初始化节点，sitekey是需要根据不同的需求去申请的一个用户验证的key,然后前端手动调用render方法进行初始化，相关配置可以参考官方文档，但是发现可配置的东西并不是很多，比如size: 只有normal和compact两种，前者像上图一样一排显示，后者是两排显示。

   if (window.grecaptcha) {        this.widgetId = window.grecaptcha.render('g-recaptcha', {            sitekey: this.sitekey,            // the callback executed when the user solve the recaptcha            callback: (response) => {                // emit an event called verify with the response as payload
                this.$emit('verify', response)
            },            errorcallback: (res) => {

            }
        })
    }

组件封装完了之后，就可以在需要的流程里面引入上述组件，并且，把认证成功的回调返回的一个Token，跟业务逻辑的内容一起交给后台去验证。需要注意即使封装成组件手动初始化，也需要使用第二种方式引入，因为第一种方式需要默认提供一个验证通过的callBack,否则会报错

ReCAPTCHA couldn't find user-provided function:>这样引入了之后，就真的安全了吗？有人试着录制并回放人的鼠标操作，发现也能够成功通过这个验证。还有人成功的将前面提到的这套虚拟机进行了逆向工程，写了一套反汇编工具，可以伪造客户端的请求数据，接下来只是需要统计服务端验证的容错范围，然后根据此生成合法的请求就可以通过验证。本来没有任何东西是绝对完美的，不过他已经很大程度上帮助我们拦截掉了不少恶意行为了呢。具体效果还要看东西上线了之后的真实数据了。

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 Android TV 开发 （1）
【推荐】 组建验证码的具体工作流程