介绍
Google reCAPTCHA 是一种用于防止恶意自动化攻击的流行工具。recaptcha-react 是一个方便的 npm 包，它为 React 应用程序提供了一个组件，可以轻松地将 reCAPTCHA 添加到您的应用程序中。
在这篇文章中，我们将向您介绍如何使用 npm 包 recaptcha-react。我们将提供详细的信息和示例代码，以便您可以轻松添加 reCAPTCHA 到您的应用程序。
先决条件
在继续之前，您需要完成以下先决条件：
- 拥有一个 Google 帐户。
- 注册一个 reCAPTCHA 网站，以获得一个 site key 和一个 secret key。
安装 recaptcha-react
您可以使用 yarn 或 npm 安装 recaptcha-react。在此示例中，我们将使用 npm：
npm install --save recaptcha-react
添加 reCAPTCHA 到您的应用程序
为了将 reCAPTCHA 添加到您的应用程序中，您需要在您的组件中导入 Recaptcha 组件，该组件会自动处理 reCAPTCHA 的大部分操作。
这里是一个简单的示例，展示如何将 reCAPTCHA 添加到您的应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -----
--
-
-------------- - ----- -- -
-------------------- -------- -----
--------------- ---------- --- ---
-
-------- -
------ -
-----
------
--------------------
------ ------------ --
--- --
----------------------
--- --
--------- --
--- --
----------
-----------------------
------------------------------
--
-------
------
--
-
-
------ ------- ----解释代码
该代码包含一个名为 App 的 React 类组件，其中包含一个包含 reCAPTCHA 的简单表单。
该组件的构造函数将 recaptcha 状态设置为 null。
该组件还包含一个名为 handleOnChange 的方法，当 reCAPTCHA 回调时，它将更新 recaptcha 状态。
表单包含两个输入字段（电子邮件和消息）以及 Recaptcha 组件，其中 sitekey 属性设置为您的网站的 site key。
注意，当 reCAPTCHA 试图验证用户时，它会自动验证您的网站是否已注册。如果你的网站没有注册或者没有给予正确的权限，用户验证将失败。
当用户成功完成 reCAPTCHA 时，handleOnChange 方法将在控制台中打印出验证码的值。您可以相应地重新编写该方法，以便将该值发送到服务器以进行验证。
总结
使用 npm 包 recaptcha-react 可以轻松地将 reCAPTCHA 添加到您的 React 应用程序中。为了使用该包，您需要注册一个 reCAPTCHA 网站，以获得 site key 和 secret key。
上面的示例展示了如何将 reCAPTCHA 添加到您的应用程序中。您的网站必须已经注册并获得了权限，否则验证将失败。如果您想要将该值发送到服务器以进行验证，您可以相应地重新编写 handleOnChange 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674281e8991b448e3c85