在前端开发中，安全性是一个至关重要的问题。reCAPTCHA 是一种免费的验证码服务，它通过让用户完成简单的任务来识别用户是否是真人，从而保护网站免受垃圾邮件和自动化攻击。
simple-recaptcha-new 是一个可以轻松地集成 reCAPTCHA 到你的网站上的 npm 包。在本文中，我们将学习如何使用 simple-recaptcha-new 这个 npm 包。
安装
首先，你需要在你的项目中安装 simple-recaptcha-new 包。你可以通过运行以下命令在项目中安装该包：
npm install simple-recaptcha-new --save
配置
安装完成后，你需要配置 simple-recaptcha-new，以便在你的网站上使用 reCAPTCHA。
你可以在 https://www.google.com/recaptcha/admin 上注册一个新的 reCAPTCHA 密钥。在这个网站上，你需要提供您的网站的域名，然后选择 reCAPTCHA 的版本。在这里，我们选择 reCAPTCHA V3。
一旦你注册并创建了新的密钥，你就会得到你的 site_key 和 secret_key。你需要使用这两个密钥来配置 simple-recaptcha-new。
配置示例：
const simple_recaptcha = require('simple-recaptcha-new');
const site_key = 'your_site_key';
const secret_key = 'your_secret_key';集成
现在，让我们开始集成 simple-recaptcha-new 这个 npm 包到你的网站上。
1. 在页面中添加 reCAPTCHA
首先，你需要在你的页面中添加 reCAPTCHA。你可以在你的 HTML 页面中添加以下代码：
<script src="https://www.google.com/recaptcha/api.js?render=your_site_key"></script> <div class="g-recaptcha" data-sitekey="your_site_key"></div>
注意将 your_site_key 替换成你的实际网站密钥。
2. 验证 reCAPTCHA
一旦你在你的页面中添加了 reCAPTCHA，你需要在后端代码中验证用户是否通过了 reCAPTCHA。simple-recaptcha-new 包可以帮助你轻松地完成这个过程。
首先，你需要在你的后端代码中引入 simple-recaptcha-new 包，并传递你的 secret_key 以及用户提交的 reCAPTCHA 响应。
const simple_recaptcha = require('simple-recaptcha-new');
const secret_key = 'your_secret_key';
const response = req.body['g-recaptcha-response'];接下来，你可以使用 simple_recaptcha 包中的 validate 方法来验证用户是否通过了 reCAPTCHA。
-- -------------------- ---- -------
---------------------------- ---------
-------------- -------- -
-- ---------------- -
-- ----
- ---- -
-- ----
-
--
--------------- ----- -
-- ----
---完整示例
当你完成了上面的步骤后，你就可以完成简单的 reCAPTCHA 集成了。下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- -- ------------
------- ----------------------------------------------------------------------------
-------
------
------------- -- ---------
----- ------------- -----------------
---- ------------------- -----------------------------------
--- --
------ ------------- -------------- --
-------
-------
--------- -------------------- ---- -------
----- ---------------- - --------------------------------
----- -------- - ----------------
----- ---------- - ------------------
--------------- -------- ----- ---- ----- -
------------------- - --------- -------- ---
---
---------------------- -------- ----- ---- ----- -
----- -------- - ---------------------------------
---------------------------- ---------
-------------- -------- -
-- ---------------- -
---------------------
- ---- -
----------------- --------- -----------
-
--
--------------- ----- -
--------------
---
---结论
simple-recaptcha-new 是一个非常方便易用的 npm 包，它可以帮助你轻松地集成 reCAPTCHA 到你的网站上，从而提高网站的安全性。通过这个教程，你已经学会了如何使用 simple-recaptcha-new 包来集成 reCAPTCHA。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74772