In this guide, you’ll learn everything you need to know about integrating a reCAPTCHA form into your own Bubble application. reCAPTCHA forms allow you to verify the authenticity of a user within your application.
The process of adding a reCAPTCHA form into a Bubble app includes:
- Installing the plugin
- Generating reCAPTCHA API keys
- Using the reCAPCTHA element
Full Transcript of Tutorial
1. Installing the plugin
Over in a Bubble editor, I’ve gone ahead and created an example user registration page. This is the page where users can sign-up for an account within my application.
Of course, on this page, I’d like to add a reCAPTCHA form that verifies a user before they can create an account. This will help reduce the creation of fake accounts.
In order to add a reCAPTCHA form to my page, I’ll first need to install a free plugin.
If I open the plugin tab, I’ll search for the word reCAPTCHA. I’ll then install the plugin that’s built by Bubble.
Once the plugin’s installed, you’ll notice that there’s a few empty fields that require you to source some API keys. These API keys will activate your plugin and make it functional.
2. Generating reCAPTCHA API keys
In order to source these API keys, we’ll need to create a reCAPTCHA account within the Google developer portal.
Within the developer portal, select to create a new reCAPTCHA. You’ll then need to provide a name for this project. In my example today, I’ll call this the ‘Test Project’.
Now, we’ll need to select the style of reCAPTCHA form we’d like to leverage. I personally prefer the V2 reCAPTCHA form, which simply prompts someone to click a checkbox and verify that they’re not a robot.
After selecting the type of form, the last thing we’ll need to do is verify the domain we’ll be displaying our reCAPTCHA. This domain will simply be the URL of our application.
If I jump back into my Bubble editor, I’ll run a preview of my app and copy the URL of this page. I can then close this tab and open my Google developer portal once again.
Inside my developer portal, I’ll then paste the URL string I’d just copied.
Finally, we can now save our project and source our API keys.
Once you finalize a project, you’ll see that two API keys have become available. You’ll now be able to access both your site API key, as well as your secret API key.
To utilize these keys, simply copy and paste these over to the relevant fields within your Bubble editor. This will allow your plugin to now communicate with your Google developer account.
3. Using the reCAPTCHA element
Now that we’ve successfully configured the API keys for our reCAPTCHA plugin, we can go ahead and design the experience that end-users will interact with.
If we open our design tab, you’ll now see that you have a reCAPTCHA element that can be added to your page. Simply drag this element below your user registration form.
When you add this element to your page, you’ll have the ability to customize the configurations of its display. You’ll have the option to select the dark mode theme, as well as choose the size of the element.
Once you’ve configured the reCAPTCHA form settings, we’ll now create an experience that only allows a user to register a new account once they’ve verified themselves through our reCAPTCHA form.
The way we can create this feature is by adding a condition to our button that runs a registration workflow.
If I select my ‘register’ button, I’ll open my condition tab and define a new condition. In this condition, we’ll recognize when the reCAPTCHA element on our page isn’t verified, I’d like to make this button ‘not clickable’.
This means that until a user verifies they’re a human, they’ll be unable to run the workflow that creates a new account in our database.
And that’s actually all we need set up when configuring our reCAPTCHA form. I should point out that it’s also possible to replicate the same condition we created across any element or workflow in your application.
At this point, however, you now have a fully-functional reCAPTCHA feature that will verify the authenticity of new users in your app.