Bubble Tutorial - Integrate Google reCAPTCHA

In this video I show you how to integrate the reCAPTCHA service from Google into Bubble. We show two possibilities. Link to Google reCAPTCHA: https://developers.google.com/recaptcha/intro

Video Transcript:
Hello, my name is Chris Strobl and today I'm going to show you how we can integrate reCAPTCHA from Google in the Bubble.

ReCAPTCHA is a service that helps you to recognise whether a human or a machine, i.e. a board or computer, is using your website. This is especially necessary when spam or phishing attacks attack your website. We now go to Plugins and have already installed the reCAPTCHA plugin from Bubble. Then we need these keys.

That's why we're going to Google's Developer Guide. I've given you the link in the comments and we need to register here for an API Keys per. You take a domain, for example your Bubble App. In my case No Code Germany and us then reCAPTCHA version 2, because this version 3 does not yet work in the Bubble with the plugin. You then select the box. I am not a robot. Add another domain. You now hold two API keys. These are copied. Once the website key.

This is the sidekick and once copy the secret key code. Here they also take over into the development environment. Now that we have added the API keys, we go into the designte and under Input forms we have this reCAPTCHA form. We add this. And now we have two possibilities to insert reCAPTCHA.

I'll show you the first option The form is always visible and the register button is only clickable. After we have validated that no robot is using this website. For this, the element visible is around Page is loaded. We click the Register button. And now say Account are the users. And add a Refresh the page function behind it. And we now go up here in the Workflow tab and say this will only execute if reCAPTCHA Forms is there check. So only if this reCAPTCHA form is also activated, then the workflow will feel executed.

We now go once into Preview and look at the whole thing! And we see that when we click on Register, nothing happens, of course we can also support this visually by the button not being quickbook and then I'm not a Robot and we register and see that we have now registered. The second possibility, which you also see more often, is that the reCAPTCHA is not visible at the beginning and.

We, as soon as we click register, make this visible. For this, the reCAPTCHA is not visible at the beginning and we go into the register button and say this workflows right away only if the button is registered, clicked and reCAPTCHA is checked. We copy this workflow and now say if this is not checked then. Show an element, namely the reCAPTCHA form. We now go to Preview once and look at that.... We currently see the reCAPTCHA not visible. We go to Register. Now it is visible. And we register.

And so we could see that there are two ways to elegantly integrate reCAPTCHA in the bubble. If you liked this video, feel free to click on the Like button or subscribe to our channel if you have any questions. Use the comments. I wish you continued success and see you soon.