【Asp.net】使用 reCAPTCHA 作为网站验证码

(本文暂不讨论reCAPTCHA Android的使用方式,因为我也没用过XD)

1.申请reCAPTCHA API keys

想要使用reCAPTCHA,首先需要在reCAPTCHA控制台申请服务,并选择需要使用的API版本

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

其中,reCAPTCHA V2版需要用户选择一个复选框,Google将会在屏幕上呈现一些判断题,以验证用户是机器人还是人类

例如:

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

而reCAPTCHA Invisible则不需要用户选择复选框,可以直接集成在网页的提交按钮中,由Google根据用户的流量自动判断访问页面的是机器人还是人类

当Google发现可疑流量时,才会弹出与reCAPTCHA v2一样的验证码,此时,网页右下角会显示如下标志:

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

2.设置API

reCAPTCHA只会允许后台内设置的域名使用验证服务,否则会出现如下错误提示:

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

为了方便本地调试,建议在域名列表(Domains)中添加localhost与127.0.0.1

例如:

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

点击“Save changees”按钮,更新设置。

3.在页面中添加相应的控件

本部分以reCAPTCHA v2为例,整个验证的流程为:

(1)用户点击验证,前端页面获取到一个g-recaptcha-response值;

(2)将这个值发送到后端;

(3)后端再将Secret key、g-recaptcha-response、用户客户端ip(可选)一起发送到Google服务器;

(4)Google向后端返回是否验证成功;

(5)接入验证流程……

找到页面内的“Adding reCAPTCHA to your site”处,点击“Keys”,获取密钥

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

Site key需要放在前端页面中,而Secret key则需要放在后端,不能泄露

在网页头部添加如下js文件:

因为Google reCAPTCHA所在域名被墙,如果服务需要在国内访问,请替换为如下地址:

然后在页面中添加相应的控件:

其中,“data-sitekey”的值为申请到的Site key,“data-callback”为用户完成验证后调用的回调函数。

这样,我们就搭建出了一个基本的页面:

(注意!ajax.js仅为个人方便而调用的ajax轮子,可以替换为js原生方法或jQuery ajax)

 

(1)获取g-recaptcha-response

有两种方式可以获取到这个值:

1. 使用grecaptcha.getResponse()函数
2. 在data-callback中添加一个回调函数

比如:

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

此处可以看出,他们获取的结果是相同的。

(2)将这个值发送到后端

(3)后端验证

本文编写的是Asp.net一般处理程序(.ashx),并使用了Newtonsoft.Json框架来解析json数据,仅供参考

需要特别注意的是,向Google服务器提交数据时,虽然提交方式是POST,但必须像GET请求那样添加参数,否则会返回缺少参数的错误

(被这个坑了好久,md我的心好痛)

《【Asp.net】使用 reCAPTCHA 作为网站验证码》

(4)Google返回的结果

这是一个验证成功的例子:

这是一个验证失败的例子,失败的原因是缺少参数:

以下是Google官方对于error-codes的说明:

missing-input-secret secret参数丢失
invalid-input-secret secret参数无效或格式错误
missing-input-response response参数丢失
invalid-input-response response参数无效或格式错误
bad-request 请求无效或格式错误

(5)接入验证流程

单独地使用reCAPTCHA并没有什么用处,如果最终的判断仍在前端,那么该验证还是可以被篡改的。

一个良好的使用方式是,将g-recaptcha-response值参杂在提交的表单中,亦或是在后端完成验证后,才返回某种用户需要查询的内容。

5.总结

本文编写的reCAPTCHA v2完整例子,以及并未列出的reCAPTCHA Invisible例子,均已开源在Github上。

欢迎大家学习研究,并指出本人的bug与不足。

reCAPTCHA v2:https://github.com/KatyushaScarlet/reCAPTCHA-v2-Demo

reCAPTCHA Invisible:https://github.com/KatyushaScarlet/reCAPTCHA-Invisible-Demo

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注