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 表示很可能是漫游器)。 您可以根据该得分针对网站环境采取可变措施。网站各有不同,但您可以参考下面几个示例,了解网站如何使用得分。如下面的示例所示,您可以在后台采取措施,而不是阻止流量,以更好地保护您的网站。

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

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

操作

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 加载与可信类型兼容的代码。