在网站上安装复选框密钥（复选框挑战）

自动呈现微件

借助此方法，您可以使用 g-recaptcha 类在任何对象（例如 div 或 span）上呈现微件。

在网页上，添加必要的 JavaScript 资源和带有 g-recaptcha 类的 HTML 元素。

在具有 g-recaptcha 类的元素中，还要添加 data-sitekey 属性并将其设置为您的复选框密钥。

如需指定操作，请添加 data-action 属性，并将其设置为操作名称。如需更多指导，请参阅操作。

该脚本必须使用 HTTPS 协议加载，并且可以从页面的任意位置无限制地添加。

reCAPTCHA 默认使用浏览器的语言。如果您想指定其他语言，请在脚本中使用 hl=LANG 属性。例如，如需使用法语，请指定以下内容： 。如需了解支持的语言，请参阅 reCAPTCHA 的语言代码。

以下示例是一个示例代码段：

    
      
        
        
      
      
        

          
KEY_ID" data-action="LOGIN">
          

          
        
      
    

明确呈现微件

借助此方法，您可以使用 grecaptcha.enterprise.render() 方法通过现有 JavaScript 脚本来呈现微件。要避免竞态条件，或者想要根据现有 JavaScript 逻辑显示微件，请使用此方法。

为确保在明确呈现微件时不存在竞态条件，请查看以下注意事项：

• 先使用回调函数对脚本进行排序，然后再使用 reCAPTCHA API。
• 在 script 标签中使用 async 和 defer 参数。

要明确呈现微件，请按以下步骤操作：

1. 要延迟微件的呈现，请执行以下操作：

   1. 在加载 reCAPTCHA API 和其他依赖项之前，请指定 onload 回调函数。

   2. 执行回调函数后，请使用 JavaScript API 中的以下参数调用 grecaptcha.enterprise.render() 方法。

      • 容器：用于呈现 reCAPTCHA 微件的 HTML 元素。指定容器的 ID（字符串）或 DOM 元素本身。

      • 参数：一个对象，它包含作为键值对的参数，例如 {"sitekey": "KEY_ID", "theme": "light"}。

      • action：指定与受保护元素相关联的操作名称。

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : 'KEY_ID',
         'action': 'LOGIN',
       });
      

2. 如需呈现微件，请插入 JavaScript 资源。 将 onload 设置为 onload 回调函数的名称，并添加 render=explicit。

   reCAPTCHA 默认使用浏览器的语言。如果您想指定其他语言，请在脚本中使用 hl=LANG 属性。例如，如需使用法语，请指定以下内容： 。如需了解支持的语言，请参阅 reCAPTCHA 的语言代码。

示例 1

以下代码示例展示了 onload 回调后的明确呈现：

示例 2

以下代码示例展示了多个微件的明确呈现：