在前端开发中，安全性是一项十分重要的任务，各种输入检验和验证码技术也就成了必备技能之一。而 invisible-recaptcha 作为一款常用的验证码工具，可谓是不可或缺的一部分。本文将对 npm 包 invisible-recaptcha 的使用进行详细介绍，以帮助读者更好地掌握其使用。
什么是 invisible-recaptcha?
invisible-recaptcha 是 Google reCAPTCHA API 服务的一种版本。reCAPTCHA API 服务是一种“验证码工具”，它能够防止恶意程序和自动提交，同时识别人类的被选中和操作行为。invisible-recaptcha 主要特点在于对用户友好，对于前端开发者，它提供了非常丰富的接口，可以方便地创建和使用验证码，以及封装多种验证类型。
安装和使用
安装
你可以在 npm 上找到 invisible-recaptcha 的最新版本，或者直接通过以下命令进行安装：
npm install --save invisible-recaptcha
使用
首先，你需要引入 invisible-recaptcha 包，并初始化实例。然后，你可以调用 invisible-recaptcha 提供的 API 来生成验证码、渲染以及验证。
以下是一个简单的例子，它演示了如何使用 visible-recaptcha 并进行ajax提交。
-- -------------------- ---- -------
------ ------------------ ---- ----------------------
----- --------- - --- --------------------
-------- --------------------------
--------- ------------------ -
---------------------- ----------- ----------
-- -- ---- ----- --- ---- ------ ------ -------- --------
--------
---- -------------------
------- -------
--------- -------
----- -
--------- --------
--
-------- --------------- ----------- -
----------------- ---------- ------------- ------------
--
------ --------------- ----------- ------------ -
------------------ ---------- --------- ----------- -------------
-
---
--
-------------- -------- -- -
----------------------- ---- ----- ---- --------- --- -------
--
---------------- -------- -- -
----------------------- -------- --------------------
------------------
--
--
----------------------------------------------------------------- --------------- -
-----------------------
--------------------
---API 介绍
当然， invisible-recaptcha 提供了众多 API ，可以根据项目的需要自行封装。学习这些 API 是学习 invisible-recaptcha 最基础的方法。
new InvisibleRecaptcha(options)
options{Object} 配置参数对象
-- -------------------- ---- ------- --- -------------------- -------- ------------------ -- -------- ------ -------- -- ------ - ---------- ------- ----- --------- -- --------- - --------- -- -------- --------- -- -- ----- --- - ------ -------------- -- ---- -------------- ------------- -------- --------- ------- -- ---------------------------- -------------- --------- ----- ---------- ----- -- ---------- ----- ---------- --------- --- -------- --------- ------ -- --- --------------------------------------- ------- -------- -- --- -- --------- ---------- ------- ----------- -- --------- ------ --- ----- -- -------- ---- --- ------- ----- ---- --------- -------- ---------- --- ------------- -------------- -------- -- --- ---------------- ---------------- -------- -- --- -------- ------------- ----- -- -- ---- -- ------- ------- ----- --- ------ -- ----- --- --- ------ -------- ----- --
.render()
手动渲染 reCAPTCHA 对象，这个函数在 options.render = 'explicit' 模式下必须调用。
recaptcha.render();
.execute(immediate)
在任何时候手动调用 reCAPTCHA 验证提交回调函数的方法。
immediate{Boolean} （可选）默认false，如果true，将执行实际的 reCAPTCHA 验证。
recaptcha.execute();
.reset()
重置 recaptcha。在这个方法的执行后，验证码就需要重新生成了。
recaptcha.reset();
结语
通过本篇文章，我们了解了如何使用 npm 包 invisible-recaptcha 进行前端开发验证码的创建和使用。对于前端开发者，理解 reCAPTCHA API 服务的使用方式是很有必要的，这样可以提高我们的开发效率，同时提高产品的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2f0