Next.js如何在联系人表单中实现react-google-recaptcha

npm install react-google-recaptcha

import ReCAPTCHA from "react-google-recaptcha";

<form>
  {/* 其他表单字段 */}
  <ReCAPTCHA sitekey="YOUR_SITE_KEY" />
  <button type="submit">提交</button>
</form>

import nextConnect from "next-connect";
import axios from "axios";

const handler = nextConnect();

handler.post(async (req, res) => {
  const { recaptchaResponse } = req.body;

  // 验证reCAPTCHA响应
  const verificationUrl = `https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=${recaptchaResponse}`;
  const response = await axios.post(verificationUrl);

  if (response.data.success) {
    // reCAPTCHA验证通过，处理表单提交逻辑
    // ...
    res.status(200).json({ success: true });
  } else {
    // reCAPTCHA验证失败
    res.status(400).json({ success: false, message: "reCAPTCHA验证失败" });
  }
});

export default handler;

import { useState } from "react";
import axios from "axios";

const ContactForm = () => {
  const [recaptchaResponse, setRecaptchaResponse] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    // 发送表单数据和reCAPTCHA响应到API路由
    const response = await axios.post("/api/contact", { recaptchaResponse });

    if (response.data.success) {
      // 表单提交成功
      // ...
    } else {
      // 表单提交失败
      // ...
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 其他表单字段 */}
      <ReCAPTCHA sitekey="YOUR_SITE_KEY" onChange={setRecaptchaResponse} />
      <button type="submit">提交</button>
    </form>
  );
};

export default ContactForm;