React：ReCAPTCHA vlient 和服务器演示

在此演示中，我将在基于 Next.js 构建的 React 应用程序中使用 Google ReCAPTCHA v3 凭据。 ReCAPTCHA 令牌将在客户端生成并在服务器端验证。

链接

• 演示

• 代码库

第 1 步：生成您的 ReCAPTCHA 凭证

前往 Google ReCaptcha V3 并生成您的凭据。

第2步：导入ReCaptcha库

<script src="%7B%60https://www.google.com/recaptcha/enterprise.js?render=%24%7Bprocess.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY%7D%60%7D"></script>

注意：您可以使用一些包，但实现很简单。

第 3 步：在点击处理程序中调用执行方法

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha 是导入脚本注入的对象。

注意：使用 Next.js 时，请确保浏览器中公开的所有环境变量都以 NEXT_PUBLIC 为前缀。

当用户单击登录时，应用程序会通过调用 grecaptcha 对象中的两个方法自动为其生成验证码：

• window.grecaptcha.enterprise.ready：这确保 Google reCAPTCHA 对象已准备就绪。
• window.grecaptcha.enterprise.execute：这会生成验证码令牌。

最后，数据连同生成的验证码令牌一起发送到后端（在我的例子中，我使用 Lambda 函数）。

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

注意：如果您使用表单，您还需要包含其他字段值，例如用户名、名称或表单收集的任何其他数据。

第四步：在后端验证验证码

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha 是一个调用 Google API 端点的后端方法，传递 SECRET_KEY（存储为环境变量）和客户端生成的验证码令牌。

如果验证码有效，API 响应将如下所示：

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

结论

ReCaptcha 对于保护表单至关重要，尤其是当您希望阻止机器人提交表单时。 Google 提供免费套餐，每月最多可提供 10,000 次评估（截至撰写本文时），这使其成为许多应用程序的可靠选择。谷歌提供的库使集成变得更加容易。您只需要传递您的凭据：客户端上的 SITE_KEY 和服务器端上的 SECRET_KEY。

要记住的一个关键点是 SECRET_KEY 永远不应该在客户端公开，因为这可能会损害应用程序的安全性。只有 SITE_KEY 是供客户端使用的。

以上是React：ReCAPTCHA vlient 和服务器演示的详细内容。更多信息请关注PHP中文网其他相关文章！