reCAPTCHA v3

Here you will learn how to implement reCAPTCHA v3 into a project. It is pretty simple to use and doesn't hinder the users at all, as it all runs in the background.

Implementation

Before you start, consider checking which page you would like to protect against suspicious activity (like spambots).

Site registration

After you've decided, you can go to the reCAPTCHA admin panel and register a new site. Make sure you're using the Renuo admin account.

To register the site, you can follow these steps:

  1. Use [project-name] as a label for the site.
  2. Choose reCAPTCHA v3
  3. Add all the domains on which reCAPTCHA should work (renuoapp.ch should also be included for the develop environment)

After you've provided all the necessary data, you will be forwarded to a page where you will find the site and secret keys. These will be needed later on (you can always find them in the site settings).

Frontend implementation

For the frontend implementation, you can follow these steps and integrate reCAPTCHA into the chosen view.

Backend implementation

For the validation to work, you will also need some backend code which will call the reCAPTCHA verification API, which then returns a score based on which it will be decided if the request (to your site) was normal or suspicious. You can follow these steps to do it.

If you have trouble integrating reCAPTCHA, you can find some inspiration by checking out one of these pull requests:

  1. Kingschair
  2. Germann

Testing

In order to test it, you can add localhost as a domain in the reCAPTCHA admin panel and provide the required keys in the application.yml. If your integration worked, then you will see a small container in the bottom right corner of your chosen page, something like this: reCAPTCHA demonstration