前言
在前端开发中，验证码作为一种常见的用户身份验证方式，经常会被使用到。多个验证码 API 服务商存在，其中 Google 的 reCAPTCHA 是使用最广泛的一种。在本文中，我们将使用 npm 包 async-recaptcha 来实现 reCAPTCHA 验证，以确保用户输入合法性。
async-recaptcha 简介
async-recaptcha 是一个针对前端使用的 JavaScript 插件，可以帮助快速集成 Google reCAPTCHA 验证系统。其支持多种 reCAPTCHA 类型，包括 V2 Checkbox、V2 Invisible、V3 等。该插件基于 Promises 并支持异步操作，可用于任何前端框架或纯 JavaScript 项目。
如何安装 async-recaptcha
使用 npm 命令即可安装 async-recaptcha：
npm install async-recaptcha
如何使用 async-recaptcha
使用 async-recaptcha 只需要简单的几步：
调用 recaptcha() 函数并传入配置选项
将 reCAPTCHA 生成的 token 作为参数发送后端验证
数据合法性验证成功后执行后续操作
具体实现代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ------------------
----- ------- - -
-------- -------- -- ----- ---- ---
----- ----- -- ----------- --
----- ----- -- ----------- --
----- --------- -- ----------- ------
------ -------- -- ------------- ------
--
-- -- ----------- --
------------------
----------- -- -
-- ----- ----- ---------
-- -------------
--
---------- -- ------------------async-recaptcha 的 Options 可选项
async-recaptcha 支持多种可选配置选项，具体如下：
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| siteKey | 必填。reCAPTCHA 生成的 site key，必须替换为您的 site key | String | |
| lang | 语言。支持的语言列表：https://developers.google.com/recaptcha/docs/language 。如果未指定，则默认使用 'en' | String | 'en' |
| type | 支持的 reCAPTCHA 类型为：v2（默认），v2-invisible，v3。v2 和 v2-invisible 都需要用户进行人机验证，而 v3 不需要。 | String | 'v2' |
| size | 针对 v2 类型的 reCAPTCHA 有效。大尺寸显示为一个弹出窗口，小尺寸显示为一个紧凑的实心按钮。目前支持的大小有：'normal' 或 'compact' | String | 'normal' |
| badge | 针对 v2 类型的 reCAPTCHA 有效。徽章位置可以是 'inline' 或 'bottomright'。选项 'inline' 将默认将游标嵌入 reCAPTCHA 窗口中，而选项 'bottomright' 将让 una est incorruptus facilisis nibh position reCAPTCHA 徽章在 content 层的右下角。 | String | 'inline' |
| threshold | 针对 v3 类型的 reCAPTCHA 有效。reCAPTCHA 阈值必须介于 0 和 1 之间，表示最低可能是一台计算机的机器概率最高。这个值影响了系统如何生成 reCAPTCHA score。例如，如果阈值为 0.5，则 50% 的计算机程序会被定义为人类确认。默认为 0.5 | Number | 0.5 |
| action | 针对 v3 类型的 reCAPTCHA 有效。对于每个 reCAPTCHA，必须定义一个操作，以便 Google 应用程序可以跟踪其中的行为，这可以让 Google 更好地评估当前网站的积分。作为返回结果，您将获得一个 action 和一个分值，您可以对每个 action 明确使用不同的收费率、开销或限制。 | String |
总结
在本文中，我们介绍了如何使用 async-recaptcha npm 包来实现 reCAPTCHA 验证，以确保用户输入合法性。希望本文的介绍能够帮助您更快地集成 Google reCAPTCHA 验证系统，提高网站的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2781e8991b448d9c4d