国内使用谷歌免费的reCaptcha验证码

滑动继续阅读⇓

使用谷歌reCapcha验证码

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

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

选择需要的版本；reCAPTCHA 第 3 版，reCAPTCHA 第 2 版

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

选择reCAPTCHA的类型创建新站点时，可以选择四种reCAPTCHA类型。

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

reCAPTCHA v2（“我不是机器人”复选框）

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，发送一个包含公钥的请求得到Google响应后，然后将响应信息按要求发送给后台，后台带着密钥和客户端获取的响应信息请求Google的验证API，从而得到响应。

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