在前端开发中，有些功能需要借助第三方库来实现。recaptcha 是一种反人类行为识别技术，可以在网站提交表单时防止机器人自动提交。如果你使用 React 来开发网站，那么 react-recaptcha-dev 可能就是你需要的库。
安装
使用 npm 可以很容易地安装 react-recaptcha-dev，只需运行以下命令即可：
npm install --save react-recaptcha-dev
在安装完成之后，在项目文件中引入此库即可：
import Recaptcha from 'react-recaptcha-dev'
使用方法
添加 site key
首先，你需要去 Google 的 reCAPTCHA 网站 上申请一个 site key 并将它添加到你的网站中。在网站根目录下的 index.html 文件中，添加以下代码：
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
渲染组件
添加完 site key 以后，就可以在表单中添加一个 recaptcha 组件。在组件中，你需要传入 site key、回调函数和其他配置项。
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
------------
---------- - -
----------- -----
-
-
------------------- -
---------------
----------- ----
--
-
-------- -
------ -
------
----------
-----------------------
--------------------------------------------
--
------- ------------- ----------------------------------
------
---------
-------
-
-
-在上面的示例中，当用户验证成功时，isVerified 的状态会被设置为 true，此时提交按钮才会激活。
可配置选项
你可以向 Recaptcha 组件传递多个配置项，以满足自己的需求。下面是一些可用的配置项和它们的默认值：
| 配置项 | 默认值 | 描述 |
|---|---|---|
| sitekey | undefined |
你的 reCAPTCHA 站点密钥 |
| theme | light |
组件的主题。可选值为 light 或 dark |
| size | normal |
组件的大小。可选值为 normal、compact 或 invisible |
| tabindex | 0 |
组件的 tab 键索引。 |
| hl | undefined |
组件的语言设置。请参考支持的语言。 |
| callback | undefined |
reCAPTCHA 验证通过时的回调函数。 |
| expiredCallback | undefined |
reCAPTCHA 过期时的回调函数。 |
| errorCallback | undefined |
reCAPTCHA 加载时的回调函数。 |
| container | default value() |
验证码将被放置的 HTML 元素。如果未指定，则将使用组件本身作为容器。 |
| className | undefined |
组件的 CSS 类名。 |
现实应用
以下是将 reCAPTCHA 应用到实际项目中的示例。在表单提交之前，检查验证码是否通过了验证，如果成功，则激活提交按钮：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ---------------------
------ ------- ----- ----------- ------- --------------- -
------------------ -
------------
---------- - -
----- ---
------ ---
-------- ---
--------------- ------
----------- -----
-
---------------------- - ---------------------------------
----------------- - ----------------------------
---------------------- - ---------------------------------
-
------------------------ -
----- ------ - ------------
----- ----- - ----------- --- ---------- - -------------- - ------------
----- ---- - -----------
---------------
------- -----
--
-
------------------- -
----------------------
-- ----------------------- -
---------------
--------------- ----
--
-
-
------------------- -
---------------
----------- ----
--
-
-------- -
----- - ----- ------ -------- -------------- - - ----------
------ -
---------
----------- -------
--------------- - -
---- -------------------
---- ------- --- ----- ---- --- ---- -- --- -----
------
- - -
---- -----------------
----- -----------------------------
---- -----------------------
------
-----------
-----------
------------
---------------------------------
------------------
--------
--
------
---- -----------------------
------
------------
------------
-------------
---------------------------------
-------------------
--------
--
------
---- -----------------------
---------
--------------
---------------
---------------------------------
---------------------
--------
--
------
----------
-----------------------
---------------------------------
--
------- ------------- ----------------------------------
----
---------
-------
------
--
----------
-
-
-总结
recaptcha 是一种有效的安全保护机制，可以用于网站表单的验证。react-recaptcha-dev 是一种方便易用的 React 库，可以帮助你轻松地将 recaptcha 集成到你的项目中。通过此库，开发人员可以省去自己编写底层 recaptcha 代码的烦恼，更专注于应用程序的实现。如果你正在寻找一种轻量级的 React 库，以便集成 recaptcha，那么 react-recaptcha-dev 绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005680b81e8991b448e42bb