Recaptcha and Firebase with Plain HTML / PHP and Kirby

Question

I'm trying to implement firebase on a Kirby website (a CMS run on PHP) so visitors can mark subpages to show up as links on the landing page.

To do this, I've constructed a form where a user adds their name when on the subpage to highlight it. The form doesn't submit when the button is clicked, but instead uses JS to add a document to Firebase (where it can be approved or deleted).

I'd like to prevent abuse and am interested in adding Recaptcha as a step when the visitor "submits" the page.

A simplified version of my code looks like this.

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;
})

I've found answers to enable Recaptcha with Firebase that use Firebase hosting, or as a method for sign in:

Using recaptcha with Firebase

How to use it with Angular or React:

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

I am wondering how this can be done using just HTML (no app framework), or with PHP, and without a login?

I am very amateur web developer, so really appreciate any insights on this! I apologize in advance if this is an obvious question. Thank you!

Answer 1

here’s the code how you can add recaptcha but I’ll suggest you to use Php in the backend to verify the status :

First add this in head tag

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

Then add the site key and block for error message

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

Then add script tag :

<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>