Google Recaptcha & Gatsby Error: reCAPTCHA placeholder element must be an element or id

Posted 2023-02-19

【中文标题】Google Recaptcha & Gatsby Error: reCAPTCHA placeholder element must be an element or id

【英文标题】：

【发布时间】：2021-10-06 06:46:49

【问题描述】：

我正在尝试将 recaptcha v2 添加到我的 Gatsby/Netlify 站点表单中，但我错过了实际显示小部件的最后一部分。它只是没有显示它的放置位置。

到目前为止我的代码是这样的

gatsby-s-s-r.js 文件：

import React from "react"

export const onRenderBody = ( setHeadComponents, setPostBodyComponents ) => 
  setHeadComponents([
    <script
      dangerouslySetInnerhtml=
        __html: `
        function onloadCallback() 
          grecaptcha.render(document.getElementById('g-recaptcha'), 
          "sitekey": '6LfMWLkaAAAAAFYM11ctU1Dxfz_v3SVrAKLOR3rM',
        )
      
     `,
      
    />,
  ])

  setPostBodyComponents([
    <script
      key="abc"
      type="text/javascript"
      src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
      async
      defer1
    />,
  ])

以及联系方式：

<Form className="contact-form" method="post" data-netlify-recaptcha="true" data-netlify="true" netlify-honeypot="bot-field">
  ...
  <p className="hidden">
    <label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
  </p>
  ...
  <Form.Group id="recaptcha-container">
    <div id="g-recaptcha" className="g-recaptcha" data-netlify-recaptcha="true" render="explicit"></div>
  </Form.Group>
  ...
</Form>

在我将任何 Netlify 属性添加到我的表单之前出现了错误“未捕获（承诺）错误：reCAPTCHA 占位符元素必须是元素或 id”，所以我很确定这与它无关。

有什么想法吗？谢谢。

【参考方案1】：

我认为您的问题是您将脚本直接嵌入到 React 的范围之外，因此它在加载时永远不会再水化。最简单的方法是添加react-google-recaptcha 组件：

<Form className="contact-form" method="post" data-netlify-recaptcha="true" action="/" data-netlify="true" netlify-honeypot="bot-field">
  ...
  <p className="hidden">
    <label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
  </p>
  ...
  <Form.Group id="recaptcha-container">
  <ReCAPTCHA
    sitekey="Your client site key"
    onChange=onChange
  />,
  </Form.Group>
  ...
</Form>

正如我所说，我认为您不需要 gatsby-s-s-r.js 实现，您可以通过添加 React 组件来实现更原生的实现，如上面的 sn-p 所示。您需要获取该值并将其发送到 Netlify 请求。我建议你在表单组件中也设置一个action。

您还缺少表单的一个关键属性：name。否则，Netlify 将永远不会知道您的表单是如何命名的，也不会在仪表板中显示（您也需要发送它）。

请记住，reCAPTCHA 永远不会在本地加载，除非您将后台配置为接受本地请求 (127.0.0.1)。

有用的资源：

https://blog.larsbehrenberg.com/how-to-create-a-contact-form-with-recaptcha-hosted-on-netlify https://www.netlify.com/blog/2018/05/23/bring-your-own-recaptcha-to-netlify-forms/ https://docs.netlify.com/forms/spam-filters/#custom-recaptcha-2