简介
recaptchavalidator 是一款能够验证谷歌reCAPTCHA v3 令牌正确性的 JavaScript 库。无论是在哪个地方使用 reCAPTCHA v3，都可以通过 recaptchavalidator 验证令牌正确性。
本篇文章将教您如何使用 recaptchavalidator npm 包验证 reCAPTCHA v3 令牌，本文将详细介绍该npm包的功能和具体用法，帮助您快速和轻松地了解和使用该库。
安装
您可以在终端使用 npm 安装 recaptchavalidator。
npm install recaptchavalidator
使用
STEP 1: 显示reCAPTCHA v3 Widget
在 HTML文件中，必须首先引入 reCAPTCHA 的 JavaScript API 和 recaptchavalidator 库。
<!-- Google reCAPTCHA API --> <script src="https://www.google.com/recaptcha/api.js?render=RECAPTCHA_SITE_KEY"></script> <!-- recaptchavalidator library --> <script src="./node_modules/recaptchavalidator/src/recaptchavalidator.min.js"></script>
注意，在 reCAPTCHA API 标记 RECAPTCHA_SITE_KEY 的位置必须填写您的网站所颁发的 sitekey。
接下来，在您的 HTML 页面中添加一个与 reCAPTCHA v3 对应的invisible reCAPTCHA。
<div id="recaptcha" data-sitekey="RECAPTCHA_SITE_KEY" data-size="invisible"></div>
STEP 2: 获取reCAPTCHA v3令牌
使用 reCAPTCHA API 获取 reCAPTCHA v3 令牌。在这个过程中，调用一个 JavaScript 函数 grecaptcha.execute()。该函数将触发 reCAPTCHA v3，生成一个令牌并返回。
-- -------------------- ---- -------
----- --------- - --- --------------------
-------- --------------------
---
------------------------------------------ -- -
-- --------------------
-----------------------------
---------------- -- -
-- -----------------
-------------------
---STEP 3: 验证reCAPTCHA v3令牌
使用 recaptchavalidator 验证 reCAPTCHA v3 已生成的令牌。在此示例中，您可以调用 recaptcha.validate() ，该函数将返回一个布尔值，指示 reCAPTCHA v3位于页面上的合法性。
recaptcha.validate(grecaptchaToken).then((isValid) => {
// 如果返回true，则验证码正确
console.log(isValid);
}).catch((error) => {
// 如果出现异常，则在这里显示错误信息
console.log(error);
});您现在已经成功地验证了 reCAPTCHA v3 令牌。您可以根据返回的信息，自行处理接下来的操作。
示例代码
下面是完整可运行的示例代码，它展示了如何使用recaptchavalidator 验证 reCAPTCHA v3 生成的令牌，以及怎样巧妙地委托此验证过程。它简化了实际生产环境中的许多可能的问题，并演示了您可能遇到的错误和警告信息。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------------
------- ---------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------
-------
------
---- -------------- --------------------------------- ----------------------------
------- ----------------------------------------------
--------
----- --------- - --- --------------------
-------- --------------------
---
-------- ------------------------ -
-------------------
----------------------- -- -
-----------------------------
------ -----------------------------------
--
--------------- -- -
-- --------- -
--------------------
--------------
- ---- -
----------------------
----------------
-
--
------------ -- -
-------------------
-------------- - ----------- - - -------
---
-
---------
-------
-------在这段代码中，当您点击按钮时，它将使用 reCAPTCHA v3 令牌进行验证，然后使用 alert() 弹出验证成功或失败的信息。
指导意义
至此，您已经了解了如何使用 recaptchavalidator 验证 reCAPTCHA v3 令牌，希望本文能够为您提供实用的帮助。
该npm包可用于任何使用 reCAPTCHA v3 的应用，并可以轻松处理无障碍性，具备高度的可扩展性，使其成为在前端开发中最佳的reCAPTCHA v3验证库之一。
当然，本篇文章并未涉及到该npm包的所有内容，如果您需要更深入的学习，请查看 recaptchavalidator 的官方文档，本篇文章的目的是介绍如何让您快速使用并理解该npm包的基本功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbd81e8991b448da4f8