您阅读这篇文章共耗时:
reCaptcha是Google公司的验证码服务，方便快捷，改变了传统验证码需要输入n位失真字符的特点。reCaptcha在使用的时候是这样的：
只需要点一下复选框，Google会收集一些鼠标轨迹、网络信息、浏览器信息等等，依靠后端的神经网络判断是机器还是人，绝大多数验证会一键通过，无需像传统验证码一样。个人感觉比Geetest要好一些。
但是reCaptcha使用了google.com的域名，这个域名在国内是被墙的，如果使用可以用Nginx配置反向代理，本文的教程无需自行配置，我们直接使用Google官方的反向代理。
获取代码（这一步需要科学上网，以后不再需要）：首先要有Google账号，登录账号并进入这里：https://www.google.com/recaptcha/admin
在register a new site表单里填写验证名（随便命名）、域名（你要使用reCaptcha 的域），type选择v2，下面的钩钩打上，然后Register即可注册。
接着打开你刚刚创建的验证，找到Keys，记住你的site-key和select
接着可以在客户端和服务端部署了。
客户端部署代码：
在你要添加reCaptcha的页面添加script标签：
<script src='//recaptcha.net/recaptcha/api.js'></script>
接着在你要显示reCaptcha验证框的地方添加div容器：
<div class="g-recaptcha" data-sitekey="【此处添加你的site-key】"></div>
这样就完成了客户端的部署。
服务端部署代码：
服务端只需要将客户端点击验证码后传回的g-recaptcha-response值和ip以及secret传给Google的API：
https://recaptcha.net/recaptcha/api/siteverify 即可
刷新页面，就可以看到验证码已经创建好了：
是不是很简单？当然有的人不喜欢把一堆属性加在dom上，更希望通过js API来使用，没关系，我们来看看显示加载是怎么玩的。
第一步还是引入js资源文件，与上面一样，这个时候我们创建一个验证码容器，其实就是一个装载验证码组件的盒子，如下：
<div id="robot"></div>
标签没硬性要求，但一定要加一个id，在js中我们会使用到这个id，接下来是在js中做初始化工作：
grecaptcha.render('robot', {
'sitekey': '6Lfjdd8UAAAAAKzWxI0k59BW5Tcf1C76XPKir1sr', //公钥
'theme': 'light', //主题颜色，有light与dark两个值可选
'size': 'compact',//尺寸规则，有normal与compact两个值可选
'callback': callback, //验证成功回调
'expired-callback': expiredCallback, //验证过期回调
'error-callback': errorCallback //验证错误回调});
刷新页面，你会发现验证码成功展示出来了。聪明的同学已经发现了，grecaptcha.render()就是验证码组件初始化方法，它接受两个参数，前者为组件容器id，也就是我们在div上添加的robot；第二个参数是一个对象，也就是组件相关配置。
有同学就纳闷了，为啥通过API调用显示加载可以加这么多属性，dom形式自动加载能不能加这些配置？当然能，以sitekey为例，在作为标签属性时你得写作data-sitekey，同理，theme用在标签上时也得加上data-前缀，其它属性配置全部如此。
在解释这些属性前，我先附上一个完整的例子，大家直接复制替换下公钥，这样下面的解释可以同步修改理解：
<-- HTML部分 --><-- 记得引用js -->
//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 = grecaptcha.render('robot', {
'sitekey': '6LcYMd4UAAAAABb4jumQHY9ftHhZ3R0N2QxtACCp',
'theme': 'light',
'size': 'compact',
'callback': callback,
'expired-callback': expiredCallback,
'error-callback': errorCallback
});};
function getResponseFromRecaptcha() {
var responseToken = grecaptcha.getResponse(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，如下：
grecaptcha.render(container,parameters)
-
grecaptcha.reset(opt_widget_id)
-
grecaptcha.getResponse(opt_widget_id)
-
获取组件验证状态的api，同样接受一个验证码id作为参数，用于获取指定id的验证码验证状态，如果不填，则默认获取第一个验证码状态。获取的结果有两种情况，如果成功，拿到的也就是前面我们说到的response token，如果失败则拿到的是空字符串。
在上文例子我们同样提供了这个方法，大家可以在验证成功和过期两种情况下分别点击验证是否通过的按钮查看不同结果。
有同学一定会纳闷getResponse方法有啥用，说个很简单的例子，用户登录输完了账号密码，只要点击提交按钮，我们就可以通过此方法判断用户有没有提前通过验证，如果通过了再请求登录接口。
-
url参数说明
细心的同学一定发现上方例子提供的js 引用后缀有点不同，其实js引用地址也接受三个参数，也不是很复杂，我们来解释下分别表示啥意思：
<script src="https://www.recaptcha.net/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部分 -->
//js部分
function onSubmit(responToken) {
console.log(responToken);
alert('开始提交表单');};
两种复选框模式与隐式验证模式请根据实际业务场景选择使用，不存在谁好谁坏。
集成说明
说完客户端集成，我们来说下服务端如何集成，由于我没学过后端语言，这里就给不出例子了，具体说下怎么用。这里先解释下前后端怎么配合。
如上图，我们来模拟一次完整的验证过程：
用户点击登录按钮(假设用的是隐式验证模式)，弹出了图片选择框，用户选择完正确图片，点击了验证按钮。
这时其实会对谷歌发起请求，请求成功，前端拿到了response token。
前端请求与后端协商好的接口A，把response token带给后端。
后端拿着私钥与response token请求谷歌提供的接口地址B，成功并拿到了验证结果。
后端将这份数据再返回给前端，前端判断成功，这时才开始请求登录接口。
那么后端需要请求的接口地址B就是https://www.google.com/recaptcha/api/siteverify，请求方式为POST。
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介绍到这里就结束了，如果有问题或疑问欢迎留言，我会在第一时间回复你。
那么到这里，本文正式结束。
Nicely put. Many thanks.
write paper for me online essay writer write essay write my thesis for me
[url=https://diflucan.science/]diflucan buy in usa[/url]
This is nicely put! .
[url=https://dissertationwritingtops.com/]dissertation uk[/url] dissertation abstracts international [url=https://helpwritingdissertation.com/]dissertation editing[/url] writing a dissertation
[url=http://methocarbamol.charity/]robaxin 750 uk[/url]
Thank you, Terrific information!
should i do my homework hire someone to do my homework do my homework homework help
Fantastic advice. Cheers!
[url=https://payforanessaysonline.com/]order essay online[/url] essay for sale [url=https://buycheapessaysonline.com/]where to buy essays online[/url] buy college essays
[url=https://levothyroxine.foundation/]synthroid generic prices[/url]
This is nicely put! !
coursework pay to do my homework coursework do my homework for money
[url=https://ibaclofeno.com/]baclofen tablets[/url]
[url=http://tadacip.lol/]buy tadacip canada[/url]
You suggested it wonderfully!
[url=https://writinganessaycollegeservice.com/]paper writing service[/url] custom essay service [url=https://essayservicehelp.com/]customer service essay[/url] best college paper writing service
[url=https://metforminv.shop/]price of metformin 500 mg in india[/url]
Beneficial advice. Thanks a lot.
writing a persuasive essay writing essays write my essay for cheap essay writers
You suggested this superbly.
[url=https://essaywritingservicehelp.com/]best paper writing service[/url] essay service [url=https://essaywritingservicebbc.com/]college paper writing service[/url] australian essay writing service
You stated that terrifically!
term paper writing services writing essay essay writer help writing a personal essay
You said it adequately..
[url=https://helpwithdissertationwriting.com/]phd weight loss[/url] phd paper [url=https://dissertationwritingtops.com/]dissertation assistance[/url] dissertation writing
Thanks. A good amount of tips.
phd weight loss define dissertation buy dissertations dissertation writing services
Nicely put. Kudos.
[url=https://ouressays.com/]proposal essay[/url] research paper writer services [url=https://researchpaperwriterservices.com/]research paper writer services[/url] online proposal
Nicely put. Cheers.
best essay writing service review writing service essay writing service usa the best essay writing service
[url=https://topswritingservices.com/]top essay writing service[/url] essay writing prompts [url=https://essaywriting4you.com/]are essay writing services safe[/url] best paper writing services
analysis dissertation https://essayservicehelp.com
Many thanks. I value this!
[url=https://phdthesisdissertation.com/]best dissertation[/url] dissertation paper [url=https://writeadissertation.com/]dissertations[/url] phd dissertation help
Seriously all kinds of awesome knowledge!
essays for sale pay for papers order essay online buy essay online
[url=https://argumentativethesis.com/]tentative thesis[/url] tentative thesis [url=https://bestmasterthesiswritingservice.com/]thesis binding[/url] thesis paper
how to write the college essay https://custompaperwritingservices.com
Info nicely utilized..
[url=https://essaypromaster.com/]how to write a reaction paper[/url] paper writing service [url=https://paperwritingservicecheap.com/]research paper writer services[/url] essay writers
Regards! Great stuff!
who can write my essay write my essay essay writers write me an essay
Fantastic information. Cheers.
essay writers online website that writes essays for you write my essay write my research paper for me
Factor well regarded!.
write my essay for cheap help me write my essay write an essay essay writers
[url=https://writingpaperforme.com/]research paper writer[/url] pay for paper [url=https://custompaperwritersservices.com/]research paper writers[/url] writing papers
essay rewriter https://service-essay.com
With thanks, A good amount of facts.
pay someone to do my homework i don t want to do my homework hire someone to do my homework cpm homework
Thank you, I value this!
[url=https://essaytyperhelp.com/]essay helper online[/url] essay helper online [url=https://helptowriteanessay.com/]paperhelp[/url] helping others essay
With thanks! Quite a lot of knowledge!
best rated essay writing service essay writing practice online essay writing easy essay writing
[url=https://bestpaperwritingservice.com/]online paper writing service[/url] order custom paper [url=https://bestonlinepaperwritingservices.com/]best college paper writing service[/url] pay to write paper
speech writing service https://quality-essays.com
Thank you, Valuable information!
homework help should i do my homework my homework my homework
You suggested that perfectly.
[url=https://payforanessaysonline.com/]buy an essay[/url] essay for sale [url=https://buycheapessaysonline.com/]order essay online[/url] buy essays cheap
You suggested this fantastically!
[url=https://englishessayhelp.com/]essay helper free[/url] college application essay help [url=https://essaywritinghelperonline.com/]essay helper online[/url] essay helper free
You've made your point!
assignment help how to write a college essay essay bot essaytyper
[url=https://essaywritingservicelinked.com/]cheap essay writing service[/url] are essay writing services safe [url=https://essaywritingservicetop.com/]top rated essay writing service[/url] writing essay services
how to write a 5 paragraph essay https://service-essay.com
Superb info. Kudos.
essay writing services custom essay writing service org reviews writing services writing essays services
[url=https://writingpaperforme.com/]best essay writers[/url] how to write a reflection paper [url=https://custompaperwritersservices.com/]writers of the federalist papers[/url] write my term paper
writing analytical essays https://theessayswriters.com
Useful advice. Thanks a lot!
custom dissertation writing services dissertation writing services proquest dissertations what is a phd
Useful forum posts. Kudos!
[url=https://essaywritingservicehelp.com/]best executive resume writing service[/url] writing a narrative essay [url=https://essaywritingservicebbc.com/]paper writing service college[/url] essay writing practice
Truly a good deal of beneficial data!
[url=https://argumentativethesis.com/]thesis statement meaning[/url] thesis paper [url=https://bestmasterthesiswritingservice.com/]good thesis statement[/url] thesis sentence
Information clearly used..
pay for essay papers pay for an essay pay for essay papers buy essay papers
Cheers, A good amount of facts!
elements of a research proposal buy term papers online research paper proposal research proposal apa
[url=https://essaywritingservicehelp.com/]essay writers service[/url] paper writing services [url=https://essaywritingservicebbc.com/]essay writing websites[/url] cheap essay writing services
how to write a creative nonfiction essay https://essaytyperhelp.com
Terrific forum posts. With thanks.
write my paper reviews writing a paper write my paper research paper writer
Whoa tons of helpful advice!
[url=https://phdthesisdissertation.com/]dissertation writing service[/url] definition of dissertation [url=https://writeadissertation.com/]define dissertation[/url] writing a dissertation
You actually suggested this superbly.
[url=https://theessayswriters.com/]write this essay for me[/url] essay writer review [url=https://bestcheapessaywriters.com/]write an essay for me[/url] write my research paper for me
Thanks, Useful information.
proquest dissertations dissertation paper dissertation writing services reviews dissertations
[url=https://quality-essays.com/]pay for papers[/url] pay for essay online [url=https://buyanessayscheaponline.com/]order essay[/url] pay for paper
what to write in an essay about yourself https://studentessaywriting.com
With thanks. Ample posts.
free essay writing service essay writing company best resume writing service 2020 best online essay writing service
Very good content. Thanks.
need help writing an essay help essay essay helper online assignment help
[url=https://payforanessaysonline.com/]buy essay papers[/url] buy college essays [url=https://buycheapessaysonline.com/]pay for essays[/url] pay to write essay
write a essay https://hireawriterforanessay.com
Great stuff. Appreciate it.
[url=https://payforanessaysonline.com/]pay to write my essay[/url] pay to write essay [url=https://buycheapessaysonline.com/]pay for essay[/url] essays for sale
You said it perfectly..
[url=https://service-essay.com/]paying someone to write a paper[/url] buy thesis paper [url=https://custompaperwritingservices.com/]buy resume paper[/url] custom college papers
Whoa plenty of great information!
do my homework 123 courseworks help coursework writing help homework help cpm
[url=https://theessayswriters.com/]writing a good essay[/url] write my essay for me cheap [url=https://bestcheapessaywriters.com/]what to write my college essay about[/url] writing essays
writing your college essay https://studentessaywriting.com
Nicely spoken certainly. .
pay someone to do my math homework do my finance homework my homework my child refuses to do homework
Many thanks. I value it.
buy a custom essay essays for sale buy custom essays online buy my essay
[url=https://essaypromaster.com/]term paper writers[/url] paper writer online [url=https://paperwritingservicecheap.com/]custom paper writer[/url] paying someone to write a paper
yale college essay https://homeworkcourseworkhelps.com
Helpful write ups. With thanks.
[url=https://payforanessaysonline.com/]pay someone to do essay[/url] pay to write my essay [url=https://buycheapessaysonline.com/]pay for someone to do your essay[/url] pay for college essay
Whoa a lot of superb advice.
[url=https://studentessaywriting.com/]admission essay writing service[/url] writing an analytical essay [url=https://essaywritingserviceahrefs.com/]which essay writing service is the best[/url] essay writing websites
Truly lots of very good tips!
what should i write my college essay about write my essay for cheap writing an opinion essay expert essay writer
Regards! Wonderful information!
[url=https://phdthesisdissertation.com/]nursing dissertation writing services[/url] dissertation definition [url=https://writeadissertation.com/]writing dissertation service[/url] top dissertation writing service
Awesome write ups. Kudos.
paying someone to write a paper buy cheap paper pay someone to write a paper where can i buy resume paper
You mentioned it terrifically!
dissertation writing services write dissertations best dissertation writing service review editor for dissertation
[url=https://writinganessaycollegeservice.com/]write my essay service[/url] paper writing service college [url=https://essayservicehelp.com/]cheapest essay writing service uk[/url] writing an analytical essay
essay on customer service https://essayssolution.com
Really lots of helpful tips!
[url=https://bestpaperwritingservice.com/]legitimate paper writing services[/url] custom paper writers [url=https://bestonlinepaperwritingservices.com/]custom paper writing[/url] buy custom papers
You actually stated that effectively.
buy essay myassignmenthelp help to write an essay best essay help
[url=https://englishessayhelp.com/]help with essay writing[/url] essay writing help [url=https://essaywritinghelperonline.com/]help with college essay[/url] mba essay help
dissertations writing service https://customthesiswritingservice.com
Thank you! A good amount of material!
cheapest essay writing service uk are essay writing services safe top essay writing services professional essay writing services
Fine material. Appreciate it.
[url=https://bestpaperwritingservice.com/]writing paper services[/url] online research paper writing services [url=https://bestonlinepaperwritingservices.com/]best online paper writing service[/url] best custom papers
Kudos. An abundance of info.
custom essay help help with my essay custom essay help mba essay help
Thanks! Plenty of content.
buy essay writing service paper writing services for college students i need help writing an essay essay writing service 3 hours
[url=https://customthesiswritingservice.com/]thesis statment[/url] thesis writer [url=https://writingthesistops.com/]psychology thesis topics[/url] good thesis statements
teach me how to write an essay https://helpmedomyxyzhomework.com
Nicely put. Thanks a lot!
[url=https://studentessaywriting.com/]essay service[/url] cheap essay writing service us [url=https://essaywritingserviceahrefs.com/]admission essay services[/url] urgent essay writing service
Awesome posts. Thanks.
thesis writing service uk best master thesis writing service community service thesis statement thesis writer
You mentioned this terrifically!
writing a compare and contrast essay essay review service best resume writing service 2020 college essay writing services
[url=https://topswritingservices.com/]admission essay service[/url] paper writing service reddit [url=https://essaywriting4you.com/]writing a reflective essay[/url] writing essays services
the value of a college education essay https://essayservicehelp.com
You said it very well.!
[url=https://ouressays.com/]dissertation research proposal[/url] term papers [url=https://researchpaperwriterservices.com/]help research paper[/url] research paper writers
Thank you, Quite a lot of advice!
essay writers world what should i write my this i believe essay on what i would like to do for my country essay i am a writer essay sample
You said it superbly!
what should i write my college essay about quiz write an essay hire writer for essay write essay for you
[url=https://topswritingservices.com/]write my essay service[/url] cheapest essay writing service [url=https://essaywriting4you.com/]student essay writing[/url] essay writing service reddit
help writing college application essay https://custompaperwritersservices.com
Very well spoken certainly! !
[url=https://domyhomeworkformecheap.com/]buy coursework online[/url] do my accounting homework [url=https://domycollegehomeworkforme.com/]do my homework for me free[/url] courseworks help
You reported that well!
write a thesis a thesis statement medical thesis writing service india medical thesis writing service india
[url=https://bestpaperwritingservice.com/]pay for college papers[/url] custom papers for college [url=https://bestonlinepaperwritingservices.com/]paper writing service[/url] pay to have paper written
help with dissertations https://writingthesistops.com
Effectively expressed indeed! .
professional essay writers are essay writing services safe legit essay writing services essay writing courses online free
[url=https://quality-essays.com/]college essays for sale[/url] pay someone to write an essay [url=https://buyanessayscheaponline.com/]buy a essay[/url] buy essay
help writing thesis https://studentessaywriting.com
Many thanks. Numerous posts!
[url=https://ouressays.com/]research papers to buy[/url] the proposal online [url=https://researchpaperwriterservices.com/]buying a research paper[/url] proposal for phd
Info nicely taken!!
[url=https://payforanessaysonline.com/]essay writer pay[/url] pay to have an essay written [url=https://buycheapessaysonline.com/]college essay for sale[/url] buy essay online safe
Superb info. With thanks.
someone to write my essay help me write my essay easy essay writer write my essay for me free
You've made your stand very effectively!!
college paper writers online paper writer paper writers cheap paper writer cheap
Kudos, I enjoy this!
my homework help me do my homework online coursework coursework writing
[url=https://payforanessaysonline.com/]pay for my essay[/url] pay for essay online [url=https://buycheapessaysonline.com/]essay buy[/url] pay someone to write paper
thesis statement help https://researchproposalforphd.com
Valuable write ups. Cheers!
[url=https://theessayswriters.com/]write my essay custom writing[/url] write my essay for me for cheap [url=https://bestcheapessaywriters.com/]do an essay for me[/url] write my essay for me cheapdo my essay for me
This is nicely expressed. .
[url=https://ouressays.com/]proposal research[/url] research proposal introduction [url=https://researchpaperwriterservices.com/]buying a research paper[/url] college term paper writing service
Nicely put. Kudos.
uk dissertation writing help co help with dissertations writing a phd dissertation help with dissertation writing
Excellent postings. Many thanks!
proquest dissertations buy dissertation online help with masters dissertation doctoral dissertation help usa
Many thanks, Valuable stuff.
buying research papers online college term papers for sale buy term papers custom research paper writing services
[url=https://essaywritingservicehelp.com/]essay writting[/url] professional paper writing services [url=https://essaywritingservicebbc.com/]writing service[/url] cheap essay writing
writing a classification essay https://writeadissertation.com
You definitely made your point!
how to teach my child to write an essay what should i write my argumentative essay on do i italicize the title of my essay
Seriously a lot of good information!
the app that writes essays for you how to become a good writer essay hire someone to write essay
Cheers. Plenty of advice!
college term papers for sale [url=https://seoqmail.com/]pay someone to write your paper[/url]
Cheers, Loads of forum posts!
research paper writer service how to write a reflection paper do my papers cheap research paper writers
Kudos. I value this!
autobiographical essay for college https://bestpaperwritingservice.com heading for a college essay https://essayssolution.com
Regards. A lot of information!
[url=https://writingpaperforme.com/]online paper writer[/url] academic paper writer [url=https://custompaperwritersservices.com/]pay to write paper[/url] how to write a response paper
解决了
搭梯子么？ :qwq3:
搭梯子么？ :qwq3: