Google Recaptcha & Gatsby 错误：reCAPTCHA 占位符元素必须是元素或 id

Question

我试图将recaptcha v2添加到我的Gatsby/netflix网站表单，我错过了实际显示小部件的最后一部分。它只是不显示它的位置。

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

gatsby- sr.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>

错误"Uncaught (in promise) error: reCAPTCHA占位符元素必须是元素或id"出现在我添加任何netflix属性到我的表单之前，所以我很确定这与它无关。

任何想法?谢谢。

Answer 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-ssr.js实现，您可以通过添加React组件来实现更原生的实现，如上面的代码片段所示。您需要获取该值并将其发送给netflix请求。我建议你也在form组件中设置一个action。

您还缺少表单的一个关键属性:name。如果没有这个，netflix将永远不会知道你的表单是如何命名的，也不会在仪表板中显示它(你也需要发送它)。

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

有用的资源:

• 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