reCAPTCHA v3

reCAPTCHA v3 会返回每个请求的得分,而不会让用户感到卡顿。此得分根据用户与您网站的互动情况计算得出,可帮助您对自己的网站采取适当措施。在 reCAPTCHA 管理控制台中注册 reCAPTCHA v3 密钥。

本页介绍了如何在网页上启用和自定义 reCAPTCHA v3。

放置到网站上

reCAPTCHA v3 绝不会干扰您的用户,因此您可以随时运行它,而不会影响转化。reCAPTCHA 仅在掌握有关用户与您网站互动的背景信息(包括合法行为和滥用行为)时效果最佳。因此,我们建议在表单或操作中以及页面后台添加 reCAPTCHA 验证,以进行分析。

您可以在同一页面上对任意多个操作执行 reCAPTCHA。

自动将挑战绑定到按钮

要在网页上使用 reCAPTCHA v3,最简单的方法是添加必要的 JavaScript 资源,并在 html 按钮中添加一些属性。

  1. 加载 JavaScript API。

     <script src="https://www.google.com/recaptcha/api.js"></script>
    
  2. 添加用于处理令牌的回调函数。

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
    
  3. 向您的 html 按钮添加属性。

    <button class="g-recaptcha" 
            data-sitekey="reCAPTCHA_site_key" 
            data-callback='onSubmit' 
            data-action='submit'>Submit</button>
    

以程序化方式调用验证

如果您希望更好地控制 reCAPTCHA 的运行时间,可以在 grecaptcha 对象中使用 execute 方法。为此,您需要向 reCAPTCHA 脚本加载添加 render 参数。

  1. 使用您的网站密钥加载 JavaScript API。

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
    
  2. 针对要保护的每项操作调用 grecaptcha.execute

       <script>
          function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function() {
              grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                  // Add your logic to submit to your backend server here.
              });
            });
          }
      </script>
    
  3. 立即将令牌连同验证请求发送到您的后端。

解读得分

reCAPTCHA v3 会返回一个得分(1.0 表示很可能是完全正常的互动,0.0 表示很可能是漫游器)。根据该得分,您可以根据网站的具体情况采取相应措施。网站各有不同,但下面列举了一些网站如何使用得分。如下面的示例所示,您可以在后台采取措施,而不是阻止流量,以更好地保护您的网站。

应用场景 建议
首页 在滤除抄袭者的同时,在管理控制台中了解流量的整体情况。
登录 如果得分较低,可要求双重身份验证或电子邮件验证,以防止凭据填充攻击。
social 限制来自滥用用户的尚未回应的好友请求,以及发送有风险的评论以进行审核。
电子商务 避免漫游器接触到您的真实销售交易,并识别有风险的交易。

reCAPTCHA 通过查看您网站上的实际流量来进行学习。因此,预演环境中或实现后不久的得分可能与生产环境中不同。由于 reCAPTCHA v3 不会干扰用户体验流程,因此您可以先运行 reCAPTCHA 而不执行任何操作,然后在管理控制台中查看流量来确定阈值。默认情况下,您可以使用阈值 0.5。

Action

reCAPTCHA v3 引入了一个新概念:操作。如果在执行 reCAPTCHA 的每个位置指定操作名称,就会启用以下新功能:

  • 管理控制台中您的前 10 项操作的详细数据细分
  • 基于操作情境的自适应风险分析,因为滥用行为可能会有所不同。

重要的是,在验证 reCAPTCHA 响应时,您应验证操作名称是否符合您的预期。

网站验证响应

发出请求以验证响应令牌,就像使用 reCAPTCHA v2 或隐形 reCAPTCHA 一样。

响应是一个 JSON 对象:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "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
}

提示

  1. grecaptcha.ready() 会在 reCAPTCHA 库加载时运行您的函数。为避免出现与 api.js 竞争条件的情况,请在调用 grecaptcha 的脚本前面添加 api.js,或继续使用 v2 API 定义的 onload 回调
  2. 尝试将 execute 调用挂接到用户感兴趣的或敏感操作,例如注册、重置密码、购买或播放。
  3. 使用 https://www.google.com/recaptcha/api.js?trustedtypes=true 加载与可信类型兼容的代码。