如何在EmailJS中传递reCaptcha的g-recaptcha-response令牌

问题背景 #

使用EmailJS处理邮件发送业务，未开启reCaptcha时HTML表单运行正常，但开启后无法收到表单提交的邮件通知。已按照EmailJS文档完成配置，但不清楚如何传递reCaptcha令牌，现有代码如下：

原始HTML代码

<head>
  <script src="https://www.google.com/recaptcha/api.js"></script>
  
  <!--recaptcha-->
  <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>

<!--emailjs-->
<script type="text/javascript">
   (function(){
      emailjs.init("EMAILJS_KEY");
   })();
</script>
</head>

<div class="form-container">
            <h2>Contact Me</h2>
            <p>Feel free to contact me and I will get back to you as soon as possible.</p>
            <div class="row">
              <div class="col-lg-6">
            <form  method="POST" id="shev-form">
                <input type="text" name="name" id="name_id" placeholder="Name" required>
                <input type="email" name="email" id="email_id" placeholder="Email" required>
                <input type="text" name="subject" id="subject_id" placeholder="Subject" required>
                <textarea name="message" cols="30" rows="5" id="message_id" placeholder="Message" required></textarea>
                   <div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
                <input type="submit" value="Submit" id="submit_id" onclick="sendMail()">
            </form>
            </div>

原始JavaScript代码

function sendMail() {
  var params = {
    name: document.getElementById("name_id").value,
    email: document.getElementById("email_id").value,
    subject: document.getElementById("subject_id").value,
    message: document.getElementById("message_id").value,
    
  };

  const serviceID = "service_ID";
  const templateID = "template_ID";

    emailjs.send(serviceID, templateID, params)
    .then(res=>{
        document.getElementById("name_id").value = "";
        document.getElementById("email_id").value = "";
        document.getElementById("subject_id").value = "";
        document.getElementById("message_id").value = "";
        console.log(res);
        alert("Your message sent successfully!!")

    })
    .catch(err=>console.log(err));

}

解决方案 #

核心问题是未将reCaptcha验证通过后的令牌传递给EmailJS，同时需要阻止表单默认提交行为避免页面刷新，具体步骤如下：

1. 获取reCaptcha令牌：用户完成reCaptcha验证后，页面会自动生成一个名为g-recaptcha-response的隐藏输入框，其值就是验证令牌，需要将这个值加入到EmailJS的请求参数中。
2. 阻止表单默认提交：submit按钮默认会触发页面刷新，导致令牌丢失，需要在sendMail函数中添加阻止默认行为的代码。
3. 修改sendMail函数：将令牌加入params对象，确保EmailJS请求携带该令牌。

修改后的完整代码 #

修改后的HTML（调整表单提交事件）

<div class="form-container">
            <h2>Contact Me</h2>
            <p>Feel free to contact me and I will get back to you as soon as possible.</p>
            <div class="row">
              <div class="col-lg-6">
            <form  method="POST" id="shev-form" onsubmit="return sendMail(event)">
                <input type="text" name="name" id="name_id" placeholder="Name" required>
                <input type="email" name="email" id="email_id" placeholder="Email" required>
                <input type="text" name="subject" id="subject_id" placeholder="Subject" required>
                <textarea name="message" cols="30" rows="5" id="message_id" placeholder="Message" required></textarea>
                   <div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
                <input type="submit" value="Submit" id="submit_id">
            </form>
            </div>

修改后的JavaScript

function sendMail(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();

  // 获取reCaptcha令牌
  const recaptchaToken = document.querySelector('[name="g-recaptcha-response"]').value;

  var params = {
    name: document.getElementById("name_id").value,
    email: document.getElementById("email_id").value,
    subject: document.getElementById("subject_id").value,
    message: document.getElementById("message_id").value,
    'g-recaptcha-response': recaptchaToken // 将令牌加入参数
  };

  const serviceID = "service_ID";
  const templateID = "template_ID";

  emailjs.send(serviceID, templateID, params)
    .then(res=>{
        // 清空表单
        document.getElementById("name_id").value = "";
        document.getElementById("email_id").value = "";
        document.getElementById("subject_id").value = "";
        document.getElementById("message_id").value = "";
        // 重置reCaptcha，方便再次提交
        grecaptcha.reset();
        console.log(res);
        alert("Your message sent successfully!!")
    })
    .catch(err=>{
        console.log(err);
        alert("Failed to send message, please try again.");
        // 重置reCaptcha
        grecaptcha.reset();
    });

  return false;
}

额外注意事项 #

• 确保EmailJS后台已正确配置reCaptcha的密钥（Site Key和Secret Key），且与前端使用的Site Key一致。
• 如果验证失败，EmailJS会返回错误信息，可通过console.log(err)查看具体原因（如令牌无效、密钥不匹配等）。

内容的提问来源于stack exchange，提问作者Ibrahim Olammy