如何将 Google reCAPTCHA 添加到网站并获取 API 密钥

保护您的网站免受垃圾邮件、机器人和欺诈活动的侵害至关重要。Google reCAPTCHA 是一项免费服务，帮助您验证真人用户，同时阻止自动化滥用。在本指南中，您将学习如何将 Google reCAPTCHA 添加到您的网站，注册 API 密钥对，并使用 Bluehost 集成 reCAPTCHA v2。
本文涵盖 reCAPTCHA v2（复选框和隐形）。有关 reCAPTCHA Enterprise 的详细信息，请参见：reCAPTCHA 版本比较。

前提条件
第一步：注册 Google reCAPTCHA API 密钥
第二步：将 reCAPTCHA v2 添加到您的网站
复选框 reCAPTCHA
隐形 reCAPTCHA
第三步：验证用户响应
安卓用户：Play Integrity API（前身为 SafetyNet）
总结

前提条件

开始之前，请确保：

您可以访问网站的 HTML 和后端/服务器文件。
您能熟练添加 HTML 和 JavaScript 代码。
您已选择要使用的 reCAPTCHA 类型（复选框或隐形）。

使用 reCAPTCHA，您需要一对 API 密钥：

网站密钥 – 用于在 HTML 中调用 reCAPTCHA 服务。
密钥 – 用于服务器端代码验证用户响应。
重要提示： 请妥善保管您的密钥，切勿泄露。

第一步：注册 Google reCAPTCHA API 密钥

访问 Google reCAPTCHA 管理控制台。
填写表单：
1. 标签 – 输入一个名称以识别您的网站。
2. reCAPTCHA 类型 – 选择“reCAPTCHA v2”。
3. 域名 – 输入您将使用 reCAPTCHA 的域名或包名。
4. Google 云平台 - 接受 Google 云服务条款及任何适用服务和 API 的服务条款。
接受 Google 服务条款。
点击提交。

完成后，您将获得 网站密钥 和密钥。
google-api-key-pair-success-registration

第二步：将 reCAPTCHA v2 添加到您的网站

从以下两种 reCAPTCHA v2 类型中选择：

选项 1：复选框 reCAPTCHA
选项 2：隐形 reCAPTCHA

复选框 reCAPTCHA

本节介绍如何在网页上显示和自定义 reCAPTCHA v2 小部件。要显示小部件，您可以执行以下操作之一：
提示：

参见配置了解如何自定义您的小部件。例如，您可能希望指定小部件的语言或主题。
参见验证用户响应以检查用户是否成功完成验证码。

自动渲染小部件
在页面上渲染 reCAPTCHA 小部件的最简单方法是使用 g-recaptcha 标签和所需的 JavaScript 资源。带有类名 g-recaptcha 的 DIV 元素及其 data-sitekey 属性中的网站密钥即为 g-recaptcha 标签。

<html>
  <head>
    <title>reCAPTCHA 演示：简单页面</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="提交">
    </form>
  </body>
</html>

重要提示： 脚本可以在页面的任何位置引入，但必须通过 HTTPS 协议加载。
显式渲染小部件
可以通过向 JavaScript 资源添加参数并指定您的 onload 回调函数来延迟小部件的渲染。
建议在显式渲染 reCAPTCHA 小部件时遵循以下步骤：

指定 onload 回调函数。当所有依赖加载完成后，将调用 onload 回调。

<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha 已准备好！");
  };
</script>

其次，插入 JavaScript 资源。在该资源中，onload 参数设置为您的回调函数名，render 参数设置为 explicit。

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

当回调执行时，您可以调用 JavaScript API 中的 grecaptcha.render 方法。
重要提示： 在 reCAPTCHA API 加载之前，必须定义您的 onload 回调函数。为避免竞态条件，建议您遵循以下步骤：

先加载包含回调的脚本，再加载 reCAPTCHA 脚本。
在脚本标签中使用 async 和 defer 参数。

隐形 reCAPTCHA

本节介绍如何启用和自定义网页上的隐形 reCAPTCHA。
调用隐形 reCAPTCHA，您可以执行以下操作之一：
提示：

参见配置了解如何自定义隐形 reCAPTCHA。例如，您可能想指定语言或徽章位置。
参见验证用户响应以检查用户是否成功完成验证码。

自动绑定挑战到按钮
在页面上使用隐形 reCAPTCHA 小部件的最简单方法是包含必要的 JavaScript 资源，并在 HTML 按钮中添加几个属性。必要的属性如下：

类名 g-recaptcha
data-sitekey 属性中的网站密钥
data-callback 属性中处理验证码完成的 JavaScript 回调函数名

<html>
  <head>
    <title>reCAPTCHA 演示：简单页面</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">提交</button>
      <br/>
    </form>
  </body>
</html>

重要提示： 脚本可以在页面的任何位置引入，但必须通过 HTTPS 协议加载。

通过编程方式将挑战绑定到按钮
通过向 JavaScript 资源添加参数并指定您的 onload 回调函数，可以延迟绑定。其功能与普通 reCAPTCHA 挑战相同。
显式渲染小部件
通过在带有属性 data-size="invisible" 的 div 中调用 execute 方法并渲染挑战，可以以编程方式调用 reCAPTCHA 验证。
建议在以编程方式调用挑战时遵循以下步骤：

在您的 div 中创建 data-size="invisible"。

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">

使用 JavaScript 方法调用 grecaptcha.execute。

grecaptcha.execute();

先加载包含回调的脚本，再加载 reCAPTCHA 脚本。
在脚本标签中使用 async 和 defer 参数。

第三步：验证用户响应

完成 reCAPTCHA 挑战后，您需要在后端验证用户的响应。

网页用户

对于网页用户，有三种方式获取用户响应：

用户提交网站表单时，可以通过 g-recaptcha-response POST 参数验证用户响应。
用户完成 reCAPTCHA 挑战后，可以通过 grecaptcha.getResponse(opt_widget_id) 验证用户响应。
如果在 g-recaptcha 标签属性中指定了 grecaptcha.render 方法或 data-callback 参数，您还可以将用户响应作为字符串参数传递给您的回调函数。

安卓库用户

如果状态返回成功，您可以调用 SafetyNetApi.RecaptchaTokenResult.getTokenResult() 方法获取响应令牌。详情请参见验证用户响应。

安卓用户：Play Integrity API（前身为 SafetyNet）

Play Integrity API 帮助保护您的应用和游戏免受潜在有害和不诚实的交互，如作弊和非法访问。它使您能够采取必要的对策，阻止攻击并减少滥用。
当您的应用或游戏在运行 Android 4.4（API 级别 19）或更高版本的设备上使用时，Play Integrity API 会提供一个签名且加密的响应，其中包含以下信息：

正版应用二进制文件 – 此响应确定 Google Play 是否识别您正在交互的未修改二进制文件。
正版 Play 安装 – 此响应确定当前用户账户是否获得许可（即用户是否在 Google Play 上安装或购买了您的应用或游戏）。
正版 Android 设备 – 此响应告知您 Android 设备是否为正版且由 Google Play 服务支持，您的应用正在该设备上运行。

总结

通过遵循本指南，您可以使用 v2 复选框或隐形选项将 Google reCAPTCHA 添加到您的网站。这有助于保护您的表单、登录页面和应用免受垃圾邮件及自动化攻击。Bluehost 通过本分步教程简化了集成过程。切记妥善保管您的密钥，并正确验证用户响应。

前提条件​

第一步：注册 Google reCAPTCHA API 密钥​

第二步：将 reCAPTCHA v2 添加到您的网站​

复选框 reCAPTCHA​

隐形 reCAPTCHA​

第三步：验证用户响应​

网页用户​

安卓库用户​

安卓用户：Play Integrity API（前身为 SafetyNet）​

总结​