recaptcha

reCAPTCHA

An xpb plugin for Pocketbase that allows for the use of reCAPTCHA.

Provides an api endpoint for verifying reCAPTCHA responses, as well as a way to configure requiring reCAPTCHA for record request actions on designated collections.

Installation

Option 1: Download a build from PocketBuilds

Plugin Page

Option 2: Use the xpb builder

1. Install XPB.
2. Use the builder:

xpb build --with github.com/pocketbuilds/recaptcha@latest

Setup

Follow the guide here to setup your reCAPTCHA and get a secret and site key.

Endpoint

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

<button id="recaptcha">Submit</button>

<script type="module">
  import PocketBase from '/js/pocketbase.es.mjs';
  
  const client = new PocketBase("http://localhost:8090");
  const siteKey = "YOUR_SITE_KEY";
  
  document.getElementById("recaptcha").addEventListener("click", onClick);
  
  async function onClick(e) {
    e.preventDefault();
    grecaptcha.ready(async function() {
      const token = await grecaptcha.execute(siteKey, {action: "submit"});
      const res = await client.send("/recaptcha", {
        method: "POST",
        body:   JSON.stringify({token: token}),
      });
      console.log(res);
    });
  }
</script>

Record Request Hooks

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<form id="example-form">
  <div class="form-field">
    <label for="email">Email</label>
    <input name="email" type="email" />
  </div>
  <div class="form-field">
    <label for="password">Password</label>
    <input name="password" type="password" />
  </div>
  <div class="form-field">
    <label for="passwordConfirm">PasswordConfirm</label>
    <input name="passwordConfirm" type="password" />
  </div>
  <button>Submit</button>
</form>
<script type="module">
  import PocketBase from '/js/pocketbase.es.mjs';
  
  const client = new PocketBase("http://localhost:8090");
  const siteKey = "YOUR_SITE_KEY";
  
  document.getElementById("example-form").addEventListener("submit", onSubmit);
  
  async function onSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.target);
    grecaptcha.ready(async function() {
      const token = await grecaptcha.execute(siteKey, {action: "submit"});
      await client.collection("users").create(data, {
        headers: {
          "Recaptcha-Token": token,
        },
      });
    });
  }
</script>

Server Side Usage

Go

import "github.com/pocketbuilds/recaptcha"

// manual use of VerifyRecaptcha
result, err := recaptcha.VerifyRecaptcha(&RecaptchaVerifyParams{
    RemoteIp: e.RemoteIP(),
    Token:    body.Token,
})

// OnRecpatchaVerify hook
recaptcha.OnRecaptchaVerify().BindFunc(
    func(e *recaptcha.RecaptchaVerifyEvent) error {
        // do somthing before verify
        if err := e.Next(); err != nil {
            return err
        }
        // do somthing after verify
        return nil
    },
)

JS

// manual use of VerifyRecaptcha
let result = recaptcha.verifyRecaptcha({token: body.token});

// onRecpatchaVerify hook
recaptcha.onRecaptchaVerify(e => {
  // do somthing before verify
  e.next();
  // do somthing after verify
});

Plugin Config

[recaptcha]
secret = ""
[recaptcha.endpoint]
# Enable or disable the recaptcha endpoint feature.
# - default: false (feature is enabled)
disabled = false
uri = "/recaptcha"
[recaptcha.record_request_hooks]
# Enable or disable the record request hooks feature.
# - default: false (feature is enabled)
disabled = false
# Array of collections that will require recaptcha verification,
#   and which record request events will require it.
[[recaptcha.record_request_hooks.collections]]
# Name of the collection you want recaptcha verification checks for.
# - required
collection_name = "users"
# Array of record request events that will require recaptcha verification.
# - options: "create", "update", "delete", "view", "list"
events = ["create", "update", "delete", "view", "list"]