How to use reCAPTCHA with React | reCaptcha V3, reCaptcha Create React App

hey how's it going so we're gonna do this you see capture and then I'll just show you how to add the capture and how it works so okay so what am I doing first first thing I'm gonna do is I'm gonna go to my practice component right so it's going to be a practice component I'm just gonna be like this I think right okay so now in here we are going to create a button all right we're going to create a button um so button is only going to be activated when capture is done right so we're gonna add captcha is done sir capture is down to false new state full so this is like this do like this okay all right so next thing you need to do so it's going to be our state and next thing you need to do is you need to go to Google admin I'm gonna link this in description below Google admin captcha I think it's like this what I'm gonna pause um one sec let me just pause so I make sure don't click any okay so you go to here you see Google com captcha and then you go to admin console which is like this I'm gonna link this probably in description below let me just put it somewhere I'll just put it in here one sec okay so we are in admin console console or whatever right next a plus sign create name your captcha I do not call it cool captcha okay capture three domains localhost and then I don't know you're the main now it's not gonna work I think it's not gonna work for I don't know we can try accept and then submit once you submit right you're gonna get um keys so obviously I'm not going to show you my keys right so you get your side Keys okay now um let me actually test one second I'll be back okay so your original keys are not gonna work in localhost 3000 all right so you need to save them when you are deploying to your production you're gonna have to to your actual website right yeah you have to use your keys right but for development for development you can use from this website I'll link it in the description below you can use these keys okay so I'm gonna link this in description below okay so let's take this key um and let's put it into where is our practice go on ski equals this ideally you want to maybe put it into some kind of file like utilities or whatever but that's up to you now the next thing you need to do is you need to again I'm going to put this in description below you need to install this thing here so npm install yeah mpm install right I'll put this into description below as well and then you're gonna need this component here where is our okay so check that it's uh Google capture okay so we have it okay so now go back to practice all right so we're gonna put our capture in here like this oh we forgot to bring it in my apologies so we're gonna be copy and pasting this part here let me see this part here because we need to bring it in and now we need to take the captcha okay so there's two ways to do it you can create on change function like this function on change like this and then set capture done to true and we can cancel log something console log changed okay so now you're gonna see that which is my thing so we need to go to practice error site key is not valid I think it's because we forgot to put the key in right yeah so we need to put the key in in here this key here so put the key in now it should work right okay so now we want to disable the button and only so you see it console logs changed so only when you do the captcha then it will activate the button now you can do it in any way you want but for simplistic purposes I'll just put um disabled now you're going to get confused if I do it this way um because the I'll just put um only when capture is done this submit button is going to appear all right so if we go to here there should be whoopsie there should be no submit button right yeah so once we do the captcha submit button appears and then you can submit that's it it's as easy as this all right take care bye

Channel: CoderDmitri

Views: 16,769

Keywords:

Id: K4MBQAPMQCg

Length: 8min 13sec (493 seconds)

Published: Wed Dec 28 2022