因为在某一个项目中需要使用验证码(登陆注册之类的),又不想自己摸(太麻烦啦),于是就想着用 Google reCAPTCHA,想着这样就可以摸鱼之类的。(在此处 十分感谢一位神秘网友的支持,提高了我90%的办事效率。(原本只有10%这样子))

首先,你需要确定自己要用哪种方式来验证

Google reCAPTCHA 目前有两种验证方式,其中 v2 又有三种方式。

先说说 v3 ,这玩意说高级是挺高级,他验证所用的方式是通过用户的ip,浏览器啥的balabala的玩意给你一个评分,然后需要开发人员根据评分的大小来判断其是否是机器人,从而进行进一步的操作。举个例子,如果评分小于 0.5 ,基本就可以判定其是机器人,然后需要给用户进行电子邮箱的验证、手机短信验证码的验证等等。这种方法感觉让开发人员要做更多的工作,而且在使用的时候右下角还会有一个悬浮窗自豪地对世界说:

本网站 由 reCAPTCHA 提供保护

当然你是谷粉的话这不算什么,可能还觉得有点好看,但我在使用的时候这玩意破坏了样式,然后让整个网站布局变得莫名其妙(

所以果果在这里果断推荐 v2。v2 的话分为复选框形式和一个“不可见”形式。按照我不负责任的推测,我估摸不可见应该是在点击登录按钮的时候进行验证并弹出一个验证框(。?)所谓所见即所得,在实际的开发过程中,果果选用的是复选框形式。

申请 API Key

你可以在 https://www.google.com/recaptcha/admin/create 申请获得。填写 信息确保准确无误后,阅读并勾选 接受“reCAPTCHA 服务条款” 并提交。(由于是进行本地测试,所以域名你也可以填 localhost)

reCAPTCHA 注册成功界面

这里 reCAPTCHA 的原理是 先在浏览器端进行验证,验证成功后会返回一个token, 然后你就可以拿着这个 token 去请求 google reCAPTCHA 服务器,他就会给你返回成功或者失败。实际的东西在文档里写得很清楚,这里就简单提一下

编者注

由于 Google reCAPTCHA 服务器在国内无法访问,实际开发时建议使用 www.recaptcha.net 替换。

前端

果果在大佬的指点下,使用了 Vue (WebPack) 进行前端的开发(然后后面就疯狂推荐 react...)

在 Vue UI 安装 vue-recaptcha 依赖后,疯狂引入一波。

由于果果这里只有部分页面需要引入,然后又不想全局引入,于是用了一种脏方法来引入外部 js(如果有更好的方法欢迎大家留言QAQ,我也觉得这种方法真的好蠢(

let recaptcha = document.createElement("script");

recaptcha.src = "https://www.recaptcha.net/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit";

recaptcha.async = true;

recaptcha.defer = true;

document.body.appendChild(recaptcha);

并在所需页面写入

import VueRecaptcha from 'vue-recaptcha';

components: { VueRecaptcha },

<vue-recaptcha ref="recaptcha" :loadRecaptchaScript="true" @verify="recaptchaVerified" @expired="recaptchaExpired" sitekey="之前申请的 client key"></vue-recaptcha>

@verify 那一块就是验证成功的回调函数啦,@expired 同理。一般来说,@verify 用来存那个 Token ,@expired 就 this.$refs.recaptcha.reset(); 一键安排重置。

然后注意在 data 开一个空变量用于存储 reCAPTCHA 返回的 TOKEN。

在所需部分 写下 HTML 元素。

然后这个验证还是不跟着布局走,没办法, 那向左偏就向左偏吧(

在用户点击登录的时候,记得判断一下 token 是否为空,为空的话让他去验证一下就行啦~

在发送登陆请求的时候,记得把 reCAPTCHA 返回的 token 结果一并提交上去哦(否则这次的人机身份验证将毫无意义(严肃))

后端

后端的操作其实就很简单了,直接向 reCAPTCHA 的 API 发送一个 post 请求,secret上带上刚才申请的 server key,response 就发送刚刚前端发来的 token,然后就会获得下面的一串神秘字符(其实这些玩意也是文档就有,自己查一下就行了)

总的来说,reCAPTCHA 作为一款验证系统,感觉还是挺友好的, (v3除外(来自果果的怨念) 省了很多做验证码的事,也省了被研究如何破解的心思


Guoguo's Blog原创文章,转载请注明来自:记录在使用 Google Recaptcha 中遇到的一些坑