ReCAPTCHA 使用

Question

谷歌免费验证码reCaptcha的使用

原文链接：https://wuweijun.cn/2019/12/%E8%B0%B7%E6%AD%8CreCapture%E7%9A%84%E4%BD%BF%E7%94%A8/

目錄 Show

谷歌免费验证码reCaptcha的使用
注册谷歌获取密钥
选择需要的版本v2 还是v3
v2的使用
推荐阅读更多精彩内容

注册谷歌获取密钥

需要注册一个谷歌账户，然后申请一对公钥密钥，公钥用于前端请求谷歌，密钥用于后台验证。

https://www.google.com/recaptcha/admin

选择需要的版本v2 还是v3

https://developers.google.cn/recaptcha/docs/versions?hl=zh-cn

v3 版本是会返回一个评分，0到1之间，允许你在没有任何用户交互的情况下验证交互是否合法，让你根据分数自己进行提示验证限制爬虫等。

v2 版本则是提供几种可能，一种是点击按钮，一种则是自动提交，可以是原站点的某个按钮，或者直接用JS直接调用，需要在验证reCaptcha完成后执行回调，网站底部可以隐藏谷歌reCaptcha的徽章，你也可以隐藏。

v2的使用

展示谷歌验证插件

1. 自动渲染

重点：class="g-recaptcha" data-sitekey="your_site_key"

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

注意：国内需要用**https://recaptcha.net **代替原谷歌地址

https://www.recaptcha.net/recaptcha/api.js

2. 显式渲染

通过指定onload回调函数并向JavaScript资源添加参数，可以延迟渲染。

在加载reCaptcha js之间需要先定义好回调函数，使用async defer 加载脚本

3.配置v2

可以配置语言，主题（dark light），大小以及各种回调等。
具体看官网配置

https://developers.google.cn/recaptcha/docs/display?hl=zh-cn#configuration

4.js api

接口名称则代表了他们的意思，渲染重置获取

grecaptcha.render(
container,
parameters
)

grecaptcha.reset(
opt_widget_id
)

grecaptcha.getResponse(
opt_widget_id
)

服务端验证

注意：国内需要用**https://recaptcha.net **代替原谷歌地址

https://www.recaptcha.net/recaptcha/api/siteverify

参数	说明
secret	必选注册时拿到的密钥
response	必选前端请求拿到的响应令牌
remoteip	可选

API 响应： success 为true则验证通过

{
  "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
}

####### 5. 例子

官网例子

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

流程大概是前端加载谷歌验证码的js，发送一个包含公钥的请求得到谷歌响应后，把响应信息按要求发送给后台，后台带着密钥和客户端获取的响应信息请求谷歌的验证API，得到响应。

注意：国内需要用**https://recaptcha.net **代替原谷歌地址

https://recaptcha.net/recaptcha/api.js

https://recaptcha.net/recaptcha/api/siteverify

框架实现

https://github.com/VividCortex/angular-recaptcha/

https://github.com/DethAriel/ng-recaptcha

https://github.com/DanSnow/vue-recaptcha

设置

https://developers.google.cn/recaptcha/docs/settings?hl=zh-cn

安全性

依赖谷歌强大的机器学习算法，以及谷歌研发的维护，reCaptcha一定程度上还是可以的。目前也有开源破解方案参考,但是随着谷歌的更新其作用肯定是会失效，所以感兴趣的参考就行：

https://github.com/ecthros/uncaptcha2

风险

由于使用的谷歌服务有不可访问的风险，可以通过代理规避。

参考

https://blog.csdn.net/baidu_38990811/article/details/83546143

https://www.jianshu.com/p/c63b78a373ad

ReCAPTCHA 使用

谷歌免费验证码reCaptcha的使用

注册谷歌获取密钥

选择需要的版本v2 还是v3

v2的使用

展示谷歌验证插件

设置

安全性

风险

参考

推荐阅读更多精彩内容

相關文章

廣告

最新消息

全自動咖啡機保養

二人的白皇動畫

Wowffles鬆餅專賣店

綜藝玩很大 265

台中 loewe PTT

重生之最强星帝

马来西亚征文比赛2022

Cloudy day意思

古月奇譚之流月昭明

台北市北投區三合街一段119號

廣告

Populer

廣告

關於

合法的

幫助

社會的

ReCAPTCHA 使用

谷歌免费验证码reCaptcha的使用

注册谷歌 获取密钥

选择需要的版本v2 还是v3

v2的使用

展示谷歌验证插件

设置

安全性

风险

参考

推荐阅读更多精彩内容

相關文章

廣告

最新消息

廣告

Populer

廣告

關於

合法的

幫助

社會的

注册谷歌获取密钥