在 Next.js 项目中添加 Google reCAPTCHA 的详细步骤

面试官：小伙子，你的代码为什么这么丝滑？

随着网络攻击愈发普遍，网站需要提高安全性以保护用户隐私和数据安全。为此，添加 Google reCAPTCHA 是实现防止机器人滥用网站的有效方法。如果您正在使用 Next.js，那么在添加 Google reCAPTCHA 时也许遇到过许多问题。本文将为您提供详细的步骤和示例代码，帮助您在 Next.js 项目中添加 Google reCAPTCHA。

基本概念

Google reCAPTCHA 是一种验证功能，可帮助网站确认是否是人类在使用该网站。reCAPTCHA 使用 Google 的先进技术来区分人类和机器人，同时增加安全性，确保您的网站安全可靠。它主要有两种类型：

  1. reCAPTCHA v2
  2. 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 片段组件。

使用以下命令来安装：

--- ------- ----------------------

第三步：添加 reCAPTCHA 到表单页面

在要添加 reCAPTCHA 的表单页面上，您需要使用以下代码片段添加 reCAPTCHA 组件。此代码将标准化 reCAPTCHA 客户端脚本和CSS文件并引入 react-google-recaptcha 包：

------ ------ - --------- - ---- --------
------ --------- ---- -------------------------

----- ------------- ------- --------- -

  ------------------------------ -
    -- ---- --- ---- --- --- ----- -----------------
    --------------------------- --- ---- --------- -------
  -

  -------- -
    ------ -
      -----
        ------
          --- ---- ---- ---- ---
          ----------
            -----------------------
            ------------------------------
          --
        -------
      ------
    -
  -

-

------ ------- --------------

请注意，您需要将 sitekey 属性值更改为在前面步骤中获取的 Site key。这是必须的，否则 reCAPTCHA 将无法运作。

第四步：处理表单提交

现在，您需要更新表单提交处理程序，以验证 reCAPTCHA 对象是否已正确更新。此步骤包括：

  1. 获取 reCAPTCHA 的响应标记
  2. 向 Google 发送验证请求
  3. 根据响应的验证结果采取相应的行动。

可以使用以下示例代码实现此过程：

----- - ---------------- - - ------------

----- -------- -------------------- - --------- -- -
  ----- --- - ----- ------
    -------------------------------------------------- -
      ------------------------------------------------------------------------
    -
      ------- -------
    -
  --
  ----- - ------- - - ----- -----------

  -- ---------- ---- ---------- --- ----- --------- --------
  -- --------- -
    ------------------ ---- ------ --- - ---------
    ---- ---- ---- ---------- ---- -- ----------
  -
  ---- -
    ----------------- ---------- -- ----- ----- ------------
    ----------- ---------- ------- -- -------- --------- ---------- ---
  -
-

请注意，上面的代码示例中，我们使用了 RECAPTCHA_SECRET 环境变量，以保护秘钥（建议您也这样做）。此外， 'g-recaptcha-response' 是 reCAPTCHA 的默认响应密钥，必须包含在表单服务端提交处理程序上。

结论

在本文中，我们介绍了如何将 Google reCAPTCHA 添加到 Next.js 项目中。通过遵循这些简单而详细的步骤，您可以轻松地保护您的网站免受机器人攻击。

将 Google reCAPTCHA 添加到您的网站中，不仅有助于保护您的客户和业务，还有助于您提供一个更加安全和可靠的网站。希望本文能对您有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6705a830d91dce0dc8544d7c

阅读全文

猜你喜欢

  • 使用 CSS Grid 实现响应式设计布局的技巧

    在前端开发中，布局是一个至关重要的部分。随着移动设备的普及，响应式设计已经成为了一种标准的设计方式。CSS Grid 是一种普及度越来越高的布局方式，它提供了一种简单而灵活的方式来实现响应式设计布局。

    9 天前
  • 通过 Server-Sent Events 在前端实现实时聊天系统

    在现代 Web 应用程序的发展中，实时通信已成为日常任务。其中最常见的实时通信需求之一是实时聊天系统。实时聊天系统是一种允许用户即时发送和接收消息的 Web 应用程序。

    9 天前
  • PM2 的 watch 功能使用

    什么是 PM2？ PM2 是一个 Node.js 应用程序的生产环境进程管理器。它可以帮助您轻松地管理和监视您的 Node.js 进程。PM2 可以让您运行多个 Node.js 应用程序，而不必担心它...

    9 天前
  • 深入探讨无障碍性能优化的方案

    前言 随着互联网的发展，越来越多的人开始依赖网络中的信息和服务。但是，我们可能会经常忽略一些人，那些残疾人、老年人、甚至是那些连接速度慢的用户。这就需要我们更加关注无障碍性能问题。

    9 天前
  • Webpack 的优化实践与实例

    前言 在现代的前端开发中，Web 网站的性能优化是非常重要的一环，因为它关系到用户体验和网站的流量。Webpack 是一款非常流行的前端模块化打包工具，它可以帮助我们将多个 JavaScript 文件...

    9 天前
  • Babel 编译 async/await 代码有什么坑点？

    随着 JavaScript 发展，异步编程变得越来越重要。ES7 中引入的 async/await 是一种解决异步编程问题的方法，该方法对于编写易读的代码非常有帮助。

    9 天前
  • 解决 Hapi 框架中的错误：Cannot find module 'hapi-swagger'

    在使用 Hapi 框架时，有时候会出现 Cannot find module 'hapi-swagger' 的错误。这个错误的原因是因为在项目中没有安装 hapi-swagger 这个模块导致的。

    9 天前
  • Promise 中 then 方法中返回 Promise 对象是否会影响后续的 then 方法？

    Promise 中 then 方法中返回 Promise 对象是否会影响后续的 then 方法？ Promise 是一种异步编程模型，它可以解决 JavaScript 中的异步问题，让代码更加可读和易...

    9 天前
  • 如何使用 CSS Grid 实现复杂的布局需求

    随着用户对网站和应用程序的需求越来越复杂，基于网格布局的设计方案开始变得越来越受欢迎。在这篇文章中，我们将深入探讨如何使用 CSS Grid 实现复杂的布局需求。 什么是 CSS Grid CSS G...

    9 天前
  • SASS 常见的深度选择器使用方法与技巧

    SASS 是一门 CSS 预处理器，可以在 CSS 的基础上增加许多强大的功能，缩短开发时间，提高生产效率。其中，SASS 的深度选择器功能是一项非常实用的功能。本文将详细介绍 SASS 的深度选择器...

    9 天前
  • 使用自定义元素构建可访问的组件

    前端开发中，组件化架构已经成为了一个标准的开发模式。自定义元素是 HTML5 新增的元素，它可以让我们定义自己的元素，通过 JavaScript API 来扩展 HTML5 的语义。

    9 天前
  • 在 Node.js 中用 GraphQL 构建大型 API 系统

    GraphQL 是一种新型的 Web API 查询语言，它允许客户端指定需要获取的数据并精确控制返回的数据结构。相比于传统的 RESTful API，GraphQL 可以极大地简化前后端之间的信息交换...

    9 天前
  • 性能优化：避免在大循环中使用 eval 函数

    在前端开发中，我们经常需要处理大量数据和循环操作。但是，如果在循环中使用 eval 函数，会导致严重的性能问题。本文将介绍 eval 函数的工作原理、使用场景和如何避免在大循环中使用 eval 函数。

    9 天前
  • 使用 ES9 中的 ArrayBuffer.prototype.transfer() 快速传输数据

    什么是 ArrayBuffer？ 在 JavaScript 中，ArrayBuffer 对象是一个固定长度的二进制数据缓冲区。它是通过传递一个整数来创建的，该整数表示所需的缓冲区大小（以字节为单位），...

    9 天前
  • Deno 中常见的编码错误及解决方案

    前言 Deno 是一款基于 JavaScript 和 TypeScript 的运行时环境，它提供了许多现代化的功能和 API，使得它成为前端开发中备受推崇的工具之一。

    9 天前
  • 如何在 Vue.js 的 SPA 中使用 LocalStorage 来存储数据？

    当开发一个 Vue.js 的 SPA 应用程序时，通常需要使用一些技巧来管理数据。其中，使用 LocalStorage 来存储数据是一种很好的选择。在这篇文章中，我们将讨论如何在 Vue.js 的 S...

    9 天前
  • Fastify框架的异常处理机制详解

    Fastify是一种用于构建Web应用程序和API的快速和低开销开源Web框架。其中一个主要的优点是，它的代码质量非常高，并且针对性能进行了优化。在本文中，我们将介绍Fastify框架的异常处理机制，...

    9 天前
  • Linux 下使用 PM2，从部署到监控

    简介 PM2 是一个流行的、跨平台的 Node.js 进程管理工具。它可以帮助开发人员快速部署和管理 Node.js 应用程序，从而提高应用程序的可靠性和可扩展性。

    9 天前
  • 无障碍性能问题的快速定位技巧

    作为前端开发者，我们必须考虑到不同用户的需求和体验，保证我们的网站或应用能够被尽可能多的人所访问和使用。而一个重要的方面就是无障碍性能（Accessibility）。

    9 天前
  • Angular 中的 RxJS 连接

    Web 应用程序中的数据流管理变得越来越重要。RxJS 是一种将异步和事件驱动的程序转化为可观察序列的工具，它有助于编写更清晰、更稳定以及更健壮的代码。在 Angular 中，RxJS 已成为了连接组...

    9 天前

相关推荐

    暂无文章