介绍
grecaptcha-request是一款基于Google reCAPTCHA v2的npm包，在前端实现验证过程的同时，将请求后端认证的流程也完成。它提供了一种轻松使用reCAPTCHA v2的基于Promise的封装方式，并支持以下高级特性：
- 可以在自己的服务器上部署验证码验证服务，提供更多的安全性保障
- 支持自定义的UI（包括自定义的语言文字，颜色和样式设计等）
- 通过自定义的消息回调方式，可以在前端和后台之间完全掌控流程控制
安装
安装grecaptcha-request很简单，只需要在终端输入以下命令即可：
$ npm install grecaptcha-request --save
使用教程
初始化配置
在使用该包之前，我们需要在Google开发者控制台中创建一个reCAPTCHA v2的Site Key和Secret Key。接下来，我们在需要使用该功能的JS脚本中添加以下代码：
import { initGCReCaptcha } from 'grecaptcha-request';
initGCReCaptcha({
siteKey: 'YOUR_SITE_KEY',
secretKey: 'YOUR_SECRET_KEY',
});执行验证
当包加载完成并已经配置好以上三个参数，就可以使用grecaptcha-request进行验证了。只需简单地调用executeGCReCaptcha方法，并传递一个可选的参数，其中包含额外的验证选项（不使用默认设置）。
-- -------------------- ---- ------- ------ - ------------------ - ---- --------------------- -------------------- -- -------- ---------- ------- ----------- ------------- -------- ------------------ -- - -- ------ ---------- ---------- ------- ---------------- -- - -- ------ ---------- ----- ---
高级特性
部署后端认证服务
grecaptcha-request是为前端开发者提供的方便工具，它的目的是使reCAPTCHA v2验证变得容易。但是，从安全和防欺诈的角度来看，最好的方法是通过一个后端服务器来验证用户输入。因此，grecaptcha-request支持将验证请求发送至您的服务器（如Node.js），并在那里调用Google API完成验证过程，确保您的验证码数据得到完全保护。
您可以将后端验证服务部署在自己的服务器上，并将grecaptcha-request配置如下：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------
-----------------
-------- ----------------
--------- ------- -- -
------ -------------------------------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ ----- ---
--
---------------- -- ----------------
------------ -- -
-- -------------- -
------ ----------------------
- ---- -
------ ---------------------
-
---
--
---在此示例中，我们通过将回调函数指向一个Node.js服务器，达到了将reCAPTCHA v2验证完全移到后端的目的。
自定义UI
grecaptcha-request支持更改UI元素的几个属性，例如语言文字，颜色和样式。以下是一个例子，告诉你如何使用grecaptcha-request修改默认设置，以便更好地符合自己页面的主题：
-- -------------------- ---- ------- ------ - --------------- - ---- --------------------- ----------------- -------- ---------------- ------------- -------- ------ ------- ----- ---------- --------- -- ---
该例子中，通过设置languageCode，theme，size和tabIndex属性，我们可以更改默认UI的外观和组件，并使其更好地与自己的网站设计保持一致。
自定义消息回调
grecaptcha-request允许通过异步回调，自定义在验证过程期间发生的事件。例如，可以在请求发送之前或发送完成之后触发回调事件，来自定义进度条等UI元素的状态提示信息。
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------
--------------------
------- -----------
--------
---------- -- -
-- ------ ----- ------- -- ----- ----
-------------------- ------------ -------------
-- ---- ----- -- ------ --- ------------
-- --- --- --------- --- ------------ ---- ----
-- ------ ----- ------------ -- ---------
------------------------- -- ------------
--
------- -- -
-- ------ ----- ------------ -----
------------------------- ------ - - -------
-
--在本例中，我们使用executeGCReCaptcha中返回的Promise实现了异步回调，使得自己可以更自由的控制UI提示信息的展现方式。
结论
在本文中，我们探讨了grecaptcha-request的使用方式和高级特性，以及如何在前端上更好地应用Google reCAPTCHA v2验证功能。希望这篇文章能够帮助到你，在前端验证过程中更加轻松地实现安全和可信的验证程序。如果您有任何更好的实践和建议，请在下方评论区与我们分享，我们非常希望得到这些宝贵的反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067381890c4f72775842b7