简介
在现代 web 应用中,为了防止机器自动提交和滥用,往往需要使用验证码来保护表单和其他用户操作。Google 提供了一种强大易用的 reCAPTCHA 服务,它可以通过人机交互的方式来验证用户的身份。express-recaptcha 是一个实现了 reCAPTCHA 验证服务的 npm 包,它可以很方便地集成到 Express.js 应用程序中。
本教程将介绍如何使用 express-recaptcha 包,包括安装、配置、使用和测试。
安装
在安装 express-recaptcha 包之前,你需要先创建一个 Google reCAPTCHA 密钥。你可以在 https://www.google.com/recaptcha/admin/create 上注册一个新密钥,或直接使用一个现有的密钥。创建完毕后,你将得到一个站点密钥和一个私钥。请记得保密私钥,不要分享给他人。
现在,你可以使用 npm 命令来安装 express-recaptcha 包:
--- ------- -----------------
配置
在你的 Express.js 应用程序中,你需要设置 reCAPTCHA 密钥和验证选项。这些选项包括“主题”和“语言”,你可以根据自己的需要自由地修改它们。在开始之前,请确保你已经安装了 body-parser 和 cookie-parser 中间件。
--- ------- - ------------------- --- ---------- - ----------------------- --- ------------ - ------------------------- --- --------- - ----------------------------------------- --- --- - ---------- ------------------------------- --------- ----- ---- ------------------------ --- --------- - --- --------------------- ------------- - ------ -------- ----- ---- --- ------------------- ------------- ---- - --------------------- - ---------- ------------------ --- --- -------------------- ------------- ---- - --------------------- --------------- ----- - -- -------- - ---------------------- ------------ ---------- -- -- --------- ---- -- ------ ---- ---------- - ---- - ---------------------- ------------ ---------- -- ------- -- ----- ------- ---- - --- ---
上面的代码演示了如何使用 RecaptchaV2 类来创建一个新的 reCAPTCHA 实例,并使用它来渲染验证码表单和验证提交的答案。在 GET 和 POST 路由处理函数中,你需要使用相应的方法来处理验证码的显示和验证。如果验证通过,你可以执行一些操作来处理表单提交。
使用
使用 express-recaptcha 包来保护表单非常简单,只需要按照下面的步骤操作:
在表单页面中,使用
recaptcha.render()
方法来生成验证码 HTML 代码,并在表单表单中添加一个隐藏的recaptcha
字段:----- ------------- ------------------ ------ ------------- ---------------- --------------- ---- --- ----- ---- ------ ---- --- --- --------- -- ------- ----------------------------- -------
在表单提交处理函数中,使用
recaptcha.verify()
方法来验证验证码的答案,并根据结果执行相应的操作。-------------------- ------------- ---- - --------------------- --------------- ----- - -- -------- - ---------------------- ------------ ---------- -- -- --------- ---- -- ------ ---- ---------- - ---- - ---------------------- ------------ ---------- -- ------- -- ----- ------- ---- - --- ---
测试
为了测试 express-recaptcha 包的功能,你可以手动提交表单并看看它们是否被正确地验证。如果验证通过,你可以在 console.log 中看到一条成功消息。否则,你将看到一条错误消息。
你还可以使用自动化测试工具来测试你的应用程序。一个流行的工具是 Mocha 和 Chai,你可以使用它们来编写测试用例,并使用 supertest 来模拟表单提交。下面是一个测试示例:
--- ------ - ----------------------- --- ------- - --------------------- --- --- - ------------------ ----------------- ------ ---------- - ---------- ------- --------- ------------- -------------- - ------------ ----------------- ------- ----- ----- ----- ------ ------------------- -------- ------ -------- ---------- ------------- -- ------------ ------------------ ---- - -- ----- ------ ---------- ------------------------ ------------- ------- --- --- ---
在上面的代码中,我们编写了一个测试用例来模拟提交一条包含错误验证码答案的表单。我们期望服务器会返回一个 400 错误,并在响应文本中包含“reCAPTCHA”关键字。如果测试通过,我们可以放心地使用 express-recaptcha 包来保护表单了。
结论
在本教程中,我们介绍了如何使用 npm 包 express-recaptcha 来保护你的 web 应用程序表单,并提供了详细的配置和使用指南。如果你的应用程序需要保护用户隐私和数据安全,我们建议你考虑使用 reCAPTCHA 服务来增强安全性和可靠性。如果你有任何问题或建议,请随时联系我们。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64699