How to Integrate reCAPTCHA into Your Bubble.io App

i'm unable to actually click this button to run our registration workflow but if i was to now select our recaptcha form and that is to validate i will now have the option to click this button and our registration workflow will run [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to integrate a recapture form into your own bubble application let's open up a bubble editor and i can start walking you through the process over in my bubble editor for the sake of our tutorial today i've just created a dummy user registration page that users will need to go through in order to register an account within my application what i would like to do on this page though is just add in a recaptcha form above our registration button just to ensure that users have in fact verified that they are an actual person before they can then register an account in our application and in order to kick-start the process of adding our recapture form in we're first just going to need to install the free recapture plugin so if we head over to our plugins tab here we'll just need to open up our plugin library and type in the word recaptcha and from here we'll just be installing the recapture plugin that's built by bubble which is of course free as i mentioned so i'll just choose to install that plugin i can then close our plugin library and now on the actual plugin settings what you'll notice is that there's a couple of empty fields here that we'll just need to source some api keys for so in order to activate this plugin we're just going to need to create a recapture account and then we will connect the api keys from it to the relevant fields here and in order to create a recapture account we'll just need to head over to a google developer portal now i'll be sure to include a link to this in the description of this video but if you just like the url now it's google.com forward slash recaptcha forward slash admin forward slash create and this is going to allow us to create a new recaptcha form and in order to create a form you're just going to need a valid google account so i'm currently just logged in as my personal gmail account but once we've logged into our google account we can start creating our recapture form here so for the label i'm just going to call this the name of the project that i'm working on so in your case this is most likely going to be the name of your application i'm just going to call this building with bubble test application and then below this i can choose which style of recaptcha form i would like to use in my case i personally actually prefer the v2 recapture form which if i just select this you'll see the list of options that are available under this form type for our tutorial today i'm just going to be selecting the i'm not a robot checkbox so this is pretty self-explanatory this is just a checkbox that just ensures that a user actually validates it to ensure that they're not a robot so i'm just going to leave my selection at that and then if i scroll on down one of the last things i'll need to do is just verify which domain this form will be active on and that's going to be just the url of my bubble application so if i jump back over to my bubble editor i'm going to just preview any page in my application it doesn't matter what page it is and i'm just going to copy this url here i can then close this tab i'll jump back into my google developer portal and i'm just going to paste in that domain one thing i would just like to point out though is that if you hover over this information icon it just explains that you'll only be required to add in the root domain itself so i won't need any of the pages that are attached to this domain so if i was to jump back to the beginning of my domain i can scroll on across to the first forward slash where it breaks off into a page url string i will then delete anything past that point and then i'm also just going to remove the http verification as well on my domain so now this is just the name of my bubble application which in my case is called database example tutorial dot bubble apps dot io and one thing i will point out is that this is actually the domain of our bubble development environment so if you were to later on publish your application on a custom domain the domain itself is obviously going to be different so by that point you're going to actually have to create another recaptcha form and you'll need to validate the custom domain that you have on your application for the time being though we're just going to need the development domain here so i'm just going to leave that in and then the very last thing i'll need to do is just choose to accept the recapture terms of service and then i can move my head out of the way and choose to submit this new project and once this project has been submitted what you'll see is we will now have two separate api keys here one will be our site key and the other will be our secret key and now between these two keys what we'll just need to do is copy and paste these over into the settings of our plugin so i'm going to start by copying across my site key if i jump back into my bubble editor i will head to the psyche development tab here and i will paste that into the form field and as you can see below i'm just going to also need to copy across the secret key for my development project so if i jump back into recaptcha i can copy across my secret key and then i will just paste this into the field and that is all i will need to copy across later on throughout your build once you published your application on a custom domain and you created some separate recaptcha api keys you just need to paste those within the live environment fields here but for the sake of our tutorial today i'm just using the development keys here so i'm happy with those now we can jump over into our design tab and actually add the recapture form onto our page so in order to do that i'm first going to just move our registration button down and then going to scroll all the way down to my input forms menu here and what you'll see is we now have an option to add in a recaptcha form i'm just going to add that anywhere on my page and now you'll also see that you have a couple of different configurations that you can update here so you can make it a dark mode you can update the size to be compact or just a normal size i'm just going to set this back to light mode for the time being and i'm also just going to center that horizontally there within my page and now what i'd like to do is just create an experience that only allows a user to register an account once they've actually checked our recaptcha form here and the way i can do that is by selecting to add a condition onto our button so essentially as it stands this button can be clicked and it will run a workflow to register a new user's account but what i want to do is add a condition that only allows this button to be clicked when the recaptcha form is actually verified so i'm going to head over to my conditional tab here and i'm just going to define a new condition that recognizes if the recaptcha form isn't checked i'm going to select that this element isn't clickable and i will tick that that should be true so that just means that as long as our checkbox in the recapture form is not ticked a user will not be able to click this registration button and run that registration workflow so that just verifies that the user who's registering an account will in fact be a human and that's all we need to do in terms of configuring our recaptcha form one thing i would just like to note though is that if you'd ever like to restrict any workflows based on the recapture validation you can of course add conditions onto your workflow steps much the same as what we had created onto our button condition here it's actually pretty straightforward but now let's jump over into our preview of the application so i can just show you a quick example of how this whole process functions over on my registration page i just added in some details of a fake account that i'm going to register as you can see if i was to hover over this button while our recapture form has not yet been verified i'm unable to actually click this button to run our registration workflow but if i was to now select our recaptcha form and that is to validate i will now have the option to click this button and our registration workflow will run and now you can see we've been redirected through to a settings page which was just an additional step that i added into my registration workflow and just like that we've finished integrating a recaptcha form into our own bubble application and that's all that i wanted to cover throughout this tutorial of course if you'd like to stay in touch with any other tutorials or guides that i release i'd recommend hitting the subscribe button below until next time though i wish you all of the best on your own no code journey [Music]

Channel: Building With Bubble

Views: 165

Keywords: bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, Adalo, Zapier, Webflow, no-code tools, app development, MVP, minimum viable product, Bubble no-code, software development, Airdev, Zeroqode, reCAPTCHA, reCAPTCHA form, reCAPTCHA integration, reCAPTCHA setup

Id: Zf_BWc-JSgU

Length: 9min 47sec (587 seconds)

Published: Wed Dec 08 2021