前言
在网站上遭受机器人攻击是一个普遍的问题，我们需要一种工具来区分人类和机器人以保护我们的网站。
Google reCAPTCHA 是一个受欢迎的解决方案，可以帮助我们验证用户是否是人类，以此来保护我们的网站不受垃圾邮件、暴力破解等攻击。
在本文中，我们将介绍如何使用一个名为 react-custom-google-recaptcha 的 npm 包来集成 Google reCAPTCHA 到我们的 React 应用程序中。
安装及使用
我们首先需要基本的 React 应用程序来使用 react-custom-google-recaptcha 包。如果您还没有这样的 React 应用程序,您可以使用 Create React App 快速创建这个应用。
下面是安装 react-custom-google-recaptcha 包的命令：
npm install --save react-custom-google-recaptcha
我们需要使用您的项目的 Google 组帐户生成您的网站密钥。请记住，您可以生成两种密钥，一种用于您的本地环境，另一种用于生产环境。对于此示例，我们将使用 gziphubs.com，因此我们将需要生成“密钥”，而不是“密钥”，我们必须使用 reCAPTCHA v2。
要生成您的“网站密钥”，请按照以下步骤：
- 访问 Google reCAPTCHA 管理界面。
- 输入您的网站域名和选择reCAPTCHA版本。
- 添加一个标签以标识您的应用程序。
- 点击“提交”并提示您选择密钥类型。
- 选择 "reCAPTCHA v2"。
- 填写 “域名”，它应该是当前使用 reCAPTCHA 的网站域名。
- 添加 reCAPTCHA 带有主题类型和网站键值对的配置对。
现在我们已经生成了我们的 reCAPTCHA 网站密钥，下一步是在我们的 React 应用程序中使用 react-custom-google-recaptcha 包。
首先，我们需要引入 Component:
import { Recaptcha } from 'react-custom-google-recaptcha';在您的组件的 render 方法中，您可以使用以下的 JSX 代码段将 reCAPTCHA 添加到您的网站：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------------
----- ------------- ------- --------------- -
---------------------- -
-- ---- -- ---- -------- ------ ---- ------- -- ------------------
-
-------- -
------ -
----------
----------------
-------------------------------
--
--
-
-
------ ------- --------------现在，当您运行您的应用程序时，您应该能够看到一个 reCAPTCHA 窗口。当您完成此操作时，您的回调函数中将触发一条消息，该消息将提示您 reCAPTCHA 已经被验证。
选项
当您使用 react-custom-google-recaptcha 包时，您可以向 Recaptcha 组件传递以下 props：
- siteKey: 您的网站密钥
- theme: 设置主题 'dark' 或 'light'
- size: 大小设定。默认设置 normal。
- tabIndex: 将 tab 索引应用于 reCAPTCHA 容器元素。默认为 0。
- onExpired: 回调函数，当 reCAPTCHA 过期时调用。
- onError: 回调函数，当 reCAPTCHA 加载错误时调用。
- onCaptchaChange: 回调函数，当 reCAPTCHA 已被验证时调用。
-- -------------------- ---- -------
------ - --------- - ---- --------------------------------
----- ------------- ------- --------------- -
---------------------- -
-- ---- -- ---- -------- ------ ---- ------- -- ------------------
-
-------- -
------ -
----------
----------------
-------------
--------------
------------
------------- -- ---------------------- -------- -------------------
----------- -- ---------------------- ------ -- ---- -------------
-------------------------------
--
--
-
-
------ ------- --------------现在，您已经具备了一个强大的 reCAPTCHA 程序以保护您的网站不被黑客攻击所侵害。
我们鼓励您使用 react-custom-google-recaptcha 包作为实现您网站安全的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735a890c4f7277583e81