Google reCAPTCHA v3 in React.js

hey guys on January 1st 2019 I created this video tutorial about how to install Google reCAPTCHA version 3 on the website and basically here we installed we used plain HTML Javascript and PHP to build this form and install this recaptured we verified the user if the user who is submitting form is a robot or not so here we're using PHP to send the data to Google and get a response from them in having that support we could detect if the user is a robot or not I'm gonna pull the video so make sure you watch this video and you understand how it works and then after that just watch this video I'm gonna leave this link in the description of this video so you can you can go ahead and watch it first here and then after that just come back and watch how we create this tutorial so in this suit or I'm gonna create this contact form and it's in react j/s of course and we will install Google reCAPTCHA as you see accurate it's saying that it's protected by reCAPTCHA and we won't have any backend stuff we will just don't react and Google in in integrator capture it so it's a quick demo you know we have this for Michael of this form my click send and I see this invitation to send message sent now if I change for example the credential to my reCAPTCHA on the right side I can see that stone you already the earth for side owner invalid side key and I submit this form even if I click on the send button I don't I don't get any confirmations here which means I don't get any response from Google and not having a response from Google this solution is invalid so if I put my credential correct credential to the capture I we see that it's it's working fine so it's a quick it's gonna be a short video but is what we'll do in this tutorial and let's go ahead and get started guys I'm using vs code as you see here and I'm gonna stop I have this running right now on my server on my computer just to show you some stop it I'll go back by the way I'm gonna leave a link to the source code so you can take a look there T so here I'm gonna create another app MPX create react app and let's say reCAPTCHA 3 and this is gonna take a while guys so I'm just gonna go ahead and pause the video and I'm gonna resume it whenever whenever it's down alright guys my app is installed now I'm just gonna start it and iam start I'm just miss Paula alright and then while it's starting let's go ahead and let's go ahead and access the Google reCAPTCHA official page just called Google reCAPTCHA google.com slash reCAPTCHA like this and they just press ENTER and it's gonna redirect it to this page now from here just click on rights make sure you login and then after that just click on the admin console button on the right side on top and it's gonna redirected to this page where you can create a project so if you don't have any project just make sure you pay it one I'm not sure how it looks like if you don't have any projects but make sure you find somewhere a button where it's saying create create project right now I have it here so I'll just click here and wherever I have my life my label I'm gonna insert say react we capture everything together and here I'm sure I'm choosing the recaptured version 3 and then wherever you have your domains make sure for example I'm looking of course I'm gonna just type in localhost only if you are working on the sub domain where domain make sure you add your domain there so here I'm gonna add localhost and press enter sometimes make sure it's added here the owner I'm gonna accept the recapture Terms of Service and I don't want to receive any alerts okay and just click Submit and here you'll get your site key and the secret key okay and let me see what's going on there with my well I get an error here just because of course I didn't I didn't go into my and open my folder so I'm just gonna go ahead and open it now we captured three okay and then here in DM start I'm gonna add as a work folder okay I'm gonna edit my app CSS I'm actually gonna remove everything oops just gonna remove everything except app class like this I'm gonna save it and then I will open my fjs and remove this logo SVG file and I will remove everything I have in my app class like this I'm gonna save it I'm gonna close my app CSS file if I open my browser well this app is loading now I'm sorry for for for it taking so long because my this computer is kind of slow that's wise like but okay so it's it's working fine if I stay here hi gonna save it supposed to see somewhere hi okay there you go here okay now before we go further let's I forgot to install some packages here so the first package is going to be the the first one's gonna is going to be the material UI so just to get more information about this one it's got this like a bootstrap and let's see what you you are react install it's gonna be on the same material UI calm so here you can find these commands on how to install it so let's go ahead and do that I'm gonna type in NPM and E and install material - UI in the press ENTER it's gonna take a while G and then after we install wait while it's installing let's let's take a look at an another package this package is the react google invisible reCAPTCHA this is what we'll be installing this wall and then after that integrated so see well this is taking a while all right I'm gonna close this one fin here but let me let me I was I was about to say let me pause the video but see that's going faster all right guys I'm gonna pause it okay so it's installed now let's go ahead and install our recapture package so we haven't been installed let me cook this all the way like this things in there press ENTER and this is gonna take a while as well so I'm gonna I'm gonna pause it alright this is installed so now let's go ahead and start our local machine so saying here start here on this website it's you can just search for react google invisible reCAPTCHA and it's supposed to be on this website NP ND m jl calm it's a package and you can read more information here about about this reCAPTCHA and how to use it in react I'm gonna close it so our app and it's live now close this I'm gonna close these okay so we have our app just now I'm gonna create another folder or my component I'm gonna have a single component for this form so have new folder and it's gonna be components now here I'm gonna have another funnel name it form dot J s here I'm gonna import three out of course this is gonna be a class it's gonna extend extend component so you have import react and then we will have component and import everything from we are also here we will import some some UI from material you want I can go down so here we have so we will import Mui theme provider will import the app bar text field raised button and then after that we'll have the importantly caption so let's go ahead and do that and have import and UI theme provider so here we have material material UI / styles / mui improviser okay and then below we have another one moving for the f bar so f or is is being imported for material you eyes - have bar okay the next one is execute and the text though has been imported from material UI / text field okay the next one is the raised button which is the is gonna be the submit button and we import this one from material on uy / raise button okay now here we have export glass form extends component extend component now here we will have a state and in the state we will save all the data from our form so here we will have the first first name and it's going to be empty and then we have last name and then we have the I don't know should we add email that's an email and then we have the message and we will have another state which is gonna be the message sent and this is going to be false by default and we will use this stage make sure to check if the message was sent or not so good check if the if we got a response from Google who will update this state and if this state will be true then that means we've got a response from positive response from Google and then after that we can just output that on confirmation that the message was sent now below let's create our inner function and here we'll have the return function of course so I have returned and here we have we will use the nui improviser this is the component we imported here so I have an improviser and then we will have the react fragment okay and then here we'll have our app or component and this is gonna have a property which is title so I have half bar title it's a contact form and then below we have the our fields so here we'll have text field and it's gonna take some properties T so we have hint text you will have enter your first name and then there's gonna be the floating label text okay we'll have first name and then we'll have the unchanged so here we'll have a handle change which is done updated state so we have own change event and this is gonna call another method which we will create it so this handle change and it's gonna have us a parameter the first name this is the state which will be updated and then we'll have another you know what guys let's just remove these two fields so we will make it quicker cool yeah we'll have just first name and last name in this one so I have this text field and you will have enter your last name you can add more fields if you want it's it's really up to you guys first name last name just make sure this parameters from here match with the state okay now we should create this handle change method and we will use es6 for that so I have handle change well actually here we will have write input and then we have event okay here we will and here we'll update the state so whatever we type in in in this field this handle changes can update the state so we will have here this dot service state like this we have input and then here we have the event the target the value okay so this is this is gonna be like like it's like a loop whenever we insert something any letter it's this method is being called and it takes all the value from the input and it updates the state so the first name gets the data from the first name field and last thing in Telugu same thing okay we have to have the handle change now we should have we'll have another actually here we need a submit button and we will do it right now so the submit button is the raised button component so we have raised button and this is gonna have some props as well like this and here we will have the reference so we'll have here well no you know what no the reference so we'll have a label which is gonna be sent and then we will have the style then the style is gonna be style style sheet dot button and then here we will have the on click event and this on click event is gonna call the send message method which we will have to create so whenever we will click on this button this button is gonna hold this send message and we will create this method right now so happy of course we will be using es6 as we get for the handle change so we have send message and we won't have any parameters here and then here we will just call the this we capture it CPA so whenever we will on this button we want to call this function which is this is a predefined function coming from reCAPTCHA so well actually before we do that just let's go ahead and import capture here because we didn't have import recapture from we have here react - google - invisible recapture and then having this recapture here whenever we imported we can use it here in this send message so we have here this pre-capture execute okay so what's this gonna do if you watch the video I told you so this kind of do its kind of send a request to Google and then Google is gonna return us a response and just to get that response we should add another component here this component is gonna be like a hidden component in our form as you watching that video that's the value we have on the second field from there and then we make that feel hidden up afterwards but this is gonna be the component we just imported from here so we'll have we captured from here use it under our button right right below so we will have like this very capture and of course we will have some props here and we will have the reference so wrap say my memory so RAF RAF okay we have this reCAPTCHA and we assign draft okay sample ID okay and then after that we have the side key here we'll have to insert the side and then we have another rock where another prop which is on resolve and here one resolve means if we got a positive if we got a positive answer from Google then we are calling this oops we're calling this on resolve method so we should create this method no and now let's go ahead and insert the side here just let's go back to our recapture and let's copy the side key from here and just paste it here and we have unresolved captcha okay everything looks good now let's go ahead and create this unresolved method and of course we will be using es6 and we won't have any parameters without this okay and here is the here is the time to update our message sent because if this method gets called that means we've got a positive response from Google which means the user this user is a human it's not a bar so we have this set state and we have message sent and we make web data to be true and then here is actually here's the place where you want to process your date I don't know maybe send it to an API or or do something else with your data we're not gonna do it here because I'm just gonna mainly show you how this encapture works and how it does is really require and back-end for it so we haven't process data here and then we can also let's just console console.log the state to see how we how it gets updated whenever we insert something in our forms so we have this state okay you just make sure in volunteer or I'm gonna save it and let's import it in our FJ s so we have import form thrown we have component slash form and then here in our app class I'm gonna call the form and I save it now and it must work now we shouldn't have any problems at all but you know you know what sometimes it happens that we have a problem components form doesn't contain a default export so I forgot you forgot to export this component from here so right below at the end of the file let's type in export default form Oh save it let's see what happens now everything looks fine let's open our browser so we have here our form but let's just add some the BR tag here and go back so this is how our form looks like right now and we have this two fields first name and last name and we also see on the right side that we have this budget which is saying that protected by reCAPTCHA and we forgot to do something here but let's see let's inspect it check our console we have all these warnings just because it if you read here this reCAPTCHA library is our clothing label fix of time string supplied via text expected polling so i misspelled something here of course like open field text it should be fixed it should be text here okay save it go back and check and we don't have that well that's floating because whenever we click on this field look at this first name it's gonna go up no it's floating all right so we get this warnings just because the you know this library is warning component will mount has been renamed and it's not recommended for use and all this other stuff here but this is explaining what Google does when all these libraries where we have installed in our app so we should be fine with this and you see our app you know our form is being protected but what we forgot here is we forgot to add the confirmation if the message is sent or not so let's see no typing something here extend and we should be able to see we save our data from our state because we've been using the console out there and let's go back and see let's spend an if statement here in our render function will have here see we should check our state so we will have a variable which is going to be a confirmation say nation and we assigned to this confirmation it's gonna be a next statement here so we'll have this state we check this state message sent is true then we will output in the following message it's gonna be have a deal here so we will say message sent otherwise we don't we don't assign anything to this variable and now let's just copy this variable and let's add it right below our app bar this and just save it now go back our app is been refreshed so waiting something here clicks and we get this notification confirmation to say message sent and we also get information in our from our state and once everything works fine and our our form right now is protected by the visible recapture but if I go back and say for example where I have it here I'm gonna remove for example then insert a wrong side key if I go back you know we refresh we can see the term or side owner invalid side key and if I fill up the form and click send we don't get any you don't get anything here we don't even update the state because this we capture is invalid because we don't get any response from Google so let's let's take an overview of this and we have here so we import all this we import react and all these packages they're like bootstrap they're just CSS styling and then we import a capture this is the package will install T and we have the state first name last name and then the message sent which is false by default so here is our one and it's very important for you to you watch that video I recommend because I really explain there really well and more details on how this recap check really works so we have a form here now whenever we click on the on the on the submit button to send this button is calls this sent message method which is this one and then this send message method fires up the reCAPTCHA it tries to execute it okay whenever it fires up this recaptured music called Google it sends to Google the data about the user who submitted this form now if Google responds with a positive response which means that a positive response I mean I mean a Google confirms that this person that this user is a human then this reCAPTCHA the component calls the own own resolve method which is here and then this method just updates our state our message sent state to true and of course we console.log the state after that and then here now render function we assign to our confirmation variable D message sent text if this state is true if not we don't assign anything and then after that we just don't put that here above all of yours so that's that's pretty much it guys it's really easy in react to use it with way as if you may pay attention we didn't use the the suited key in this tutorial and we don't even really need it for it and that's how you can use the CAPTCHA in your future projects forms or we don't really need a back-end for that if you guys have any questions just feel free to be in on the comments I'll do my best to help you out if I want if I won't help you there there's going to be somebody else because we're like a community so thank you very much for your attention guys and I will see in the next tutorial

Channel: Vicode Media

Views: 20,871

Keywords: invisible recaptcha tutorial, recaptcha, captcha, tutorial, google recaptcha, integrate recaptcha, invisible recaptcha, recaptcha tutorial, install recaptcha, install invisible recaptcha, reCAPTCHA v3, JavaScript reCAPTCHA v3, JavaScript, react, recaptcha in react.js

Id: 5jbr0j8hYqE

Length: 31min 23sec (1883 seconds)

Published: Sun Oct 06 2019