前言
在前端开发中,验证码作为一种常见的用户身份验证方式,经常会被使用到。多个验证码 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:
--- ------- ---------------
如何使用 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