googlerecaptcha⾕歌⼈机⾝份验证超详细使⽤教程，前端后端
集成说明
壹❀引
在⽇常页⾯交互中，验证码使⽤是极为频繁的，登录注册验证，⾮机器⼈操作验证等等，它遍布于每⼀个⽹站。说到验证码实现，是⼀个⾮常不错的选择，那么希望通过本⽂的使⽤介绍，能让你对于验证码的实现多⼀种可能性，让我们开始。
贰❀使⽤准备与⼀些基本概念
贰❀壹必要准备
需要准备⼀个⾕歌账号，在创建秘钥时需要将当前秘钥与⼀个⾕歌账号绑定。
有特殊上⽹的途径，创建秘钥的地址必须特殊上⽹，否则⽆法访问。
具备本地服务器，测试时需要使⽤，毕竟总不能直接拿项⽬直接上⼿，如果你不知道怎么搭建服务器，这⾥推荐，npm下载启动就可以了，使⽤⾮常简单，这⾥就不细说了。
贰❀贰⼀些基本概念
Google Rechaptcha版本说明：
reCAPTCHA v3：v3版本可以不通过任何⽤户交互进⾏验证，并返回⼀个分数，开发者可以根据分数进⾏验证提⽰，⼀般⽤于限制爬⾍等。reCAPTCHA v2 复选框版本：⽤户可以通过点击“我不是机器⼈”的复选框，从⽽触发图⽚选择以及后续的验证操作，类似图。reCAPTCHA v2 隐式验证版本：与复选框模式职责相同，区别在于⽤户使⽤时看不到复选框，取⽽代之的是通过点击按钮触发后续验证，⽐如博客园登录，⽤户在输⼊完账号密码后点击登录按钮，这时会弹出图⽚验证，如果通过了验证才会发起来登录请求。
reCAPTCHA v2 Android版本：安卓使⽤的验证。
V2版本分为复选框、隐式验证、安卓三个版本，本⽂主要围绕前两个版本展开介绍，注意，使⽤不同版本都得创建对应的秘钥，在开发中如果存在版本替换，⼀定记得对应替换秘钥。
Google Rechaptcha秘钥说明：
秘钥分为客户端秘钥与服务端秘钥，也就是俗称的公钥与私钥，这是⼀对，如下图是我创建的⼀对秘钥：
知道了这些，我们现在来创建属于⾃⼰的秘钥。
蒜蓉蒸胜瓜贰❀叁创建秘钥
点击，虽然此链接需要科学访问，但是界⾯却是中⽂....⾮常友好，说说创建步骤：
1. 输⼊标签，也就是取个名字，万⼀版本创建多了好通过标签区分，这⾥我就叫demo。
2. 选择recaptcha版本，这⾥我先选择进⾏⼈机⾝份验证复选框版本。
3. 输⼊域名，这对秘钥⽤在哪，本地服务器启动⼀般都是localhost，这⾥输⼊localhost。
4. 所有者，当前秘钥创建与哪个邮箱关联，⼀般登录⾕歌默认关联⾃⼰的⾕歌账号。
5. 接受recaptcha服务条款，向所有者发出提醒，默认勾选不⽤管。
6. 点击提交，就可以成功创建出⼀对秘钥了。
秘钥有了，现在我们来使⽤它，开始客户端（前端）集成。
叁❀客户端（前端）集成说明
叁❀壹复选框模式的两种加载⽅法
v2复选框版本初始化分为⾃动加载与显⽰加载两种形式，说到底就是提供了两种初始化模式。⾃动加载就是将初始化配置直接加在dom上，显⽰加载则是利⽤⾕歌提供的API启动，没太⼤区别，我们先说⾃动加载怎么玩。
不管是⾃动加载还是显⽰加载，第⼀步都是得引⽤google recaptcha js资源⽂件，如下：
<script src="le/recaptcha/api.js" async defer></script>
上述引⽤中的async与defer为可选项，⽤于作⽤⽂件下载⽅式，具体差异请异步
注意，如果我们项⽬是国内访问，需要将le替换成aptcha即可。
<script src="aptcha/recaptcha/api.js" async defer></script>
第⼆步就是配置dom，最简单的配置如下：
<div class="g-recaptcha" data-sitekey="客户端秘钥"></div>
注意，这个dom标签必须添加g-recaptcha的class名，data-sitekey填写你创建的秘钥，刷新页⾯，就
可以看到验证码已经创建好了：
是不是很简单？当然有的⼈不喜欢把⼀堆属性加在dom上，更希望通过js API来使⽤，没关系，我们来看看显⽰加载是怎么玩的。
第⼀步还是引⼊js资源⽂件，与上⾯⼀样，这个时候我们创建⼀个验证码容器，其实就是⼀个装载验证码组件的盒⼦，如下：
<div id="robot"></div>
标签没硬性要求，但⼀定要加⼀个id，在js中我们会使⽤到这个id，接下来是在js中做初始化⼯作：
'sitekey': '6Lfjdd8UAAAAAKzWxI0k59BW5Tcf1C76XPKir1sr', //公钥
'theme': 'light', //主题颜⾊，有light与dark两个值可选
'size': 'compact',//尺⼨规则，有normal与compact两个值可选
'callback': callback, //验证成功回调
'expired-callback': expiredCallback, //验证过期回调
'error-callback': errorCallback //验证错误回调
});
刷新页⾯，你会发现验证码成功展⽰出来了。聪明的同学已经发现了，der()就是验证码组件初始化⽅法，它接受两个参数，前者为组件容器id，也就是我们在div上添加的robot；第⼆个参数是⼀个对象，也就是组件相关配置。
有同学就纳闷了，为啥通过API调⽤显⽰加载可以加这么多属性，dom形式⾃动加载能不能加这些配置？当然能，以sitekey为例，在作为标签属性时你得写作data-sitekey，同理，theme⽤在标签上时也得加上data-前缀，其它属性配置全部如此。
在解释这些属性前，我先附上⼀个完整的例⼦，⼤家直接复制替换下公钥，这样下⾯的解释可以同步修改理解：
<-- HTML部分 -->
<div id="robot"></div>
<button onclick="getResponseFromRecaptcha()">验证是否通过</button>
<-- 记得引⽤js -->
<script src="aptcha/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en" async defer></script>
//js部分
var callback = function (args) {
console.log(args)
console.log('验证成功');
};
var expiredCallback = function (args) {
console.log(args)
console.log('验证过期');
};
var errorCallback = function (args) {
console.log(args)
console.log('验证失败');
};
var widgetId;
var onloadCallback = function () {
// 得到组件id苏州有什么好玩的地方
widgetId = der('robot', {
'sitekey': '6LcYMd4UAAAAABb4jumQHY9ftHhZ3R0N2QxtACCp',
'theme': 'light',
'size': 'compact',
'callback': callback,
'expired-callback': expiredCallback,
'error-callback': errorCallback
});
};
function getResponseFromRecaptcha() {
var responseToken = Response(widgetId);
if (responseToken.length == 0) {
alert("验证失败");
} else {
高露个人资料
alert("验证通过");
}
};
叁❀贰配置参数说明
sitekey(data-sitekey)：客户端秘钥，也就是我们创建的秘钥，这是必填项。
theme(data-theme)：验证码组件主题⾊，默认light，还有⼀个dark可选，颜⾊对⽐如下：
size(data-size)：验证码尺⼨规则，默认normal也就是长⽅形，可选值compact正⽅形，如下：
callback(data-callback)：验证成功回调，⽐如⽤户点击了我不是机器⼈复选框，弹出了图⽚，⽤户在选择完图⽚点击右下⾓的验证，如果验证成功便会触发此回调，⽐如上⽅例⼦验证成功后输出了验证成功以及⼀⼤段乱码字符，这段字符官⽅称为response token，后端会使⽤到这个token，我们在后⾯具体说。
expired-callback(data-expired-callback)：过期回调，如果⽤户第⼀次验证成功后页⾯放置⼀段时间，当前验证就会过期，⼀旦过期⾕歌会⾃动调⽤过期回调，如下：
error-callback(data-error-callback)：错误回调，验证过程中如果出现错误便会执⾏这个回调。
叁❀叁 API说明
我们已经通过上⾯的例⼦了解了初始化组件的API，⾕歌验证码⼀共也就提供了三个API，如下：
李现辟谣与王紫璇恋情初始化API，上⽂已经解释了两个参数的含义，在调⽤此⽅法后会返回⼀个验证码组件id，毕竟⼀个页⾯可能会有多处使⽤验证码，该id⽤于区分不同验证码组件。
重新加载组件API，接受⼀个参数，也就是render⽅法返回的验证码组件id，如果不填，则默认初始化页⾯中第⼀个验证码。
获取组件验证状态的api，同样接受⼀个验证码id作为参数，⽤于获取指定id的验证码验证状态，如果不填，则默认获取第⼀个验证码状态。获取的结果有两种情况，如果成功，拿到的也就是前⾯我们说到的response token，如果失败则拿到的是空字符串。
在上⽂例⼦我们同样提供了这个⽅法，⼤家可以在验证成功和过期两种情况下分别点击验证是否通过的按钮查看不同结果。
有同学⼀定会纳闷getResponse⽅法有啥⽤，说个很简单的例⼦，⽤户登录输完了账号密码，只要点击提交按钮，我们就可以通过此⽅法判断⽤户有没有提前通过验证，如果通过了再请求登录接⼝。
叁❀肆 url参数说明
细⼼的同学⼀定发现上⽅例⼦提供的js 引⽤后缀有点不同，其实js引⽤地址也接受三个参数，也不是很复杂，我们来解释下分别表⽰啥意思：
<script src="aptcha/recaptcha/api.js onload=onloadCallback&render=explicit&hl=en" async defer
⾸先，onload，render与hl都不是必填参数，填不填看你⾃⼰。
onload：加载所有依赖项后要执⾏的回调函数的名称，参考上⽅例⼦，等资源加载完毕，我们才执⾏onloadCallback⽅法初始化组件。render：是否显式加载组件，默认值为onload，表⽰⾃动加载，也就是默认到第⼀个class为g-recaptcha的标签来加载组件。例⼦中我们设置的值为explicit，意思是不启⽤⾃动加载，⽽是根据我们提供的DOM id进⾏加载。
hl：语⾔种类，你希望组件⽤哪种语⾔展⽰，详细的。如果不设置，则⾃动检测浏览器语⾔并作为标准。
OK，到这⾥，关于复选框模式的使⽤就全部说完了
我们来说说V2隐式验证版本咋玩，由于是不同版本，这⾥你得重新创建隐式验证版本的秘钥，由于隐式验证版本只是不展⽰复选框，改为使⽤按钮点击来触发图⽚选择验证，其它API，url属性等等都是⼀样的，这⾥我就直接给出⼀个完整的例⼦：
<-- html部分 -->
<button class="g-recaptcha" data-sitekey="客户端公钥" data-callback='onSubmit'>Submit</button>
<script src="aptcha/recaptcha/api.js" async defer></script>
//js部分
function onSubmit(responToken) {
安徽旅游景点介绍console.log(responToken);
alert('开始提交表单');
};
两种复选框模式与隐式验证模式请根据实际业务场景选择使⽤，不存在谁好谁坏。
肆❀服务端（后端）集成说明
说完客户端集成，我们来说下服务端如何集成，由于我没学过后端语⾔，这⾥就给不出例⼦了，具体说下怎么⽤。这⾥先解释下前后端怎么配合。
如上图，我们来模拟⼀次完整的验证过程：
1. ⽤户点击登录按钮(假设⽤的是隐式验证模式)，弹出了图⽚选择框，⽤户选择完正确图⽚，点击了验证按钮。
2. 这时其实会对⾕歌发起请求，请求成功，前端拿到了response token。
3. 前端请求与后端协商好的接⼝A，把response token带给后端。
4. 后端拿着私钥与response token请求⾕歌提供的接⼝地址B，成功并拿到了验证结果。
危害公共安全罪
5. 后端将这份数据再返回给前端，前端判断成功，这时才开始请求登录接⼝。
POST参数有三个，我们来说下分别是什么：
secret（必填）：私钥，也就是我们创建秘钥时，给服务端⽤的那个秘钥。
response（必填）：response token，这个由⽤户在前端操作后产⽣，有效期为2分钟，且只能⽤⼀次。
remoteip（选填）：⽤户ip。
返回数据格式如下：
{
"success": true|false,
"challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string,        // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...]        // optional
}
错误码分类这⾥我就不列了，具体可以查看。
有的同学⼀定会疑惑，⽤户操作完成前端不是已经知道验证成功失败了吗，何必多次⼀举还⿇烦后端去请求呢。常理上来说，只通过前端验证也是可以的，只是后端⽆法感知。⽐如博主公司已经有了⼀套验证码系统，国内⽤这套，国外⽤⾕歌这套，为了统⼀验证码验证规则，还是统⼀由后端提供验证码接⼝让前端调⽤，这个就看各位实际业务场景是什么样了。
好了，关于google recaptcha介绍到这⾥就结束了，如果有问题或疑问欢迎留⾔，我会在第⼀时间回复你。
那么到这⾥，本⽂正式结束。