javascript - 带有纯 HTML / PHP 和 Kirby 的 Recaptcha 和 Firebase
问题描述
我正在尝试在 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 的答案:
如何将它与 Angular 或 React 一起使用:
Google/Firebase reCaptcha 不适用于 Angular Firebase:Invisible reCaptcha 在 React JS 中不起作用
我想知道如何仅使用 HTML(无应用程序框架)或使用 PHP 而无需登录来完成此操作?
我是一个非常业余的网络开发人员,所以非常感谢对此的任何见解!如果这是一个明显的问题,我提前道歉。谢谢!
解决方案
这是如何添加 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>
推荐阅读
- swift - 如何将多个视图控制器合并到一个滚动视图中。
- apache-spark - 在包含保留字符的 Spark 中解析 JSON
- angularjs - 如何做 ng-model 选择颜色的正确方法?
- github - Terraform 错误:权限映射中应有至少一项权限
- sharepoint-2013 - 在快速启动中创建缩进菜单,可以看到基于permission-sharepoint 2013
- azure - Azure ARM 部署 DNS 条目
- magento2 - 当用户将商店从一个商店切换到另一个 Magento 2 时,迷你购物车不刷新
- ipython - 将 (1,103,10) 重塑为 (103,10) 数组
- javascript - 滚动文档,使单击的元素出现在页面顶部
- java - 如何让nestedscrollview 可以滚动或不滚动?