随着网络攻击愈发普遍，网站需要提高安全性以保护用户隐私和数据安全。为此，添加 Google reCAPTCHA 是实现防止机器人滥用网站的有效方法。如果您正在使用 Next.js，那么在添加 Google reCAPTCHA 时也许遇到过许多问题。本文将为您提供详细的步骤和示例代码，帮助您在 Next.js 项目中添加 Google reCAPTCHA。
基本概念
Google reCAPTCHA 是一种验证功能，可帮助网站确认是否是人类在使用该网站。reCAPTCHA 使用 Google 的先进技术来区分人类和机器人，同时增加安全性，确保您的网站安全可靠。它主要有两种类型：
- reCAPTCHA v2
- reCAPTCHA v3
reCAPTCHA v2 是一种复选框验证，在验证过程中需要输入验证码或照片。而 reCAPTCHA v3 是一种隐式验证，没有任何UI元素。通过向后台发送AJAX请求，用户的行为将被评估并给予分数。 如果分数低于设定值，那么这个用户将被认为是机器人并被阻止。
在本文中，我们将仅讨论如何在 Next.js 项目中添加 reCAPTCHA v2。
步骤
第一步：注册 Google reCAPTCHA
首先，您需要注册并获得 reCAPTCHA 的站点密钥和秘钥。打开 https://www.google.com/recaptcha/admin/create 在Google ReCAPTCHA管理页面中，按照向导填写表格。一旦完成，在 reCAPTCHA 管理页面上可以获得 Site key 和 Secret key。请妥善保管这些密钥。
第二步：安装 react-google-recaptcha 包
在 Next.js 项目中添加 reCAPTCHA 的最好方法之一是使用开源包 react-google-recaptcha，它提供了可重用的Google reCAPTCHA 片段组件。
使用以下命令来安装：
npm install react-google-recaptcha
第三步：添加 reCAPTCHA 到表单页面
在要添加 reCAPTCHA 的表单页面上，您需要使用以下代码片段添加 reCAPTCHA 组件。此代码将标准化 reCAPTCHA 客户端脚本和CSS文件并引入 react-google-recaptcha 包：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------------------
----- ------------- ------- --------- -
------------------------------ -
-- ---- --- ---- --- --- ----- -----------------
--------------------------- --- ---- --------- -------
-
-------- -
------ -
-----
------
--- ---- ---- ---- ---
----------
-----------------------
------------------------------
--
-------
------
-
-
-
------ ------- --------------请注意，您需要将 sitekey 属性值更改为在前面步骤中获取的 Site key。这是必须的，否则 reCAPTCHA 将无法运作。
第四步：处理表单提交
现在，您需要更新表单提交处理程序，以验证 reCAPTCHA 对象是否已正确更新。此步骤包括：
- 获取 reCAPTCHA 的响应标记
- 向 Google 发送验证请求
- 根据响应的验证结果采取相应的行动。
可以使用以下示例代码实现此过程：
-- -------------------- ---- -------
----- - ---------------- - - ------------
----- -------- -------------------- - --------- -- -
----- --- - ----- ------
-------------------------------------------------- -
------------------------------------------------------------------------
-
------- -------
-
--
----- - ------- - - ----- -----------
-- ---------- ---- ---------- --- ----- --------- --------
-- --------- -
------------------ ---- ------ --- - ---------
---- ---- ---- ---------- ---- -- ----------
-
---- -
----------------- ---------- -- ----- ----- ------------
----------- ---------- ------- -- -------- --------- ---------- ---
-
-请注意，上面的代码示例中，我们使用了 RECAPTCHA_SECRET 环境变量，以保护秘钥（建议您也这样做）。此外， 'g-recaptcha-response' 是 reCAPTCHA 的默认响应密钥，必须包含在表单服务端提交处理程序上。
结论
在本文中，我们介绍了如何将 Google reCAPTCHA 添加到 Next.js 项目中。通过遵循这些简单而详细的步骤，您可以轻松地保护您的网站免受机器人攻击。
将 Google reCAPTCHA 添加到您的网站中，不仅有助于保护您的客户和业务，还有助于您提供一个更加安全和可靠的网站。希望本文能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705a830d91dce0dc8544d7c