带有纯 HTML / PHP 和 Kirby 的 Recaptcha 和 Firebase

Question

我正在尝试在 Kirby 网站（在 PHP 上运行的 CMS）上实现 firebase，以便访问者可以标记子页面以在登录页面上显示为链接。

为此，我构建了一个表单，用户在子页面上添加他们的名字以突出显示它。单击按钮时表单不提交，而是使用 JS 将文档添加到 Firebase（可以批准或删除）。

我想防止滥用，并且有兴趣在访问者“提交”页面时添加 Recaptcha 作为一个步骤。

我的代码的简化版本如下所示。

HTML：

<form id="add-item" action="?" method="POST">
    <label for="f-name">Submitted by:</label>
    <input type="text" id="f-name" name="f-name" placeholder="your name">
    <button type="submit">Submit</button>
</form>

JS：

document.querySelector("#add").addEventListener("click", function(e){
  const fName = document.querySelector('#f-name').value;
  tableRef.get().then(function(querySnapshot) {      
  var uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
    if(fName === true){
          tableRef.doc('item-'+uid).set({
            contributor: fName,
          })
        }
      });
  e.preventDefault();
  return false;
})

我找到了使用 Firebase 托管或作为登录方法的 Firebase 启用 Recaptcha 的答案：

Using recaptcha with Firebase

如何在 Angular 或 React 中使用它：

Google/Firebase reCaptcha not working with angular Firebase: Invisible reCaptcha does not work in React JS

我想知道如何仅使用 HTML（无应用程序框架）或使用 PHP，无需登录即可完成此操作？

我是一个非常业余的网络开发人员，因此非常感谢您对此的任何见解！如果这是一个明显的问题，我提前道歉。谢谢！

Answer 1

这里是如何添加 recaptcha 的代码，但我建议你在后端使用 Php 来验证状态：

首先在head标签中添加这个

<script src='https://www.google.com/recaptcha/api.js'></script>

然后添加站点密钥并阻止错误消息

<div class="g-recaptcha" id="rcaptcha"  data-sitekey="site key"></div>
<span id="captchaStatus" style="color:red" /></span>

然后添加脚本标签：

<script>
function checkCaptcha(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captchaStatus').innerHTML="Captcha code is empty";
        return false;
    }
    else
    {
         document.getElementById('captchaStatus').innerHTML="Captcha completed";
        return true; 
    }
}

</script>