联系表格7 Recaptcha 3无头网站

Question

我正在构建一个wordpress headless站点(前端使用Nuxt.js(，并尝试在联系人表单7中使用repatcha v3。我已经使用内置的cf7集成设置了集成。

但是，问题是联系人表格7将我所有的电子邮件都标记为垃圾邮件。因此，我安装Flamingo插件只是为了查看错误日志。显然，错误日志显示reCAPTCHA响应令牌为空。这是有道理的，因为repatcha是在WordPress中设置的，而由于我的前端是解耦的，所以它没有得到令牌。

我读过关于使用vue-recaptcha的文章，但这意味着要设置一个新的repatcha，它与WordPress中的repatchaI设置完全不同。我找不到一种方法将WordPress的重述和我的前端链接在一起。

任何建议都将不胜感激，谢谢！

我发现了一个与我相似的帖子：https://www.reddit.com/r/Wordpress/comments/o48hd1/contact_form_7_plugin_endpoint_for_recaptcha/，但没有明确的答案。

我现在已经成功地在前端实现了recatcha，但我不知道如何利用WordPress的recatcha令牌让后端和前端协同工作。重述当然不能只在前端，因为其他人可以使用Postman向我的端点发送垃圾邮件。我就是这样做的：

async function verifyCaptcha() {
try {
// @ts-ignore
recaptchaToken.value = await context.$recaptcha.execute();
const response = await axios.post(
`/captcha-api/siteverify?secret=${process.env.SECRET_KEY}&response=${recaptchaToken.value}`
);
// console.log(response)
return response;
} catch (error) {
return error;
}
}
async function onSubmit(e: any) {
const recaptchaResponse = await verifyCaptcha();
// Display error message if verification was not successful
if (!recaptchaResponse.data.success) {
// @ts-ignore
context.$recaptcha.reset()
return;
}
// If verification was successful, send the message
await submit(e);
}

Answer 1

我找到了解决方案。我们只需要将联系表格7所需的一些具体的重述3回复传递回联系表格7。

const token = await context.$recaptcha.execute('login')
// console.log('ReCaptcha token:', token)
const emailBody = {
"your-name" : form.name,
"email" : form.email,
"enquiry" : form.enquiry,
"message" : form.message,
//recaptcha responses to pass back to CF7
"_wpcf7_recaptcha_response" : token,
"wpcf7_recaptcha_response" : token,
"recaptcha_response" : token,
"recaptcha" : token,
"token" : token
}
const body = new FormData()
for (const field in emailBody) {
// @ts-ignore
body.append(field, emailBody[field])
}
const headers = {
'Content-Type': 'multipart/form-data',
}
const response = await axios.post('https://yourdomain.com/wp-json/contact-form-7/v1/contact-forms/{id}/feedback', body, { headers: headers})
// Use responseData to check its status to do some logic
const responseData = response.data

onMounted(async () => {
await context.$recaptcha.init()
})
onBeforeUnmount(() => {
context.$recaptcha.destroy()
})