Xano - Google reCAPTCHA Demo

Integrate Google ReCAPTCHA with Xano: A Step-by-Step Guide

In this guide, we'll walk you through the process of integrating Google's ReCAPTCHA service with your Xano application. This integration helps ensure that user interactions with your application are legitimate, protecting you from spam and abuse. Let's get started!

Step 1: Install the Google ReCAPTCHA Extension

First, make sure you have the Google ReCAPTCHA extension installed from the Xano marketplace. Once installed, you'll see a blue "Configure" button prompting you to set up the extension.

Step 2: Obtain Your ReCAPTCHA Keys

Click on the "Configure" button to open the environment variables window. Here, you'll need to provide a ReCAPTCHA secret key.

To obtain your secret key (and site key), follow these steps:

1. Visit the Google ReCAPTCHA homepage (https://www.google.com/recaptcha/about/) and click on the "Admin Console" button.
2. In the ReCAPTCHA admin console, click the "+" button to create a new ReCAPTCHA.
3. Fill out the relevant information, such as the label, reCAPTCHA type (v2 or v3), and the domain where you'll be using the ReCAPTCHA.
4. Accept the terms of service and click "Submit".
5. Copy the provided "Site Key" and "Secret Key".

Step 3: Configure the ReCAPTCHA Extension

Back in the Xano environment variables window, paste the "Secret Key" you obtained from Google into the provided field. Click "Update" to save the configuration.

The blue text should now turn green, indicating that the extension is correctly configured.

Step 4: Test the Integration

With the extension set up, you can now test the ReCAPTCHA integration using the provided demo page.

1. Click "View Demo" to open the demo page in a new tab.
2. On the demo page, click the "Test with your Xano account" button.
3. Enter the required information:

• Xano Base URL: Copy this from the base request URL in your Xano API group.
• Site Key: Copy the "Site Key" you obtained from Google.

1. Click "Update Settings" and test the ReCAPTCHA functionality by entering some sample text and checking the "I'm not a robot" checkbox.
2. Click "Submit" to verify that the ReCAPTCHA integration is working correctly.

Congratulations! You've successfully integrated Google's ReCAPTCHA service with your Xano application. This integration helps ensure that user interactions with your app are legitimate, protecting you from spam and abuse.