0

我正在尝试在 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 的答案：

在 Firebase 中使用验证码

如何将它与 Angular 或 React 一起使用：

Google/Firebase reCaptcha 不适用于 Angular Firebase：Invisible reCaptcha 在 React JS 中不起作用

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

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

4

1 回答 1

0

这是如何添加 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>
于 2021-10-25T04:04:34.420 回答